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

时间:2013-04-04 10:15:33

标签: extjs extjs4 extjs4.1

我正在为Grid显示2列

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

网格有一个带有组合框的工具栏,带有选项[1Yr。 2YR]

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

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

先谢谢你的帮助!!!

1 个答案:

答案 0 :(得分:1)

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

我认为这就是你想要做的。我希望它可以帮助你。

/* 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/