How to set dynamic Data for a particular column in extjs 4.1 Grid

Question

I am displaying 2 columns for a Grid lets say

"1Yr Data" and "2Yr Data"

Grid Has a toolbar with combobox with option [1Yr. 2Yr]

Now when I will change the combo want to change the values of that column without reloading the GRID and without hitting any service.

So is there any option to change the columndata by reading from a store??

Thanks in advance for your help!!!

The question is very unclear. A grid is bound to a store. The grid displays the records the store holds. If the store changes, the grid updates. — Izhaki
Does the grid really display two columns? Or does it display a single column that may need to present Year 1 Data OR Year 2 Data? I the latter is the case, just have all your records in the store (for both years) and filter the store locally. — Izhaki
Thanks Izhaki for your response and am sorry for not explaining the scenario properly.... Here I have 1 combobox with 2 values. Grid Has 2 Columns "1Yr Data" and "2Yrs Data". If I will select the 1Yr in combo then only 1 column with Header "1Yr Data" will be populated with new datas. Similarly if I select 2Yr from combo the second column will be filled with new data. — aswininayak

alexrom7 alexrom7 · Accepted Answer · 2013-04-05T01:33:51

The grid is bound to a store, just like Izhaki said. So if you want to refresh the Grid, just have to modify the Store's data and the Grid will refresh automatically.

I think this is what you were trying to do. I hope it could help you.

/* MODEL */
Ext.define('YrModel', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'yearOne',
        type: 'int'
    }, {
        name: 'yearTwo',
        type: 'int'
    }],
});

/* STORE */
Ext.create('Ext.data.Store', {
    storeId: 'YrStore',
    model: "YrModel",
    data: data,
    autoLoad: true,
    proxy: {
        type: 'memory',
        reader: {
            type: 'json'
        }
    }
});

/* COMBOBOX STORE */
var comboboxStore = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data: [{
        "abbr": "yearOne",
        "name": "Year One"
    }, {
        "abbr": "yearTwo",
        "name": "Year Two"
    }]
});

/* COMBOBOX */
var combobox = Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose a year',
    store: comboboxStore,
    queryMode: 'local',
    editable: false,
    displayField: 'name',
    valueField: 'abbr'
});

/* LISTENER TO COMBOBOX SELECT EVENT */
combobox.on({
    select: onComboboxSelect
});

/* METHOD THAT HANDLE THE COMBOBOX SELECT EVENT */
function onComboboxSelect(combo, records) {
    var yearSelectValue = null;
    var yearSelected = (records.length > 0) ? records[0].get('abbr') : null;

    Ext.getStore('YrStore').each(function (record, index, count) {
        yearSelectValue = record.get(yearSelected);
        record.set(yearSelected, yearSelectValue + 1);
    });
}

/* GRID */
Ext.create('Ext.grid.Panel', {
    title: 'Year Data',
    renderTo: Ext.getBody(),
    store: Ext.getStore('YrStore'),
    viewConfig: {
        markDirty: false
    },
    columns: [{
        text: 'Year One',
        dataIndex: 'yearOne',
        flex: 1,
        sortable: true
    }, {
        text: 'Year Two',
        dataIndex: 'yearTwo',
        flex: 1,
        sortable: true
    }

             ],
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        items: [combobox]
    }]
});

http://jsfiddle.net/alexrom7/kUeU9/

How to set dynamic Data for a particular column in extjs 4.1 Grid

1 Answers