extjs-model数据加载
2016-01-06 17:49
671 查看
1、Model代表应用程序管理的一些对象。例如,我们可能会为 我们想在系统中建模的现实世界中的一些物体像使用者、产品和汽车等定义一个Model。这些Model在 模型管理器中注册,被仓库使用, 而这些仓库又被许多 Ext中许多与数据绑定的组件使用。
2、总之这个会很常用。
3、model和数组、对象都有着关联,所以我写了两个方法。仅供参考,还有model的load方法,跨域加载事例。
users.json:
2、总之这个会很常用。
3、model和数组、对象都有着关联,所以我写了两个方法。仅供参考,还有model的load方法,跨域加载事例。
Ext.onReady(function(){ Ext.define('User', { extend: 'Ext.data.Model', fields: [ {name: 'name', type: 'string'}, {name: 'age', type: 'int'}, {name: 'phone', type: 'string',convert:function(value){ if(Ext.isString(value) && !Ext.String.startsWith(value,'+86')){ return '+86'+value; } }}, {name: 'gender', type: 'string'}, {name: 'username', type: 'string'}, {name: 'alive', type: 'boolean', defaultValue: true} ], flag: true, validations: [ {type: 'presence', field: 'age'}, {type: 'length', field: 'name', min: 2}, {type: 'inclusion', field: 'gender', list: ['Male', 'Female']}, {type: 'exclusion', field: 'username', list: ['Admin', 'Operator']}, {type: 'format', field: 'username', matcher: /([a-z]+)[0-9]{2,3}/} ] }); var instance = Ext.create('User', { name: 'tom', gender: 'Male', phone : '15150003674', username: 'edspencer' }); Logger.printf(instance.flag); //User属性的修改prototype User.prototype.flag = false Logger.printf(instance.flag); //isValid( ) : Boolean //检查模型是否有效。见validate. Logger.printf(instance.isValid()); //getData( Boolean includeAssociated ) : Object //获取每个字段的所有值,并将它们作为 一个对象返回。 Logger.printfobj(instance.getData()); //raw : Object //创建本模型的原始数据,如果本模型是通过reader创建的 Logger.printfobj(instance.raw); //Ext.data.Errors var errors = instance.validate(); Logger.printf(errors.isValid()); //obj--->model var jerry = { name: 'jerry', gender: 'Male', phone : '15150003674', username: 'edspencer', salary :'9000' } instance = obj2model(jerry,instance) Logger.printfobj(instance.getData()); //arr(obj)--->modelarr var tom = { name: 'tom', gender: 'Male', phone : '15150003674', username: 'edspencer', salary :'9000' }; var arr = []; arr.push(tom); arr.push(jerry); instance = arr2modelarr(arr,instance); //------------------model_jsonp------------------ Ext.define('UserModel', { extend: 'Ext.data.Model', //没有对应到data中 fields: [ {name: 'id', type: 'int'}, {name: 'name', type: 'string'}, {name: 'age', type: 'int'}, {name : 'email', type :'string'} ], proxy: { type: 'jsonp', url : 'users.json', reader: { type: 'json', root: 'users' } } }); //异步加载模型 UserModel.load(1,{ scope: this, failure: function(record, operation,s,s) { //do something if the load failed record }, success: function(record, operation) { //do something if the load succeeded var arr = operation.response.users; Logger.printfarr(arr) var usermodel = Ext.create('UserModel'); var instanceModel = arr2modelarr(arr,usermodel); arr = modelarr2arr(instanceModel) Logger.printfarr(arr) }, callback: function(record, operation,s ,s ) { //do something whether the load succeeded or failed record } }); }) //obj--->model:model function obj2model(obj,model){ if(!model.isModel||Ext.isEmpty(obj)||!Ext.isObject(obj))return null; var keyarr = Ext.Object.getKeys(model.getData()) Ext.Object.each(obj, function(key, value, myself) { if(Ext.Array.contains(keyarr,key)){ if(Ext.isObject(value)){ console.error('Objects can not contain objects'); return null; } model.set(key,value||'') } }); return model; } //arr--->model[]:model[] function arr2modelarr(arr,model){ if(!model.isModel||Ext.isEmpty(arr)||!Ext.isArray(arr))return null; var modelarr = [] Ext.each(arr,function(item){ modelarr.push(obj2model(item,model)); }) return modelarr; } //model[]--->arr:arr function modelarr2arr(modelarr){ if(Ext.isEmpty(modelarr)||!Ext.isArray(modelarr))return null; var arr = []; Ext.each(modelarr,function(item){ if(item.isModel){ arr.push(item.getData()||'') } }) return arr; } //记录器 Ext.define('Logger', { singleton: true, log: function(msg) { console.log(msg); }, error : function(msg){ console.error(msg) }, printferror : function(msg){ this.error(Ext.id('','num:')+' '+msg); }, printf : function(msg){ this.log(Ext.id('','num:')+' '+msg); }, printf2 : function(val,msg){ this.printf(val+'--'+msg); }, printfobj : function(obj){ var s = ''; if(Ext.isObject(obj)){ Ext.Object.each(obj, function(key, value, myself) { s+=key + ":" + (Ext.isObject(value)?'object':value)+" "; }) } if(s)this.printf(s); }, printfarr : function(arr){ var s = ''; Ext.each(arr,function(item){ if(Ext.isObject(item)){ Ext.Object.each(item, function(key, value, myself) { s+=key + ":" + (Ext.isObject(value)?'object':value)+" "; }) } }); this.printf(s?s:arr) } });
users.json:
Ext.data.JsonP.callback1( { users : [{ id : 1, name : "Ed Spencer", age : 22, email : "ed@sencha.com" }, { id : 2, name : "tom", age : 22, email : "tom@sencha.com" } ], success : true });
相关文章推荐
- js中用$(“#ID”)来作为选择器的问题(id重复的时候)
- js 操作文档
- [JS插件] Swiper:强大的触摸滑动&整屏滚动插件
- js中yyyy-mm-dd hh:mm 比较时间大小
- 发送json数据给服务器以及多值参数
- js正则验证手机号码有效性
- Backbone TodoMVC 源码分析
- 直接拿来用的页面跳转进度条JS实现
- eval解析JSON中的注意点
- JavaScript JavaScript对checkbox的校验
- JavaScript中有三个可以对字符串编码的函数
- 比JSON更快、更小--MessagePack
- JSTL 计算时间差
- javascript类型系统之基本数据类型与包装类型
- velocity.js学习(一)
- javascript严格模式
- JavaScript JavaScript中null和undefined区别分析
- JavaScript中DOM的层次节点(一)
- com.alibaba.fastjson.JSONException: not close json text, token : error
- SeaJS学习(一)