數據代理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'));
}
});
});
})();