ExtJs中同一個URL構造多個Ext.data.JsonStore
最近做專案一個頁面需要向相同一個URL取一個物件的兩種不同的屬性集,用來在前臺分別用兩種不同的元件顯示。因為查詢的是同一個物件,而且一次就 能獲得其兩種屬性集,如果分為兩次請求,那樣效率太低了。那現在就需要在一次請求中返回所有的資料,然後再構造成兩個不同的JsonStore以便兩個不 同的Ext元件進行載入。
那如何完成這一目標呢?首先我的思路是這樣的:
(1)用Ext.Ajax.request()去後臺取資料,如下所示:
Ext.Ajax.request({
url:urlstr,//後臺取資料的地址
success:function(response){
var responseJson = Ext.util.JSON.decode(response.responseText);
if(responseJson.success)
{
store1.loadData(responseJson);//將後面(3)中的store1、store2的定義放在
store2.loadData(responseJson);//Ext.Ajax.request之前
}
},
failure:function(response){
}
});
(2)後臺返回json格式的資料,如
{success:true,root1:[{name:’name’,type:’type’},{name:’name1’,type:’type1’}],root2:[{color:’red’,number:3},{color:’black’,number:4}]};
(3)在前臺構造兩個Ext.data.JsonStore,如下所示:
var store1 = new Ext.data.JsonStore({
fields:['name','type'],
root:’root1′
});
var store2 = new Ext.data.JsonStore({
fields:['color',’number'],
root:’root2′
});
(4)在前臺將後臺返回的json資料轉換成json物件(第(1)步中的responseJson 物件),然後使用Ext.data.JsonStore物件的loadData()方法載入json型別的資料即可,這樣就構造兩個JsonStore 了,以便其他元件配置項‘store’使用。
store1.loadData(responseJson);//載入json型別的資料