更新记录
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