ExtJS:数据模型
自定义数据模型
在上一节中,我们使用Ext.define 来自定义类,通过Ext.define 定义的类都默认继承自Ext.base 类。如果我们将extend 设置为Ext.data.Model,那么定义的类就是一个数据模型类了。先定义一个简单的数据模型类 User类,代码如下:
Ext.define("MyApp.User", {
extend : 'Ext.data.Model',
fields : [
{name : 'name', type : 'string'},
{name : 'age', type : 'int'},
{name : 'phone',type : 'string'}
]
});
在代码中可以看出,数据模型类其实就是一个继承自Ext.data.Model 的类。
fields 属性中定义了该模型的字段,它可以是对应到数据库中的字段。在使用的时候,数据模型包含的字段和类的属性使用方式不太相同。要访问字段的值,需要视同get 和 set 方法,例如:
var Tom = Ext.create("MyApp.User",{
name : 'Tom',
age : 26,
phone : '123456789'
});
Tom.set('age',20);
Ext.MessageBox.alert('提示',Tom.get('age'));
我们实例化User类,初始化的时候,age的值为26,然后通过set 方法设置为 20,再通过get 方法得到 age 字段的值,运行截图如下:
字段类型和转换器
在定义数据模型的时候,我们可以定义字段的类型和该类型的转换器。例如,我们将为User类添加birthday字段,在初始化的时候,我们可能会传入一个字符串类型的日期格式,这个时侯就需要我们来定义一个类型转换器,将字符串格式的日期转换为Date类型。代码如下:
Ext.define("MyApp.user",{
extend : 'Ext.data.Model',
fields[
{name : 'name', type : 'string'},
{name : 'age', type : 'int'},
{name : 'phone', type : 'string'},
{
name : 'birthday',
type : 'date',
convert : function(value, record){
if(Ext.isDate(value)){
return value;
}else if(Ext.isString(value)){
return Ext.Date.parse(value,'Y-m-d');
}
}
}
]
});
在代码中添加了birthday字段,并为该字段设置了转换器,当传入的类型为string时,将会被转换为标准的时间类型。用法如下:
var Tom = Ext.create("MyApp.User",{
name :'Tom',
age : 26,
phone : 123456,
birthday : '2000-01-15'
});
alert(Tom.get('birthday'));
在使用的时候,传入的是一个字符串类型的时间,当我们实例化以后,字符串日期被转换为标准的时间类型:
数据验证
我们可以使用数据模型来验证数据是否正确。在上面的例子中,我们希望phone 字段的长度在8和15之间,那么,我们需要这样修改代码:
Ext.define("MyApp.User",{
extend : 'Ext.date.Model',
fields :[
{name : 'name', type : 'string'},
{name : 'age', type : 'int'},
{name : 'phone', type : 'string'},
{
name : 'birthday',
type : 'date',
convert : function(value,record){
if(Ext.isDate(value)){
return value;
}else if(Ext.isString(value)){
return Ext.Date.parse(value,'Y-m-d');
}
}
}
],
validations : [
{field : 'phone', type : 'length', min : 8, max : 15 }
]
});
为phone 字段添加验证,验证类型为length,最小为8,最大为15,验证的代码如下:
var Tom = Ext.create("MyApp.User",{
name :'Tom',
age : 26,
phone : 123456,
birthday : '2000-01-15'
});
var errors = Tom.validate();
var errorMsg = [];
if(!errors.isValid()){
errors.each(function(error){
errorMsg.push(error.field + " " + error.message);
});
Ext.Msg.alert("错误",errorMsg.join('<br/>'));
}
我们将phone的长度设置为6位,很明显是不能通过验证的。程序运行起来以后,我们会得到下面的错误:
尽管我们已经引入了汉化包,但这里的提示还是英文的,为了能让他显示为中文,我们需要手动的来将其汉化,在程序开始的时候加入代码:
Ext.date.validations.lengthMessage = "长度错误";
刷新页面,错误提示已经变成中文了:
自定义验证规则
ExtJS虽然内置了一些验证规则,但这些规则面对庞大的业务需求是远远不够的,所以EXTJS允许我们自定义一些验证规则。
在User类中,我们希望age字段的值在0到150之间,我们来自定义一个验证规则:
Ext.apply(Ext.data.validations,{
ageMessage : '必须在0到150之间',
age : function(config,value){
if(value == undefined || value == null){
return false;
}
if(value < 0 || value > 150){
return false;
}
return true;
}
});
Ext.apply 方法用来将第二个参数中的属性和方法复制到第一个参数中,在这里的作用是将我们定义的age规则添加到Ext 的验证规则中。
接下来我们修改验证部分的代码,添加age验证:
validations : [
{field : 'phone', type : 'length', min : 8, max : 15},
{field : 'age', type : 'age', min : 8, max : 15}
]
在初始化的时候,我们将age的值设置为-26,运行程序,截图如下:
数据模型之间的关系
模型之间可以通过Ext.data.association.HasOne,belongsTo,hasMany设置彼此的关系。例如在博客管理程序中,我们需要处理用户(User),文章(Posts),评论(Comments)之间的关系:
Ext.define('Post',{
extend : 'Ext.data.Model',
fileds : ['id', 'user_id'],
belongsTo : 'User',
hasMany : {model : 'Comment', name : 'Comments'}
});
Ext.define('Comment',{
extend : 'Ext.data.Model',
fields : ['id', 'user_id', 'post_id'],
belongsTo : 'Post'
});
Ext.define('User',{
extend : 'Ext.data.Model',
fields : ['id'],
hasMany : ['Post',{model : 'Comment', name : 'Comments'}]
});
你可以通过查看API来了解更多的用法,另外,他们之间的关系还可以这样定义:
Ext.define('User',{
extend : 'Ext.data.Model',
fields : ['id'],
associations : [
{type : 'hasMany', model : 'Post', name : 'Posts'},
{type : 'hasMany', model : 'Comment', name : 'Comments'}
]
});