Extjs 数据代理

Ext.data.proxy.Proxy 代理类的根类

客户端代理:

1.LocalStorageProxy:将数据存储在localStorage中,此种方式可以持久的将数据存储在客户端

要使用代理,我们首先要有一个数据模型类,我们定义一个简单的Person类:

Ext.define('Person', {extend: 'Ext.data.Model',     fields: ['name', 'age']});

有了Model,我们还需要一个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: 'Person'});

将代理和Store 联系在一起

personStore.setProxy(personProxy);

   际应用中,可以在Model 或 Store 中直接使用proxy 选项,

             我们在后面的示例中将会看到具体的用法。

personStore.add({ name: 'www.qeefee.com', age: 1 });   personStore.add({ name: 'qf', age: 26 });   personStore.add({ name: 'qifei', age: 26 });   personStore.sync();

要查看保存的数据,我们需要先将数据从LocalStorage中加载到Store 中,

然后对Store 进行遍历:

personStore.load();

var msg = [];

personStore.each(function (person) {    msg.push(person.get('name') ' '                        person.get('age'));

});

Ext.MessageBox.alert('提示', msg.join('<br />'));

使用load方法会将所有的数据都加载到Store中,如果我们需要进

   行查询指定的数据,就要用到filter方法了

personStore.filter("name", /\.com$/);

  使用多个过滤条件:

   personStore.filter([    

{ property: "name", value: /\.com$/ },

{ filterFn: function (item) { return item.get("age") > 10; } } ]);

     使用过滤条件代替过滤方法

 personStore.filter(function (item) {

return item.get("age") > 10 && item.get('name').length     > 3;});

更新操作:

//得到第一个person对象

var person = personStore.first();

//修改名字字段

person.set('name', 'qeefee.com');

//保存到本地

personStore.sync();

删除操作:

//得到第一个person对象

var person = personStore.first();

//移除

personStore.remove(person);

//保存

personStore.sync();

2.SessionStorageProxy:将数据存储在sessionStorage中,

此种方式只在当前会话中生效,当关闭浏览器以后,数据也会随之丢失。

用法与LocalStorageProxy 的用法基本一致,我们这次在Model中添加 proxy 的配置项

//定义数据模型

Ext.define('Person', {extend: 'Ext.data.Model',     fields: ['name', 'age'], proxy: {type: 'sessionstorage',

id: 'myProxyKey' }});

 

Model中加入代理配置以后,我们就不需要单独的定义代理对象了,

可以直接使用Store来对其进行操作

//定义Store 

var personStore = Ext.create("Ext.data.Store", {     model: 'Person'});

//添加数据

personStore.add({name:'www.baidu.com',age:1});    personStore.add({name:'qf',age:26 });

personStore.add({name:'qifei',age: 26 });

personStore.sync();

//读取数据

personStore.load();

 Var  msg=[];

personStore.each(function(person){     msg.push(person.get('name') ' ' person.get('age'));

});

Ext.MessageBox.alert('提示', msg.join('<br />'));

3.MemoryProxy:将数据存储在内存中,此种方式只在当前页面有效,

且如果刷新页面,数据将丢失。

//定义数据模型

Ext.define('Person', { extend: 'Ext.data.Model',

fields: ['name', 'age']});

var data = {Users: [{ name: 'www.baidu.com', age: 1 },

 { name: 'qeefee', age: 1 }]}

//定义Store

var personStore = Ext.create("Ext.data.Store", {

model: 'Person',    

data: data.Users, proxy: {type: 'memory'}});

在代码中高亮显示的部分,就是为store设置的缓存。当personStore 定义的时候,它就会自动的将数据加载到Store中,所以在我们访问数据的时候不需要再调用load方法了:

 

//读取数据

Var msg=[];

