EXTJS4自学手册——EXT数据结构组件（Model数据验证，数据交互）
一、通过在Model的fields属性后面声明validtion属性，实现数据验证
例子：
<script type="text/javascript">
Ext.onReady(function () {
//定义一个类MyInformation,继承自Ext.data.Model
Ext.define('MyInformation', {
extend: 'Ext.data.Model',
//定义类拥有的字段
fields: [
//字段名：name,类型：auto（默认）
{name: 'name' },
//字段名：age，类型：int
{name: 'age', type: 'int' },
//字段名：birthday，类型：date，指定日期格式为：'日/月/年'
{name: 'birthday', type: 'date' },
//字段名：isStudent，类型：boolean，指定字段默认值为false
{name: 'isStudent', type: 'boolean', defaultValue: false },
//字段名：weight，类型：float
{name: 'weight', type: 'float' },
//字段名：weightKG，类型：float，在在获取到数据的时候，会对数据进行转换，将weight字段的值除以2，赋值给当前字段
{name: 'weightKG', type: 'float', convert: function (value, record) {
return record.get('weight') * 0.5
}
}
],
//数据验证
validations: [
//name字段必须赋值
{type: 'presence', field: 'name' },
//name字段的长度为2-5之间
{type: 'length', field: 'name', min: 2, max: 5 },
//name字段的值只包含字母
{type: 'format', field: 'name', matcher: /^([a-z]+)$/ },
//name字段的值必须包含大写的X和大写的Y
{type: 'inclusion', field: 'name', list: ['X', 'Y'] },
//weight字段的值不能为0
{type: 'exclusion', field: 'weight', list: [0] }
]
});
//创建一条数据，数据结构为MyInformation
var me = Ext.ModelMgr.create({
name: 'animal8', //名称
age: null, //年龄
birthday: '2012/4/4', //出生日期
weight: 0//体重
}, 'MyInformation'); //数据结构
//效验数据
var error = me.validate();
//显示数据是否符合规范
console.log(error.isValid());
//如果不符合规范，显示提示信息
console.log(error.items);
//显示weight字段的提示信息
console.log(error.getByField('weight'));
});
</script>
执行结果：
说明：
数据验证有以下几种：
presence：必须赋值
length：字段长度
format：字段格式，通过matcher属性配置正则表达式
inclusion：字段值只能是此属性提供的某一个值
exclusion：字段值不能是此属性提供的任意一个值
二、Model数据交互
1.加载数据（load方法）：
例子：
<script type="text/javascript">
Ext.onReady(function () {
Ext.define('MyInformation', {
extend: 'Ext.data.Model',
//包含3个字段
fields: ['id', 'name', 'age', 'address'],
//定义代理类
proxy: {
//从"http://www.cnblogs.com/Scripts/myInformation.js"交互数据
url: "http://www.cnblogs.com/Scripts/myInformation.js",
type: 'rest',
reader: {
type:'json',
root: 'informations'
}
}
});
MyInformation.load(1, {
success: function (info) {
Ext.Msg.alert("信息","我的姓名是："+info.get('name'))
}
});
});
</script>
数据：
{ informations: [{ id:'1', name: 'animal', age: '11', address: '重庆江津'}] }
执行结果：
说明：
定义一个MyInformation类，继承自Ext.data.Model，具有4个字段：“id”，“name”，“age”，“address”
通过代理类，从"http://www.cnblogs.com/Scripts/myInformation.js"交互数据，type：‘rest’声明MyInformation类的增、删、改方法都通过统一路径，reader声明读的是一个json数据
通过MyInformation类的load方法加载数据
2.更改数据（save方法）：
例子：
<script type="text/javascript">
Ext.onReady(function () {
Ext.define('MyInformation', {
extend: 'Ext.data.Model',
//包含3个字段
fields: ['id', 'name', 'age', 'address'],
//定义代理类
proxy: {
//从"http://www.cnblogs.com/Scripts/myInformation.js"交互数据
url: "http://www.cnblogs.com/Scripts/myInformation.js",
type: 'rest',
reader: {
type: 'json',
root: 'informations'
}
}
});
//加载数据
MyInformation.load(1, {
success: function (info) {
//更改name字段的值
info.set("name", "XXX");
//提交更改
info.save({
success: function () {
console.log('Data is update')
}
})
}
});
});
</script>
执行结果：
说明：通过执行save方法提交更改，EXT会创建一个put请求，将更改后的json数据发送到服务器端
3.删除数据（destroy方法）：
例子：
<script type="text/javascript">
Ext.onReady(function () {
Ext.define('MyInformation', {
extend: 'Ext.data.Model',
//包含3个字段
fields: ['id', 'name', 'age', 'address'],
//定义代理类
proxy: {
//从"http://www.cnblogs.com/Scripts/myInformation.js"交互数据
url: "http://www.cnblogs.com/Scripts/myInformation.js",
type: 'rest',
reader: {
type: 'json',
root: 'informations'
}
}
});
//加载数据
MyInformation.load(1, {
success: function (info) {
//删除数据
info.destroy({
success: function () {
console.log('Data is distory')
}
})
}
});
});
</script>
执行结果：
说明：通过执行destroy方法删除数据，EXT会创建一个delete请求，将数据以json格式发送到服务器端
4.创建数据
例子：
<script type="text/javascript">
Ext.onReady(function () {
Ext.define('MyInformation', {
extend: 'Ext.data.Model',
//包含3个字段
fields: ['id', 'name', 'age', 'address'],
//定义代理类
proxy: {
//从"http://www.cnblogs.com/Scripts/myInformation.js"交互数据
url: "http://www.cnblogs.com/Scripts/myInformation.js",
type: 'rest',
reader: {
type: 'json',
root: 'informations'
}
}
});
//创建数据
var myInfo = Ext.ModelMgr.create({
name: 'AAAA',
age: '88',
address: 'BBBBBB'
}, 'MyInformation');
myInfo.save();
});
</script>
执行结果：
说明：通过Ext.ModelMgr.create创建一条数据，然后通过save方法创建一个post请求，将创建的数据发送到服务器端