extJs中一個viewport中, 使用一個請求, 同時顯示兩個gridPanel

viewport中代碼:

examination.myPanel = new Ext.Viewport({
    layout : 'border',
    items: [{
        region: 'north',
        xtype: "panel",
        width: 800,
        items : [examination.searchFormPanel]
    },{
        title: '基本性能',
        region: 'west',
        xtype: "panel",
        width: 800,
        height: 800,
        items : [examination.grid]//[examination.searchFormPanel//
    }, {
        title: '網關性能',
        region: 'center',
        xtype: "panel",
  //      collapsible: true,
        items : [examination.gatewayGrid],
 //       split: true,
        width: 800,
        height: 800
    }]
    });

gridPanel的store代碼如下:

/** cpu內存等基本信息-數據源 */
examination.store = new Ext.data.GroupingStore({
    autoLoad : false,
    remoteSort : true,
    groupField: 'type',
    proxy : new Ext.data.HttpProxy({// 獲取數據的方式
    //  method : 'POST',
        type : 'jsonp',
        url : ""
    }),
    reader : new Ext.data.JsonReader({// 數據讀取器
    //  totalProperty : 'total', // 記錄總數
        root : 'root' // Json中的列表數據根節點
    }, [
    'ip',
    'type',
    'value',
    'time',
    'standard',
    'systemName',
    'remark'])
});
/** 網關性能信息-數據源 */
examination.gatewayStore = new Ext.data.GroupingStore({
    autoLoad : false,
    remoteSort : true,
    groupField: 'type',
    proxy : new Ext.data.HttpProxy({// 獲取數據的方式
        type : 'jsonp',
        url : ""
    }),
    reader : new Ext.data.JsonReader({// 數據讀取器
    //  totalProperty : '', // 記錄總數
        root : 'root' // Json中的列表數據根節點
    }, [
    'ip',
    'type',
    'value',
    'time',
    'standard',
    'orderconfirmcount',
    'businessrejectcount',
    'gtljstatus',
    'systemName',
    'remark'])
});

在發送請求並獲取返回值後, 在回調函數中調用下面的方法可以動態的加載兩個gridPanel的數據

    examination.grid.getStore().removeAll();    //清楚grid中所有記錄
    examination.gatewayGrid.getStore().removeAll();

    examination.grid.getStore().loadData(data.normalPerf);   //向grid中加載數據
    examination.gatewayGrid.getStore().loadData(data.gatewayPerf);

效果圖如下: