extjs4 各种proxy reader详细使用
来源:互联网 发布:什么是淘宝实体店 编辑:程序博客网 时间:2024/06/05 06:29
ExtJS提供的数据代理主要分为两大类:
1.客户端代理 (Ext.data.proxy.Client)
2.服务器代理(Ext.data.proxy.Server)
这两个类 都继承自 Ext.data.proxy.Proxy ,
客户端代理主要包括:Memory WebStorage SessionStorage LocalStorage
服务器端代理包括: Ajax Rest JsonP
Ext.data.proxy.Memory //this is the model we will be using in the store Ext.define('User', { extend: 'Ext.data.Model', fields: [ { name: 'id', type: 'int' }, { name: 'name', type: 'string' }, { name: 'phone', type: 'string', mapping: 'phoneNumber' } ] }); //this data does not line up to our model fields - the phone field is called phoneNumber var datas = { users: [ { id: 1, name: 'Ed Spencer', phoneNumber: '555 1234' }, { id: 2, name: 'Abe Elias', phoneNumber: '666 1234' } ] }; //创建memory代理 var memProxy = new Ext.data.proxy.Memory({ model: 'User', reader: { root: 'users' }, data: datas }); //读取数据 memProxy.read(new Ext.data.Operation(), function (result) { var total = result.resultSet.total; alert("数据总条数为:" + total); })
DOM Storage 分为两类, sessionStorage 和 localStorage
sessionStorage: 用于存储与 当前浏览器窗口关联的数据.窗口关闭后,sessionStorage中数据将无法使用
localStorage: 用于长期存储数据.窗口关闭,数据仍然可以访问, 所有浏览器窗口可以共享 数据.
下面看看一个 localStorage的例子
Ext.define('Search', { fields: ['id', 'query'], extend: 'Ext.data.Model', proxy: { type: 'localstorage', id: 'twitter-Searches' } }); var store = new Ext.data.Store({ model: "Search" }); //添加数据 store.add({ query: 'Sencha Touch' }); store.add({ query: 'Ext JS' }); //保存数据 store.sync(); //读取数据 store.load(); var msg = []; store.each(function (data) { msg.push(data.get('id') + '-' + data.get('query')); }) alert(msg.join('\n'));
当 关闭浏览器,从今浏览此页面后,效果图:
说明,localstorage 是长期存储数据的,即使关闭浏览器,数据仍然存在.
下面还要说明一点:LocalStorage代理如果没有指定id,则会使用 store的id,如果两个都没指点,那么就会抛出异常
Ext.data.proxy.SessionStorage
效果:
Ext.define('Search', { fields: ['id', 'query'], extend: 'Ext.data.Model', proxy: { type: 'sessionstorage', id: 'twitter-Searches' } }); var store = new Ext.data.Store({ model: "Search" }); //添加数据 store.add({ query: 'Sencha Touch' }); store.add({ query: 'Ext JS' }); //保存数据 store.sync(); //读取数据 store.load(); var msg = []; store.each(function (data) { msg.push(data.get('id') + '-' + data.get('query')); }) alert(msg.join('\n'));
当关闭浏览器,从新浏览此页面时: .
里面的数据没有增加,验证了刚才的说法.
服务器端代理
服务器端代理会访问远程服务器资源,适合于长期保存重要的数据资料.
下面是 分页参数
//定义User模型
Ext.define('User', { extend: 'Ext.data.Model', fields: ['id', 'name', 'email'] }); //定义数据代理 var proxy = new Ext.data.proxy.Ajax({ model: 'User', url: 'Handler.ashx', reader: { type: 'json', //jsonReader root: 'users' } }); //创建请求参数对象 var operation = new Ext.data.Operation({ page: 2, start: 10, limit: 20, action: 'read' //请求动作 }); proxy.doRequest(operation, callback); //发起请求 function callback(operation) { //请求的回调函数 //获取服务器返回的原始数据 var reText = operation.response.responseText; //获取记录总数 var totalRecords = operation.resultSet.totalRecords; //获取记录数组 var records = operation.resultSet.records; alert(totalRecords); }
服务器返回的数据: {users:[{id:'" + id + "',name:'gao'}]}
排序参数
参数信息:
只需更改 上面程序的 operation配置即可
var operation = new Ext.data.Operation({ sorters: [ new Ext.util.Sorter({ property: 'id', direction: 'ASC' //DESC }) ], action: 'read' });
自定义排序参数:
Ext.define('User', { extend: 'Ext.data.Model', fields: ['id', 'name', 'email'] }); var proxy = new Ext.data.proxy.Ajax({ model: 'User', url: 'Handler.ashx', reader: { type: 'json', root: 'users' }, sortParam: 'sortParam', //自定义排序参数名称 encodeSorters: function (sorters) {//排序参数的数组,返回一个JSON-encodes的字符串 var length = sorters.length, sortArray = [], //定义参数数组 sorter, i; for (var i = 0; i < length; i++) { sorter = sorters[i]; sortArray[i] = sorter.property + '#' + sorter.direction; } return sortArray.join(","); } }); var operation = new Ext.data.Operation({ sorters: [ new Ext.util.Sorter({ property: 'id', direction: 'ASC' //DESC }), new Ext.util.Sorter({ property: 'age', direction: 'DESC' }) ], action: 'read' }); proxy.doRequest(operation, callback); function callback(operation) { //获取服务器返回的原始数据 var reText = operation.response.responseText; //获取记录总数 var totalRecords = operation.resultSet.totalRecords; //获取记录数组 var records = operation.resultSet.records; alert(totalRecords); }
过滤器参数
var operation = new Ext.data.Operation({ filters: [ new Ext.util.Filter({ property: 'id', value: '2' }) ] , action: 'read' });
自定义过滤器参数 :
暂留
分组参数
var operation = new Ext.data.Operation({ groupers: [ new Ext.util.Grouper({ property:'age', direction:'ASC' }) ] , action: 'read' });
Ext.data.proxy.Rest实例
Ext.regModel('User', { fields: ['id', 'name', 'age'], proxy: { type: 'rest', //使用Ext.data.proxy.Rest代理 url: 'Handler.ashx' } }); var u1 = Ext.ModelManager.create({ name: 'gao', age: 12 }, 'User'); u1.save(); //因为没有id所以调用 create方法 var u2 = Ext.ModelManager.create({ id: 10, name: 'gao2', age: 12 }, 'User'); u2.save(); //因为有id,所以 执行update var u3 = Ext.ModelManager.getModel('User'); u3.load(100); //调用read方法 ,读取id等于300的数据 var u4 = Ext.ModelManager.create({ id: 300, name: 'gao4', age: 11 }, 'User'); u4.destroy(); //Ext.data.proxy.JsonP
Reader数据读取器
数据读取器的作用就是 将 数据代理 读取到的 原始数据 按照不同的规则进行解析,将解析后的数据
保存到Model模型对象 中,.
extJS主要数据解析器为:
1.Json数据读取器
2.XML数据读取器
3.数组数据读取器
Json读取器:
var userdata = { "total": 2000, "users": [ { "id": 22, "name": "gao", "orders": [ { "id": 30, "total": 100 }, { "id": 320, "total": 1002 } ] } ] } //定义用户模型 Ext.regModel('User', { fields: ['id', 'name'], hasMany: 'Order' }); //定义订单模型 Ext.regModel("Order", { fields: ["id", "total"], belongTo: 'User' //定义 order和user之间的多对一关系 }) //创建 memory代理 var meoProxy = new Ext.data.proxy.Memory({ model: 'User', reader: { type: 'json', root: 'users' }, data: userdata }) //读取数据 meoProxy.read(new Ext.data.Operation(), callBack); function callBack(res) { //获取总数据数 var count = res.resultSet.total; //获取第一个用户信息 var user = res.resultSet.records[0]; //获取该用户的第一个账单信息 var order = user.orders().getAt(1); alert("总数据数:" + count + '\n姓名:' + user.get('name') + '\n账单金额:' + order.get('total')); }读取复杂的json数据:
读取复杂的json数据:
代码:var userdata = { "users": [ { "id": 22, "name": "gao", "info": { "id": 22, "name": "gaoyu" } } ] } //定义用户模型 Ext.regModel('User', { fields: ['id', 'name'] }); //创建 memory代理 var meoProxy = new Ext.data.proxy.Memory({ model: 'User', reader: { type: 'json', root: 'users', record: 'info' //定位有效数据的位置 }, data: userdata }) //读取数据 meoProxy.read(new Ext.data.Operation(), callBack); function callBack(res) { //获取第一个用户信息 var dd = res.resultSet.records[0]; alert('姓名:' + dd.get('name')); }
数组读取器
//定义用户模型Ext.regModel('User', { fields: ['id', 'name'], proxy: //定义代理 { type: 'ajax', url: 'Handler.ashx', reader: { type: 'array' //读取器类型为 数组 } }});var user = Ext.ModelManager.getModel('User');//通过代理读取数据user.load(1, { success: function (res) { alert(res.get('id')); }}) 服务器返回数据: [[1,\'nill\']]
Writer数据写入器
主要用于将 数据代理 提交到服务端 的数据进行编码,.
主要写入器,有 JSON写入器和XML写入器
Json写入器使用:
//定义用户模型 Ext.regModel('User', { fields: ['id', 'name'], proxy: //定义代理 { type: 'ajax', url: 'Handler.ashx', writer: { type: 'json' //写入为json格式 } } }); var user = Ext.ModelMgr.create({ id: 12, name: 'gao' }, 'User'); user.save({ success: function () { alert('save succeed!') }, failure: function () { alert('save failed!') } })
XML写入器
//定义用户模型 Ext.regModel('User', { fields: ['id', 'name'], proxy: //定义代理 { type: 'ajax', url: 'Handler.ashx', writer: { type: 'xml' //写入为json格式 } } }); var user = Ext.ModelMgr.create({ id: 12, name: 'gao' }, 'User'); user.save({ success: function () { alert('save succeed!') }, failure: function () { alert('save failed!') } })
遍历store
//定义用户模型 Ext.regModel('User', { fields: ['id', 'name'], proxy: //定义代理 { type: 'memory' } }) var store = new Ext.data.Store({ autoLoad: true, data: [{ id: 12, name: 'ss' }, { id: 11, name: 'zz'}], model: 'User' }) //遍历store中元素 var msg = ['遍历:']; store.each(function (res) { msg.push('id=' + res.get('id') + 'name=' + res.get('name')); }) alert(msg.join('\n'));
- 大小: 6.9 KB
转载地址:http://zha-zi.iteye.com/blog/1536427
- extjs4 各种proxy reader详细使用
- extjs4 各种proxy reader详细使用
- extjs4.0模型 model store proxy使用详解
- extjs4.0模型 model store proxy使用详解
- Extjs4之proxy
- ext中的reader何proxy
- Extjs4 Proxy解读之三
- ExtJS4.x数据模型之Proxy
- Extjs4之Proxy数据代理
- ExtJS4 reader.read is not a function
- ExtJs4之Reader、Wtiter和Store
- extjs的Ext.data.proxy.Proxy的Reader(Ext.data.reader.Reader)浅析
- extjs4 各种怪异问题
- 使用Flash(Flax)post方式跨越请求的Extjs4代理(Proxy)的实现类
- extjs之model,store,reader, proxy
- Extjs学习 数据处理Proxy 、Reader 、Store
- ExtJs4之Grid详细
- extjs4.0的数据代理proxy
- 一个成功的Git分支模型
- 图像处理的前景
- 适应iPhone5的尺寸
- 未能解析程序集“System.Web.Services, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a”
- Git和Github初次使用
- extjs4 各种proxy reader详细使用
- zend framework连接mysql
- Xilinx ISE 14.2&14.4 Compiler比较
- XCode 下的 iOS 单元测试
- 算法整理
- git/github 使用
- UIView 中的控件事件穿透 Passthrough 的实现
- Git与Github的使用(ubuntu)
- Linux下Ecilpse的搭建