今天继续学习extjs4,今天主要学习extjs的数据模型结构主要包括model、proxy和store,分别代表模型、代理、数据集
1、 创建model
model的创建过程就相当于数据库中的设计table的过程和C#中的class的定义过程
两种方法:
a) Ext.define():自定义一个类并继承自Ext.data.Model类
1 //方法1:使用Ext.define创建model类 2 Ext.define('person', { 3 extend: 'Ext.data.Model', //继承自model类 4 fields: [ //相当于table中的字段,class中的属性 5 { name: 'name', type: 'auto' }, 6 { name: 'age', type: 'int' }, 7 { name: 'email', type: 'auto' } 8 ] 9 });
b) Ext.regModel():直接定义一个类,返回的就是model类
1 //方法2:使用Ext.regModel来创建model类,可以不写继承自model类,本身就返回一个model 2 Ext.regModel('user', { 3 fields: [ 4 { name: 'name', type: 'auto' }, 5 { name: 'age', type: 'int' }, 6 { name: 'email', type: 'auto' } 7 ] 8 });
2、 实例化model类
a) new关键字
1 //方法1:new关键字 2 var p = new person({ 3 name: '张三', 4 age: 26, 5 email: 'zs@163.com' 6 }); 7 8 Ext.Msg.alert('提示', '姓名:' + p.get('name') + ' 年龄:' + p.get('age') + ' 邮箱:' + p.get('email'));
获取model中的字段可以用对象.get(字段名)来获得。
b) Ext.create()
1 //方法2:Ext.create()(推荐) 2 var p1= Ext.create('person', { 3 name: '李四', 4 age: 30, 5 email: 'ls@163.com' 6 }); 7 8 alert('姓名:' + p1.get('name') + ' 年龄:' + p1.get('age') + ' 邮箱:' + p1.get('email'));
c) Ext.ModelManager.create()
1 //方法3:Ext.ModelManager.create()可以简写成Ext.Mgr.create() 2 var p2 = Ext.ModelMgr.create({ 3 name: '王五', 4 age: 35, 5 email: 'ww@163.com' 6 }, 'person'); 7 8 alert('姓名:' + p2.get('name') + ' 年龄:' + p2.get('age') + ' 邮箱:' + p2.get('email'));
4、 验证器validations
就是对model的对象的各个字段(属性)进行验证的机制
1 //扩展验证机制 2 Ext.apply(Ext.data.validations, { 3 age: function (config, value) { 4 var min = config.min; 5 var max = config.max; 6 if (value >= min && value <= max) { 7 return true; 8 } 9 else { 10 return false; 11 } 12 }, 13 ageMessage: '年龄数据出现错误!' 14 }); 15 16 //定义名为person的model 17 Ext.regModel('person', { 18 fields: [ 19 { name: 'name', type: 'auto' }, 20 { name: 'age', type: 'int' }, 21 { name: 'email', type: 'auto' } 22 ], 23 //验证器 24 validations: [ 25 //验证类型:长度验证 验证字段:name 长度大于等于2小于等于6 26 {type: 'length', field: 'name', min: 2, max: 6 }, 27 //验证年龄必须在0到100之间 28 { type: 'age', field: 'age', min: 0, max: 100 } 29 ] 30 }); 31 32 var p = Ext.create('person', { 33 name: '王', 34 age: -9, 35 email: 'ls@163.com' 36 }); 37 38 var errors = p.validate(); 39 40 errors.each(function (msg) { 41 alert('字段:' + msg.field + '\n发生错误:' + msg.message); 42 })
运行结果将会输入错误信息。