personStore.each(function(person) {

msg.push(person.get('name') '

' person.get('age'));});

Ext.MessageBox.alert('提示', msg.join('<br />'));

 

      和上两个的操作基本一致,我们可以通过下面的代码添加一行新数据:

personStore.add({ name: 'qifei', age: 26 });

personStore.sync();

服务端代理模式有:

    Ajax : 在当前域中发送请求。

JsonP:  跨域的请求。

Rest :   与服务器进行RESTful(GET/PUT/POST/DELETE)交互

Direct: 使用 Ext.direct.Manager 发送请求。

 常用的代理模式Ajax

 

   示例:

Ext.onReady(function(){ 

Ext.define('Person',{extend: 'Ext.data.Model',

fields: ['name', 'age']

});

var store= Ext.create('Ext.data.Store',

{model:'Person',

proxy: {

type: 'ajax',

url: rootUrl 'sample/getjson',

reader:{ type: 'json', root: 'users'}}

}); 

store.load(); 

var msg = [];

store.each(function(person){

msg.push(person.get('name') '' person.get('age'));

});

Ext.MessageBox.alert('提示', msg.join('<br />')); });

 

在这段代码中,首先定义了Model类Person,然后创建了Person类的数据仓库 store,store 使用了ajax代理,通过url向服务器请求数据,ajax代理的reader 配置项是告诉程序以何种方式读取请求到的数据。

服务器返回的JSON 字符串如下:

{users:[{name:'www.baidu.com', age:1}, {name:'Tom', age:26}]}

如果你打开网络跟踪,会发现程序已经将成功得到了这段JSON字符串。那是为什么仍然是空呢?

原因是当我们调用load()方法的时候,我们告诉store去请求数据吧,然后store就使用ajax的方式请求url,注意,ajax 是异步的,所以当我们调用load()方法以后,马上执行输出的时候,store仍然是空的,可能它还在等待服务器响应数据。

所以,在我们使用ajax方式加载数据的时候,就需要为load() 方法添加一个callback 方法,当数据加载完成以后,再callback方法中进行数据输出,修改load方法的调用:

store.load({

callback:function(records,operation,success){

 if(success){varmsg=[];store.each(

function(person){

msg.push(person.get('name') ' ' person.get('age'));

});

Ext.MessageBox.alert('提示', msg.join('<br />'));}}

});

在使用ajax进行请求的时候,ajax代理会调用自身的read方法,该方法的第一个参数是Ext.data.Operation 类型,它用来配置我们如何进行请求。我们在load 方法中可以通过配置项传递一些参数,load在调用read方法时将这些参数传递过去,read则会根据这些参数生成Ext.data.Operation 的一个实例。所以,我们可以这样来传递参数

store.load({ 

page: 2,

limit:10,params:{name:'QF'},

callback:function(records,operation,success){

if(success){varmsg=[];store.each(function(person) {msg.push(person.get('name') ' ' person.get('age'));

});

Ext.MessageBox.alert('提示', msg.join('<br />')); }}});

 

/SampleExtJS/sample/getjson?_dc=1374141754304&name=QF&pag e=2&start=25&limit=10

通过传递这些参数,我们可以完成分页、查询等操作。

 

JsonP

ExtJS 中我们可以轻松的使用JsonP代理进行跨域的数据请求:

//创建Store

var store = Ext.create('Ext.data.Store', {model: 'Person',     proxy: {

type: 'jsonp',

url: 'http://www.abc.com/sampleextjs/sample/getjsonp',

reader: {type: 'json', root:'users'}}

});

务器返回的字符串为:

Ext.data.JsonP.callback1({

users: [{ name: 'www.baidu.com', age: 1 },

{ name: 'QF', age: 26 }]

 })

Direct 代码使用Ext.Direct 向服务器发动数据。

Ext.Direct 技术的好处是,允许你像调用Javascript 方法一样调用服务器端代码

Ext.define('User', {

extend: 'Ext.data.Model',

fields: ['firstName', 'lastName'],

proxy: { type: 'direct', directFn: MyApp.getUsers, paramOrder: 'id' }

 });

User.load(1);

 参考:http://www.qeefee.com/extjs-course-6-server-proxy

 

    demo 下载 https://github.com/ningmengxs/Extjs.git


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361293.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WildFly 8.2.0.Final版本–更改的快速概述

自从我上次在此博客上写作以来已经有一段时间了。 尽管我有一些我想写博客的主题&#xff0c;但我只是没有足够的时间来做。 在看到JBoss社区成员之一的邮件后&#xff0c;我终于决定今天写这篇文章&#xff0c;检查为什么最近这里没有任何更新&#xff08;感谢检查&#xff0c…

Ph.D Grind 阅读感想 By 张雄

#Ph.D Grind是Xin Zou老师推荐的一本书&#xff0c;邮件里本来说是要在三周内读完的&#xff0c;不料看了个Preface之后再也放不下&#xff0c;最终一口气地看完了。 #看完之后很有感触&#xff0c;之前也阅读过一本讲如何规划研究生涯的书&#xff0c;但是那是一本从教授的角度…

VUE 入门基础(3)

三&#xff0c;模板语法 Vue将模板编译成虚拟DOM渲染函数&#xff0c;结合响应系统&#xff0c;在应用状态改变时&#xff0c;vue能够智能地计算出重新渲染组件的最小代价并DOM操作上。 插值&#xff0c;文本 数据绑定常见的形式就是使用“Mustache”语法&#xff08;双大括号&…

SVG 使用

SVG即Scalable Vector Graphics可缩放矢量图形&#xff0c;使用XML格式定义图形&#xff0c; 主要优势在于可缩放的同时不会影响图片的质量。 SVG 在html 中常用的方法 1.使用<img>元素来嵌入SVG图像 <img src”http://www.w3school.com.cn/svg/rect1.svg” width”…

超越JAX-RS规范:Apache CXF搜索扩展

在今天的帖子中&#xff0c;我们将超越JAX-RS 2.0规范&#xff0c;并探索Apache CXF &#xff08;流行的JAX-RS 2.0实现之一&#xff09;为REST服务和API开发人员提供的有用扩展。 特别是&#xff0c;我们将讨论使用OData 2.0查询过滤器子集的搜索扩展。 简而言之&#xff0c;…

阿里巴巴使命、愿景、价值观、绩效管理中的六大价值观、

阿里巴巴的使命 让天下没有难做的生意 阿里巴巴的愿景 分享数据的第一平台幸福指数最高的企业“活102年”阿里巴巴的价值观 我们坚持“客户第一、员工第二、股东第三”。 阿里巴巴的六脉神剑&#xff08;绩效管理中的六大价值观&#xff09; 公司的“六脉神剑” 客户第一&#…

Angularjs基础(十)

ng-blur       描述&#xff1a;规定blur 事件的行为       实例&#xff1a;当输入框失去焦点的(onblur)时执行表达式&#xff1a;         <input ng-blur"count count 1" ng-init"count0"/>         <h1>{{co…

在命令行上操作JAR,WAR和EAR

尽管Java IDE和许多图形工具使查看和操作Java归档文件&#xff08;JAR&#xff0c;WAR和EAR&#xff09;文件的内容比以往更加容易&#xff0c;但有时我还是更喜欢使用命令行jar命令来完成这些任务。 当我必须重复做某事或作为脚本的一部分来做时&#xff0c;尤其如此。 在本文…

C#语言使用多态(接口与override) ——帮您剔除对面向对象多态性的疑惑

多态是面向对象编程中三大机制之一,其原理建立在"从父类继承而来的子类可以转换为其父类"这个规则之上,换句话说,能用父类的地方,就能用该类的子类.当从父类派生了很多子类时,由于每个子类都有其不同的代码实现,所以当用父类来引用这些子类时,同样的操作而可以表现出…

Java如何以及为什么使用Unsafe?

总览 sun.misc.Unsafe至少在Java 1.4&#xff08;2004&#xff09;中就已经存在于Java中。 在Java 9中&#xff0c;不安全将与许多其他供内部使用的类一起隐藏。 以提高JVM的可维护性。 尽管仍不确定究竟将取代Unsafe到底是什么&#xff0c;但我怀疑将取代Unsafe不仅仅是一件事…

Angularjs基础(三)

AngularJS ng-model 指令     ng-model 指令用于绑定应用程序数据到HTML 控制器&#xff08;input,select,textarea&#xff09;的值ng-model指令     ng-model指令可以将输入域的值与AngularJS 创建的变量绑定。       实例&#xff1a;         <di…

ASP.NET MVC的生命周期与网址路由

网址路由&#xff08;Routing&#xff09;在ASP.NET MVC中有两个主要用途&#xff0c;一个用途是匹配通过浏览器传来的HTTP请求&#xff0c;另一个用途则是将适当的网址返回浏览器。 首先我们来看下第一个用途&#xff0c;也就是匹配通过浏览器传来的HTTP请求。 客户端对ASP.NE…

ecshop分页类assign_pager分析和扩展

ecshop分页类assign_pager分析和扩展,我们前面的文章中介绍过ecshop ajax分页&#xff0c;他的基础都是简单单一的分页。如果我们要在ecshop分页里面传入自己的参数&#xff0c;你就必须对ecshop的assign_pager分页函数进行系统的认识和分析。 首先我们看category.php的ecshop分…

NEC css规范

CSS规范 - 分类方法 SS文件的分类和引用顺序 通常&#xff0c;一个项目我们只引用一个CSS&#xff0c;但是对于较大的项目&#xff0c;我们需要把CSS文件进行分类。 我们按照CSS的性质和用途&#xff0c;将CSS文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”&#…

JDK 8中的流驱动的集合功能

这篇文章介绍了JDK 8的应用–引入了带有集合的 流 &#xff0c;以更简洁地完成通常需要的与集合相关的功能。 在此过程中&#xff0c;将演示并简要说明使用Java Streams的几个关键方面。 请注意&#xff0c;尽管JDK 8 Streams通过并行化支持提供了潜在的性能优势&#xff0c;但…

知识汇集

Oracle中锁介绍&#xff1a;http://space.itpub.net/26961876/viewspace-731300转载于:https://www.cnblogs.com/yaohonv/archive/2012/08/18/tech-col.html

jquery mobile 移动web(5)

有序列表   <div data-role"content">     <ol data-role"listview" data-theme"g">       <li><a href"#"> List 1</a></li>       <li><a href"#"> L…

cjmx:JConsole的命令行版本

当监视正在运行的Java应用程序时&#xff0c;JConsole是一个很好的工具。 但是&#xff0c;当无法使用JConsole直接连接到JVM&#xff08;例如&#xff0c;由于网络限制&#xff09;并且无法进行SSH隧道传输时&#xff0c;那么拥有命令行版本的JConsole会很棒。 jcmx是JConsol…

Android中SQLiteDatabase操作【附源码】

像我们做的很多应用程序及网站一样&#xff0c;基本都是对数据库进行增删改查来实现相应的功能。那么Android开发也一样&#xff0c;不过由于在移动客户端应用&#xff0c;所以不会像sql server、mysql那么复杂&#xff0c;Android应用程序支持本地数据库&#xff0c;SQLiteDat…

移动设备HTML5页面布局

在HTML5标准添加的新元素中&#xff0c;用于常见页面结 构的包括header footer footer nav aside aside article section hgroup 。 下面简单介绍一下这个元素&#xff1a; 1.header header>元素定义文档的页面组合&#xff0c;通 常是一些引导和导航信息&#xff0c;标签…