模型、数据、验证相关点
1）model 模型
1 /** 2 * 模型类创建方法一 3 */ 4 // 注册一个模型类usersmodel 5 Ext.regModel('UserModel', { 6 fields : [ 7 // 定义模型类的相关字段时要注意添加类型 8 // 常用类型通常是：string，integer，boolean，float 9 { 10 name : 'name', 11 type : 'string' 12 }, { 13 name : 'age', 14 type : 'int' 15 }] 16 }); 17 // 创建一个模型类的实例对象 18 var user = Ext.ModelMgr.create({ 19 name : 'zhangsan', 20 age : '15', 21 }, 'UserModel'); 22 // 获取信息 23 alert(user.get('age')); 24 25 /** 26 * 模型类创建方式二 27 * 注意date和string的转换 28 */ 29 Ext.define('UserModel2', { 30 extend : 'Ext.data.Model', 31 fields : [ 32 { 33 name : 'name', 34 type : 'string' 35 }, { 36 name:'bir', 37 type:'date', 38 //可以定义类型转换器 39 convert : function(value, record) { 40 if (Ext.isDate(value)) 41 return values; 42 else if (Ext.isString(value)) { 43 //先将string转化为标准date，然后判断是否是闰年 44 var ifLeap= Ext.Date.isLeapYear(Ext.Date.parse(value, 'Y-m-d')); 45 return ifLeap; 46 } 47 } 48 }] 49 50 }); 51 var user = Ext.create('UserModel2', { 52 name: 'zhangsan', 53 bir:'1962-1-25' 54 }); 55 alert(user.get('bir'));
2）validations 验证
1 Ext.apply(Ext.data.validations,{ 2 //输出消息直接在定义好的方法名后加Message 3 emailMessage:'邮件格式错误', 4 email : function(config, value) { 5 /** 6 * 基础类型（string/int等）进行比较时，“==””==="有区别，"=="是将不同类型的值转化为同一类型后比较值是否相等 7 * 基础类型和高级类型进行比较时,"=="是将高级类型转化为基础类型后在比较值是否相等 8 * ===则是只要类型不同就返回false 9 * 对于Array,Object等高级类型，==和===是没有区别的,都是进行指针地址比较 10 */ 11 if(value==null||value==undefined) 12 return false; 13 var regix=/^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/; 14 //!! 表示将类型转化为boolean类型，用两个!是因为在讲类型转化为boolean时已经取了一次非，因此要再取非一次将值转化回来 15 return !!regix.test(value); 16 } 17 }); 18 19 Ext.define('UserModelValidation',{ 20 extend:'Ext.data.Model', 21 fields:[ 22 {name:'name',type:'string'}, 23 {name:'gender',type:'string'}, 24 {name:'contacts',type:'string'}, 25 {name:'pwd',type:'string'} 26 ], 27 validations:[ 28 {type:'presence',field:'name'}, 29 {type:'inclusion',field:'gender',list:['男','女']}, 30 {type:'email',field:'contacts'}, 31 {type:'length',field:'pwd',min:6} 32 ] 33 }); 34 var user=Ext.ModelMgr.create({ 35 name:'zhangsan', 36 gender:'male', 37 contacts:'123', 38 pwd:'123' 39 },'UserModelValidation'); 40 /** 41 * 因为没有非表单的错误处理机制，所以出现了Error 42 * Error继承于Ext.util.MixedCollection,因此可以用each方法枚举出所有的错误信息 43 */ 44 var errors = user.validate();//Returns true if there are no errors in the collection 45 //获取验证信息 46 var message = [];//创建一个空对象存放错误信息 47 errors.each(function(v){ 48 //返回false则停止遍历 49 //V:EventObject 50 message.push(v.field+' : '+v.message) 51 }); 52 //输出数据 53 //好像涉及到store？ 54 alert(message.join('\n'));
3）associations 关系
1 /** 2 *数据模型之间的关系 3 *通常分为： 4 *hasMany associations 一对多 5 *belongsTo associations 多对一 6 *以下为官方示例 7 */ 8 Ext.define('User', { 9 extend: 'Ext.data.Model', 10 fields: ['id', 'name', 'email'], 11 12 hasMany: {model: 'Order', name: 'orders'} 13 }); 14 15 Ext.define('Order', { 16 extend: 'Ext.data.Model', 17 fields: ['id', 'user_id', 'status', 'price'], 18 19 belongsTo: 'User' 20 });
4.1）localStorageProxy 代理
1 Ext.define('UserModel',{ 2 extend:'Ext.data.Model', 3 fields:[ 4 {name:'name'}, 5 {name:'age'} 6 ] 7 /** 8 * 可以在定义model时就创建代理 9 * proxy: { 10 * type: 'localstorage', 11 * id : 'UserLocalStorage' 12 * } 13 */ 14 }); 15 //定义一个store 16 var userStore=Ext.create('Ext.data.Store',{ 17 model:'UserModel' 18 }); 19 //创建一个本地代理 20 var localStorageProxy=new Ext.data.LocalStorageProxy({ 21 id:'UserLocalStorage', 22 model:'UserModel' 23 }); 24 //清空localstorage中的所有数据 25 localStorageProxy.clear(); 26 //将proxy与store联系起来 27 userStore.setProxy(localStorageProxy); 28 //添加数据到localStorage中 29 userStore.add({name:'zhangsan'},{age:14}); 30 userStore.add({name:'lisi'},{age:14}); 31 userStore.add({name:'qianliu'},{age:32}); 32 //finally, save our Search data to localStorage 33 userStore.sync(); 34 //从localStorage中加载数据到store 35 userStore.load(); 36 37 38 //创建一个空对象来存放数据 39 var msg=[]; 40 // 这个过滤有问题 一旦联合查询就不显示了 41 42 // userStore.filter(function(item) { 43 // return item.get('name').length > 5 44 // &&item.get("age") > 15; 45 // }); 46 // 遍历store 将数据存放到msg中 47 userStore.each(function(UserModel) { 48 msg.push(UserModel.get('name') + ' ' + UserModel.get('age')); 49 }); 50 alert(msg.join('\n'));
4.2）memoryProxy 代理
1 /** 2 * memoryProxy 3 * 数据存在内存当中，只对当前页面有效，一旦刷新数据就会消失 4 * This proxy simply uses a local variable for data storage/retrieval 5 * 数据采用局部变量保存 6 */ 7 Ext.define('UserModel',{ 8 extend:'Ext.data.Model', 9 fields:[ 10 {name:'name',type:'string'}, 11 {name:'nid',type:'int',mapping:'id'} 12 ] 13 }); 14 var mdata={ 15 users:[ 16 {name:'zhangsan',id:'1'}, 17 {name:'lisi',id:'2'} 18 ] 19 } 20 var userStore=Ext.create('Ext.data.Store',{ 21 model:'UserModel', 22 autoload:true, 23 data:mdata, 24 proxy:{ 25 type:'memory', 26 reader:{ 27 type:'json',//通过json的方式读取？ 28 root:'users' 29 } 30 } 31 });
Proxy which uses HTML5 session storage as its data storage/retrieval mechanism. If this proxy is used in a browser where session storage is not supported, the constructor will throw an error. A session storage proxy requires a unique ID which is used as a key in which all record data are stored in the session storage object.
It's important to supply this unique ID as it cannot be reliably determined otherwise. If no id is provided but the attached store has a storeId, the storeId will be used. If neither option is presented the proxy will throw an error.
Proxies are almost always used with a store:
new Ext.data.Store({
proxy: {
type: 'sessionstorage',
id : 'myProxyKey'
}
});
Alternatively you can instantiate the Proxy directly:
new Ext.data.proxy.SessionStorage({
id : 'myOtherProxyKey'
});
Note that session storage is different to local storage (see Ext.data.proxy.LocalStorage) - if a browser session is ended (e.g. by closing the browser) then all data in a SessionStorageProxy are lost. Browser restarts don't affect the Ext.data.proxy.LocalStorage - the data are preserved.
浙公网安备 33010602011771号