extJs中一个viewport中, 使用一个请求, 同时显示两个gridPanel

最新推荐文章于 2017-06-20 11:49:21 发布

bsh_csn

最新推荐文章于 2017-06-20 11:49:21 发布

阅读量4.1k

点赞数

分类专栏： ExtJs 文章标签： extjs 布局

本文链接：https://blog.csdn.net/bsh_csn/article/details/52241221

版权

ExtJs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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);