ExtJS 数据处理-Ext.data.field.field类型


更新记录
2022年7月21日 发布。
2022年7月16日 从笔记迁移到博客。

ExtJS教程汇总:https://www.cnblogs.com/cqpanda/p/16328016.html

Ext.data.field.field (字段)

说明

Ext.data.field.field类用于设置模型(model)的字段的数据类型
字段可以是: 预定义类型 或 自定义类型

ExtJS预定义字段类型:

数据类型 说明
Auto 自动(定义为Auto将不会发生自动转换)
String 字符串类型
Boolean 布尔类型
Int 整数类型
Float 浮点数类型
Number 数值类型
Date 日期类型

备注:
Date类型最好使用dateFormat配置项修饰日期格式
如果指定的字段(fields)没有定义类型,则将使用默认类型“auto”
字段类型定义为auto将不会发生自动转换

定义模型中的字段

使用fields属性设置模型中的字段

语法格式如下:

Ext.define('Employee', {
    extend: 'Ext.data.Model',
    fields: [
        { name: '字段名称', type: '字段类型' },
        { name: '字段名称', type: '字段类型', convert: null }
    ]
});

字段值自动转换

默认情况下,为字段(field)指定类型(type)后
数据在保存到字段之前会自动转换为该类型
自动转换由内置转换方法处理

注意:如果字段的类型是auto,将不会进行自动转换
注意:如果要避免其他字段类型的转换以提高性能,可以将convert指定为null

实例:数据类型自动转换

Ext.define('Employee', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int', convert: null }, //取消自动转换
        { name: 'fulltime', type: 'boolean', defaultValue:true, convert:null },
    ]
});

字段自定义转换,可以使用convert配置项 或者 calculate配置项

使用convert配置项

Ext.define('PandaApp.model.PandaNodel', {
    extend: 'Ext.data.Model',
    fields: [
        {
            name : 'StockValue',
            type : 'money',
            //自定义转换
            convert: function(value, record) {
                return record.get('Quantity') * record.get('Price');
            },
            //定义依赖的其他字段
            depends: ['Price', 'Quantity']
        }
    ]
});

使用calculate配置项

Ext.define('PandaApp.model.PandaNodel', {
    extend: 'Ext.data.Model',
    fields: [
        {
            name : 'StockValue',
            type : 'money',
            calculate: function(data) {
                return data.Quantity * data.Price;
            }
        }
    ]
});

字段默认值

使用defaultValue属性即可

Ext.define('Employee', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'fulltime', type: 'boolean', defaultValue: true },
    ]
});

指定日期字段格式

使用format属性

{
    name : 'createDate',
    type : 'date',
    format : 'Y-m-d'
}

自定义字段类型(Custom Field Type)

除了使用ExtJS预定义的字段类型,还可以自定义字段类型

可以通过继承Ext.data.field.field类创建自定义字段类型

Ext.define('PandaApp.field.PandaEmail', {
    extend: 'Ext.data.field.Field',
    alias: 'data.field.pandaEmail',

    validators: {
        type: 'format',
        matcher: /^/w+([-+.']/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*$/,
        message: 'Wrong Email Format'
},
getType: function() {
        return 'pandaEmail';
    }
});

扩展ExtJS预定义的字段数据类型

除了创建自定义字段类型,还可以扩展ExtJS预定义的字段数据类型
可以继承的类型包括:

Ext.data.field.Field
Ext.data.field.Boolean
Ext.data.field.Date
Ext.data.field.Integer
Ext.data.field.Number
Ext.data.field.String

语法:

//自定义字段类型
Ext.define('PandaApp.data.field.Gender', {
    extend: 'Ext.data.field.String',
    alias: 'data.field.gender',
    validators: {
        type: 'inclusion',
        list: [ 'female', 'male' ],
        message: '错误,值只可以是female或者male'
},
getType: function() {
        return 'gender';
    }
});

实例

实例:字段定义

Ext.define('Employee', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int', convert: null }, 
        { name: 'firstName', type: 'string' },
        { name: 'lastName', type: 'string' },
        { name: 'fulltime', type: 'boolean', defaultValue: true, convert: null },
        { name: 'gender', type: 'string' },
        { name: 'phoneNumber', type: 'string' }
    ]
});

实例:数据类型自动转换

Ext.define('Employee', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int', convert: null },
        { name: 'firstName', type: 'string' },
        { name: 'lastName', type: 'string' },
        { name: 'fulltime', type: 'boolean', defaultValue: true, convert: null },
        { name: 'gender', type: 'string' },
        { name: 'phoneNumber', type: 'string' }
    ]
});

实例:数据类型自动转换

Ext.define('Employee', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int', convert: null },
        { name: 'firstName', type: 'string' },
        { name: 'lastName', type: 'string' },
        { name: 'fulltime', type: 'boolean', defaultValue: true, convert: null },
        { name: 'gender', type: 'string' },
        { name: 'phoneNumber', type: 'string' }
    ]
});

实例:定义映射

使用mapping配置项即可

实例:自定义字段类型(性别)

//自定义字段类型
Ext.define('PandaApp.data.field.Gender', {
    extend: 'Ext.data.field.String',
    alias: 'data.field.gender',
    validators: {
        type: 'inclusion',
        list: [ '女', '男' ],
        message: '错误,值只可以是female或者male'
},
getType: function() {
        return 'gender';
    }
});

//使用字段类型
Ext.define('Student', {
    extend: 'Ext.data.Model',
    idProperty:'Id',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' },
        { name:'Gender', type: 'gender' } //使用自定义字段类型
    ]
});

实例:自定义字段类型(邮箱)

Ext.define('PandaApp.field.Email', {
    extend: 'Ext.data.field.Field',
    alias: 'data.field.email',
    validators: {
        type: 'format',
        matcher: /^/w+([-+.']/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*$/,
        message: 'Wrong Email Format'
    }
});

原创文章,作者:6024010,如若转载,请注明出处:https://blog.ytso.com/275772.html

(0)
上一篇 2022年7月21日
下一篇 2022年7月21日

相关推荐

发表回复

登录后才能评论