1. 程式人生 > >ExtJs中同一個URL構造多個Ext.data.JsonStore

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型別的資料