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'
    }
});