extjs populating a panel with multiple data sources

Question

I Have a Ext.grid.GridPanel that is linked to a Ext.data.JsonStore for data and Ext.grid.ColumnModel for grid specs.

I have 10 columns. 9 of them are being populated by the json store. I am having issues with the last column since its data is dynamic and not able to loaded like the rest.

the column requires that other datastores be loaded first and once they are loaded I need to extract data from those columns and insert that data into a column in my json store to display in the 10 column grid.

`

 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 ]
});`

Jaimee Jaimee · Accepted Answer · 2017-04-18T16:12:22

If I understand this correctly, you're trying to create another field for records in the store, and that field is calculated once the store is populated.

If you create a model for the records of your store, you can create a field that is calculated using the record's values.

Example:

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

The field 'fullName' is built using the existing records values. You can add your model to the store (model: 'User') in place of the fields config.

extjs populating a panel with multiple data sources

1 Answers