ExtJS客户端代理
代理(proxy)分为两大类:客户端代理和服务器端代理。客户端代理主要完成与浏览器本地存取数据相关的工作,服务器端代理则是通过发送请求,从服务器端获取数据。根据各自获取数据的方式,客户端代理和服务器端代理又可以分为一下几种:
客户端代理:
- LocalStorageProxy:将数据存储在localStorage中,此种方式可以持久的将数据存储在客户端。
- SessionStorageProxy:将数据存储在sessionStorage中,此种方式只在当前会话中生效,当关闭浏览器以后,数据也会随之丢失。
- MemoryProxy:将数据存储在内存中,此种方式只在当前页面有效,且如果刷新页面,数据将丢失。
服务器端代理:
- Ajax:在当前域中发送请求
- JsonP:跨域的请求
- Rest:与服务器进行RESTful(GET/PUT/POST/DELETE)交互
- Direct:使用 Ext.direct.Manager 发送请求
SessionStorageProxy 的用法与LocalStorageProxy 的用法基本一致。例如以下代码演示LocalStorageProxy 的用法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | // 首先,我们定义一个简单的Person类 Ext.define( 'Person' , { extend: 'Ext.data.Model' , fields: [ 'name' , 'age' ] }); // 紧接着,我们还需要一个Store。我们可以把 Store 理解为数据仓库,它对应数据库中的表,而Store 包含的 Record 则是数据表中的每一行记录。实际使用中我们更多的对store进行操作。 var personStore = Ext.create( "Ext.data.Store" , { model: 'Person' }); // 接下来就到我们代理出场的时候了。我们需要创建一个LocalStorageProxy: var personProxy = new Ext.data.proxy.LocalStorage({ id: 'Person_LocalStorage' , // 建立关联后,针对model,和不同的proxy区分开 model: 'Person' }); // 建立代理与 Store 的联系 personStore.setProxy(personProxy); // 此时我们可以针对store进行增删改查(CRUD)的操作了 personStore.add({ name: 'www.qeefee.com' , age: 1 }); personStore.add({ name: 'qf' , age: 26 }); personStore.add({ name: 'qifei' , age: 26 }); personStore.sync(); // 保存Search到本地数据库 |
此外,我们也可以在声明数据模型的时候,同时声明代理:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // 定义数据模型,在Model中加入代理配置以后,我们就不需要单独的定义代理对象了,可以直接使用Store来对其进行操作 Ext.define( 'Person' , { extend: 'Ext.data.Model' , fields: [ 'name' , 'age' ], proxy: { type: 'sessionstorage' , id: 'myProxyKey' } }); //定义Store var personStore = Ext.create( "Ext.data.Store" , { model: 'Person' }); //添加数据 personStore.add({ name: 'www.qeefee.com' , age: 1 }); personStore.add({ name: 'qf' , age: 26 }); personStore.add({ name: 'qifei' , age: 26 }); personStore.sync(); |
MemoryProxy与SessionStorageProxy 的用法和LocalStorageProxy 的用法相比略有差异。MemoryProxy 是将数据存储在内存中的,它只在当前页生效,如果关闭或刷新页面,所有数据都将丢失。在使用MemoryProxy 的时候,我们需要为Store指定一个数据集(类似于缓存),store 将通过代理对这个数据集进行操作:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | //定义数据模型 Ext.define( 'Person' , { extend: 'Ext.data.Model' , fields: [ 'name' , 'age' ] }); var data = { Users: [ { name: 'www.qeefee.com' , age: 1 }, { name: 'qeefee' , age: 1 } ] } //定义Store var personStore = Ext.create( "Ext.data.Store" , { model: 'Person' , data: data.Users, proxy: { type: 'memory' } }); |
当personStore 定义的时候,data中预先定义的缓存就会自动的将数据加载到Store中,所以在我们访问数据的时候不需要再调用load方法了:
1 2 3 4 5 6 | //读取数据 var msg = []; personStore.each( function (person) { msg.push(person.get( 'name' ) + ' ' + person.get( 'age' )); }); Ext.MessageBox.alert( '提示' , msg.join( '<br />' )); |
和上两个的操作基本一致,我们可以通过下面的代码添加一行新数据:
1 2 | personStore.add({ name: 'qifei' , age: 26 }); personStore.sync(); |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 本地部署 DeepSeek:小白也能轻松搞定!
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 从 Windows Forms 到微服务的经验教训
· 李飞飞的50美金比肩DeepSeek把CEO忽悠瘸了,倒霉的却是程序员
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee