extjs4.0的數據代理proxy

數據代理proxy

數據代理proxy是進行數據讀寫的一個主要途徑,通過代理操作進行CURD

每一步操作全會得到唯一的Ext.data.Operation實例化包含了所有的請求參數

1. 數據代理proxy目錄結構

Ext.data.proxy.Proxy代理類的根類劃分爲客戶端(Client)代理和服務器(Server)代理

Ext.data.proxy.Client 客戶端代理

Ext.data.proxy.Memory 普通的內存代理

Ext.data.proxy.WebStorage 瀏覽器客戶端存儲代理

Ext.data.proxy.SessionStorage 瀏覽器級別代理

Ext.data.proxy.LocalStorage 本地化的級別代理(不能跨瀏覽器的)

Ext.data.proxy.Server 服務器端代理

Ext.data.proxy.Ajax 異步加載的方式

Ext.data.proxy.Rest 一種特定的Ajax

Ext.data.proxy.JsonP 跨域交互的代理

跨域的缺點:跨域是有嚴重性安全隱患的extjs的,跨域也是需要服務器端做相應的配合

Ext.data.proxy.Direct命令

客戶端的代理

1.Ext.data.proxy.Memory 普通的內存代理的使用

(function(){

Ext.onReady(function(){

//內存代理的創建

Ext.regModel("user",{

fields:[

{name:'name',type:'string'},

{name:'age',type:'int'}

]

});

//使用內存代理來爲類賦值和實例化

var memory = [

{name:'laowang',age:23},

{name:'laoyao',age:22}

]

//利用Ext.data.proxy.Memory 即使內存代理來把類和值連接起來

var memoryProxy = Ext.create("Ext.data.proxy.Memory",{

data:memory,//注意數組不帶''

model:'user'

});

//通過使用proxy實現CURD

//其次是更新,用update,把更新放到查找之前可以在更新之後直接讀取出來

memory.push({name:'new laowang',age:26})

memoryProxy.update(new Ext.data.Operation({

action:'update',

data:memory

}),function(result){},this)

//首先實現的是查找,通過斷點來知道result可以得到一個數組

memoryProxy.read(new Ext.data.Operation(),function(result){

var pdata = result.resultSet.records;

//注意數組不帶'',數組的遍歷用each方法

Ext.Array.each(pdata,function(model){

alert(model.get('name'));

});

},this);

});

})();

2. Ext.data.proxy.LocalStorage 本地化的級別代理(不能跨瀏覽器的)

1.(function(){

2. Ext.onReady(function(){

3. //學習Ext.data.proxy.LocalStorage,即是本地化的級別代理,是不誇瀏覽器的,相當於是cookie

4. Ext.regModel("user",{

5. fields:[

6. {name:'name',type:'string'}

7. ],

8. //指定代理的類型爲本地的代理級別,id是唯一的標識

9. proxy:{

10. type:'localstorage',

11. id:'twitter-Searches' //id不可以省去,因爲每訪問一次就有一個cookie在本地,是通過uuid來標識的

12. }

13. });

14. // 我們用store來初始化數據

15. var store = new Ext.data.Store({

16. model:user

17. });

18. //利用store中的方法來添加數據,store是數據集

19. store.add({name:'laowang'});

20. store.sync();//用來保存添加的數據

21. store.load();//讀取存在store中的數據

22.

23. //把數據集通過數組的形式讀取出來

24. var msg = [];

25. store.each(function(rec){

26. msg.push(rec.get('name'));

27. //alert(rec.get('name'));這樣寫看不出來有多少個,還要數

28. });

29. alert(msg.join('\n'));//因爲是一個數據集,所以在每次訪問之後都會想store中加入一個name,所以each會再多一次循環

30. });

31. })();

3. Ext.data.proxy.SessionStorage 瀏覽器級別代理

和本地級別的代理不同的是porxy代理不同,其他的都相同

(function(){

Ext.onReady(function(){

//學習Ext.data.proxy.SessionStorage,即是瀏覽器級別的代理,只限於一次會話

Ext.regModel("user",{

fields:[

{name:'name',type:'string'}

],

//指定代理的類型爲本地的代理級別,id是唯一的標識

proxy:{

type:'sessionstorage',

id:'myProxyKey'

}

});

// 我們用store來初始化數據

var store = new Ext.data.Store({

model:user

});

//利用store中的方法來添加數據,store是數據集

store.add({name:'laowang'});

store.sync();//用來保存添加的數據

store.load();//讀取存在store中的數據

//把數據集通過數組的形式讀取出來

var msg = [];

store.each(function(rec){

msg.push(rec.get('name'));

//alert(rec.get('name'));這樣寫看不出來有多少個,還要數

});

alert(msg.join('\n')+"一次訪問爲:"+msg.length+"次");

});

})();

以上的本地代理和瀏覽器代理的用處:

本地代理可以用於永久的存儲,如果只是一次會話就用session代理,比如打開用電腦的時候用的是家庭式的還是網吧式的,如果是網吧式的,在後臺編寫的時候就可以用的是session代理,只記錄當時的情況。

亂碼問題沒有解決啊!

服務端的代理

1.Ext.data.proxy.Ajax 異步加載的方式

(function(){

Ext.onReady(function(){

Ext.regModel("person",{

fileds:[

{name:'name',type:'string'}

],

});

//利用ajax代理來和jsp頁面連接,不用上次我們用到的在proxy中嵌套,把ajax和類的模型提取出來來創建

//裏面爲ajax的屬性

var ajaxProxy = new Ext.data.proxy.Ajax({

model:'person',

url:'extLession/proxy04/person.jsp',

reader:'json'

});

//讀取jsp頁面的數據

ajaxProxy.doRequest(new Ext.data.Operation(),function(o){

var text = o.response.responseText;//得到的是name的值,但是我們要的是一個類的model,所以再通過屬性轉化一下。

alert(Ext.JSON.decode(text)['name']);

});

});

})();

2.Ext.data.proxy.JsonP 跨域交互的代理

從本地可以跨域到其他的網站上去

(function(){

Ext.onReady(function(){

//Ext.data.proxy.JsonP 跨域交互的代理

Ext.regModel("person",{

fileds:[

{name:'name',type:'string'}

],

//跨域的代理

proxy:{

type:'jsonp',

url:'http://www.baidu/extjs.com'

}

});

//初始化類

var person = Ext.ModelManager.getModel("person");

person.load(1,{

scope:this,

success:function(model){

alert(model.get('name'));

}

});

});

})();

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章