extjs使用多个数据源填充面板

时间:2017-04-17 19:52:40

标签: javascript json ajax extjs

我有一个Ext.grid.GridPanel链接到Ext.data.JsonStore用于数据,Ext.grid.ColumnModel用于网格规范。

我有10列。其中9个正在由json商店填充。我遇到了最后一列的问题,因为它的数据是动态的,无法像其他数据一样加载。

该列要求首先加载其他数据存储,一旦加载,我需要从这些列中提取数据并将该数据插入到我的json存储中的列中以显示在10列网格中。

`

 var JSONSTORE = new Ext.data.JsonStore ({
    // Store Configs
        autoLoad: true,
        url: 'json_data_call.php',
        baseParams: {action: 'read'},
    // Reader Configs
        storeId: 'store1',
        idProperty: 'store1',
        root: 'data',
        sortInfo: {
            field: 'field_name',
            direction: 'ASC'
        },
        fields: [
            {name : 'field_name', type: 'string'},
            {name : 'field_name', type: 'string'},
            {name : 'field_name', type: 'int'}
        ],
        autoSave: false
    });

JsonStore.on('exception',JsonSave,this);

JsonStore.on('load',function(){


    autoDiagnosticsJsonStore.warn_err_loaded = true;

    if(autoDiagnosticsJsonStore.warn_err_loaded)
    {
        console.log(autoDiagnosticsJsonStore);
    }else{
        console.log('ERROR');
    }

});


/*
 * ColumnModel
 */
var ColumnModel = new Ext.grid.ColumnModel ({
    defaults: { menuDisabled: true },
    columns: [
        {header: 'Type',    hideable: false, sortable: false, dataIndex: 'ERR_TYPE',
            renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                if (record.data.ERR_TYPE == 'WARNING') {
                    metaData.css = 'cog_bg_orange';
                }
                if (record.data.ERR_TYPE == 'ERROR') {
                    metaData.css = 'cog_bg_red';
                }
                return value;
            }
        },
        {header: 'Item Found', hideable: false, sortable: false, dataIndex: 'ERR_MSG', width: 900, css: 'font-family: lucida console, monospace;'}
    ]
});

var errorGrid = new Ext.grid.GridPanel({
    id: 'nmerrorGrid',
    enableColumnMove: false,
    autoHeight: true,
    xtype: 'grid',
    ds: JsonStore,
    cm: ColumnModel,
    sm: new Ext.grid.RowSelectionModel({singleSelect: true})
});


$error_panel = "

var errorPanel = new Ext.Panel({
    title: 'field_name',
    collapsible: true,
    anchor: '98%',
    height: 300,
    frame: true,
    layout: 'fit',
    items: [ errorGrid ]
});`

1 个答案:

答案 0 :(得分:0)

如果我理解正确,你会尝试为商店中的记录创建另一个字段,并在填充商店后计算该字段。

如果您为商店的记录创建model,则可以使用记录的值创建calculated字段。

示例:

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [{
       name: 'firstName',
       type: 'string'
    },{
       name: 'lastName',
       type: 'string'
    },{
       name: 'fullName',
       calculate: function (data) {
         return data.firstName + ' ' + data.lastName;
       }
   }]
});

字段' fullName'使用现有记录值构建。您可以将模型添加到商店(model: 'User')以代替fields配置。