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

總結

以上是生活随笔為你收集整理的Extjs 数据代理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。