Search code examples
javascriptextjscomboboxextjs4gridpanel

Getting Model from GridPanel in ExtJS


I have a gridpanel that allows inline editing of a column. This column uses a combobox as the editor, and neither the "change" event nor the "select" event give me something usable to backtrace the edited value to get the changed row from the gridpanel.

I believe Ext floats the editor's combobox so therefore I can't do something simple like

combo.up()

To return to the grid.

Here is the grid panel from the view:

{
    xtype: 'gridpanel',
    title: 'Important Projects',
    id: 'importantProjectsGrid',
    dockedItems: [],
    flex: 1,
    columns: [
        { header: 'Quote Name', dataIndex: 'QuoteName', flex: 4 },
        { header: 'Quote Status', dataIndex: 'QuoteStatusID', flex: 6, editor: {
            xtype: 'combobox',
            editable: false,
            action: 'QuoteStatus',
            selectOnTab: true,
            store: 'statuses',
            queryMode: 'local',
            displayField: 'Description',
            valueField: 'Description'
        } }
    ],
    store: 'myimpprojects',
    selModel: {
        selType: 'cellmodel'
    },
    plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    })]
}

Here is the controller code pertaining to this:

init: function () {
    this.control({
        '[action=QuoteStatus]': {
            change: function (combo, new_value, old_value, opts) {
                // I need to go back up from this combobox
                // to get the row that this value was edited in
                // to grab an ID value from that row's data
                // in order to make an ajax request
            }
        }
    });
},

Thanks for any help!


Solution

  • Try putting the listener on the CellEditing plugin. There are events for beforeedit, edit, and validateedit that receive an object containing references to the grid, the record, field, row and column indexes, and more. You should be able to check for the combobox in the event handler and handle your information from there.

    Quick link to the doc page: Ext.grid.plugin.CellEditing