//json reader 主要用来出来比较复杂的json 数据结构 (function(){ Ext.onReady(function(){ //复杂数据对象 var userData = { //total : 200, count:250, user:[{auditor:'yunfengcheng',info:{ userID:'1', name:'uspcat.com', orders:[ {id:'001',name:'pen'}, {id:'002',name:'book'} ] }}] }; //用户model Ext.regModel("user",{ fields:[ {name:'userID',type:'string'}, {name:'name',type:'string'} ], hasMany: {model: 'order'} //一对多关系 }); //商品model Ext.regModel("order",{ fields:[ {name:'id',type:'string'}, {name:'name',type:'string'} ], belongsTo: {type: 'belongsTo', model: 'user'} //多对一关系 }); //创建代理 var mproxy = Ext.create("Ext.data.proxy.Memory",{ model:'user', data:userData, reader:{ type:'json', root:'user', implicitIncludes:true, //级联关系 设置为true totalProperty:'count', //指定替代 total 字段的字段名 record : 'info'//服务器返回的数据可能很复杂,用record可以筛选出有用的数据信息 } }); //读取数据 mproxy.read(new Ext.data.Operation(),function(result){ var datas = result.resultSet.records; alert(result.resultSet.total); Ext.Array.each(datas,function(model){ alert(model.get('name')); }); //读取出来的数据是一个stroe类型 var user = result.resultSet.records[0]; var orders = user.orders(); orders.each(function(order){ alert(order.get('name')) }); }) }); })();
Reader : 主要用于将proxy数据代理读取的数据按照不同的规则进行解析,讲解析好的数据保存到Modle中
结构图
Ext.data.reader.Reader 读取器的根类
Ext.data.reader.Json JSON格式的读取器
Ext.data.reader.Array 扩展JSON的Array读取器
Ext.data.reader.Xml XML格式的读取器
Writer
结构图
Ext.data.writer.Writer
Ext.data.writer.Json 对象被解释成JSON的形式传到后台
Ext.data.writer.Xml 对象被解释成XML的形式传到后台
//读取数组格式的数据 Ext.onReady(function(){ Ext.regModel("person",{ fields:[ 'name','age' // {name:'name'}, // {name:'age'} ], proxy :{ type:'ajax', url:'person.jsp',// 此处的数据是 [['yunfengcheng',26]] reader:{ type:'array' } } }); var person = Ext.ModelManager.getModel('person'); person.load(1,{ success:function(model){ alert(model.get('name')) } }) });
//读取xml 格式数据 (function(){ Ext.onReady(function(){ Ext.regModel("user",{ fields:[ {name:'name'}, {name:'id'} ], proxy:{ type:'ajax', url:'users.xml', reader:{ type:'xml', record:'user' } } }); var user = Ext.ModelManager.getModel('user'); user.load(1,{ success:function(model){ alert(model) alert(model.get('id')) } }) }); })(); <users> <user> <name>uspcat.com</name> <id>00101</id> </user> </users>
//向服务器端发送xml格式数据 Ext.onReady(function(){ Ext.regModel("person",{ fields:[ 'name','age' ], proxy :{ type:'ajax', url:'person.jsp', writer:{ //type:'json' type:'xml' } } }); Ext.ModelMgr.create({ name:'uspcat.con', age:1 },'person').save(); })
相关推荐
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解)
23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25. extJs 2.0学习笔记(Ext.Element API总结) 69 26. extJs 2.0学习笔记(Element.js篇) 73 27. extJs 2.0学习笔记(DomHelper.js篇) ...
适合ExtJs开发人员extjs技术上手以及深入
ExtJS4学习笔记(四)---Grid的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid) ExtJS4学习笔记(八)---Grid多选/全选 ExtJS4学习笔记(九)...
本篇笔记将深入探讨ExtJS的事件处理,包括事件登记、事件对象、this的作用域以及ExtJS特有的事件管理方式。 1. **事件登记**: - **内联式登记**:在HTML元素中直接定义事件处理函数,如`onClick="popUp()"`。这种...
### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具,它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...
extjs4.0 笔记大全,按照这个笔记来,相信你一定能很快学会的
对于初学者来说,理解并掌握ExtJS 4.1的基础和特性是非常有益的。 标题中的"Extjs4.1 小例子"意味着这个压缩包包含了一些基础的示例代码,旨在帮助初学者快速入门。通过这些小例子,你可以了解如何使用ExtJS 4.1来...
EXTJS in Action 是一本专为学习EXTJS编写的书籍,但这里我们主要关注学习笔记中的关键知识点。 首先,EXTJS的目录结构非常重要,因为它包含了所有必要的资源和源码: 1. `adapter`:这部分包含了适配器,用于将...
ExtJS4学习笔记(十四)--- ComponentQuery ExtJS4学习笔记(四)---Grid的使用 Extjs4开发笔记(三)——菜单的实现 Extjs4开发笔记(二)——框架的搭建 Extjs4开发笔记(五)——动态grid Extjs4开发笔记(四)——实现登录...
ExtJs简明教程+Extjs学习笔记,来源网络,免费奉送,我讨厌需要资源分~
在探讨《ExtJS学习心得笔记》这一主题时,我们不仅会深入理解ExtJS框架的...通过以上学习心得与笔记要点,初学者可以系统地掌握ExtJS框架的核心知识,避免在学习过程中走弯路,从而更快地成长为一名熟练的ExtJS开发者。
extjs初学者学习资料 doc文档版本 非常适合新手学习的资料
ExtJS4.0开发笔记
语言程序设计资料:ExtJs学习笔记-2积分.doc
extjs的学习笔记。包含所有常用对象创建,属性,适合extjs初学者