如何在extjs 4.1 Grid中为特定列设置动态数据

I am displaying 2 columns for a Grid lets say

我正在为Grid显示2列

"1Yr Data" and "2Yr Data"

“1年数据”和“2年数据”

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

网格有一个带有组合框的工具栏，带有选项[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.

现在，当我改变组合时，想要更改该列的值而不重新加载GRID而不需要点击任何服务。

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

那么有没有选择通过从商店读取更改columndata？

Thanks in advance for your help!!!

在此先感谢您的帮助！！！

1 个解决方案

#1

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.

正如Izhaki所说，网格绑定到商店。因此，如果要刷新网格，只需修改商店的数据，网格就会自动刷新。

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/

#1