Reconfigure Grid with response from server json object

[diet1986]

Hi all ,

I have a store as below.

Ext.define('tpsyndev.store.tempPartyRelations', {
    extend: 'Ext.data.Store',
    alias: 'widget.tempPartiesRelations',
    model:'tpsyndev.model.TempPartyRelation',
    autoLoad: false,
    pageSize: 4,
    proxy: {
        type: 'ajax',
        url : '/tpsyndev/MainLayout/dgetTempPartyRelations',
        reader: {
            type: 'json',
            root: 'data',
            gridcolumns: 'gridcolumns',
        }
    }
});

I am returing following response from server when the store loads.

{"gridcolumns:["CustomerNumber","SupplierNumber","Party1ItemNumber","Party2ItemNumber","ItemDescription","Currency","BaseUOM","Price","StartDate","EndDate","ActiveFlag","validationErrors"],"data":[{"class":"tpsyndev.TempDomainToFetchData","id":null,"activeFlag":"Y","baseUOM":"EA","currency":"USD","customerNumber":"","endDate":null,"itemDescripton":"BestBuyItem123","party1Id":null,"party1ItemNumber":"","party2Id":null,"party2ItemNumber":"uyhln","price":100.23,"processRunDetailsId":15,"startDate":"2012-11-07T08:41:09Z","supplierNumber":"","validations":"Please provide supplier number at row number 1 Column number 2Please provide customer number at row number 1column number 1Unknown Sponsor party at row number 1Please enter valid party1itemnumber number at row number 1column number 3"}]}

I have to reconfigure my grid on an event .The columns should be same as the gridcolumns: list in the json response .How can i do this .

[vietits]

You can not directly reconfigure the grid columns with data you supplied (jsonData.gridcolumns) because each items in this array is a string, not a valid grid column. At least, you should convert this data to valid definition of grid columns and then use grid.reconfigure() to reconfigure the grid.

BTW, I suggest you look at metaData, metachange event.

[diet1986]

Yes vitits grid.reconfigure(store ,columns[]) I want to know how can i get gridcolumns value from json and by these values make grid columns and pass to the reconfigure method.

Thanks in advance

You can not directly reconfigure the grid columns with data you supplied (jsonData.gridcolumns) because each items in this array is a string, not a valid grid column. At least, you should convert this data to valid definition of grid columns and then use grid.reconfigure() to reconfigure the grid.

BTW, I suggest you look at metaData, metachange event.

[vietits]

You should look at metaData, metaProperty, metachange event.

[diet1986]

Thanks Vietits, I am searching but i can not find good tutorial about meta data.meta change property.Can you provide the url for the same.

You should look at metaData, metaProperty, metachange event.

[plum]

As vietits mentioned read this before you ask for more details, you should find there all informations that you need:

http://docs.sencha.com/ext-js/4-1/#!...perty-metaData
http://docs.sencha.com/ext-js/4-1/#!...g-metaProperty
http://docs.sencha.com/ext-js/4-1/#!...ent-metachange

This event will fire if you provide proper configuration of meta in Ext.data.Store and json data. metaData property is defaults is set to "metaData".

I suggest you (if you can) change response json to some more universal syntax like in Extjs documentation:

"metaData": {
        "columns": [
            { "text": "User ID", "dataIndex": "userId", "width": 40 },
            { "text": "User Name", "dataIndex": "name", "flex": 1 },
            { "text": "Birthday", "dataIndex": "birthday", "flex": 1, "format": 'Y-j-m', "xtype": "datecolumn" }
        ]
    }

If not then set metaData property to "gridcolumns" and handle metaData change event like this:

var store = Ext.create('Ext.data.Store', {
    ...
    listeners: {
        'metachange': function(store, meta) {
            // Becouse you are not providing proper column configuration
            var columns = [];
            for (var i=0; i < meta.length; i++) {
               columns.push({text: meta[i], dataIndex: meta[i]});
            }
            myGrid.reconfigure(store, columns);
        }
    }
});

This is only snippet, I don't tested this code, but now you should have basic knowledge how to go ahead.