CODEWITHSUNDEEP
extjsextjs4extjs4.1
aswininayak
aswininayak

Reputation: 973

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

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!!!

Upvotes: 0

Views: 3034

Answers (1)

alexrom7
alexrom7

Reputation: 864

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/

Upvotes: 1

Related Questions