Getting Model from GridPanel in ExtJS

Question

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!

Answer 1

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

Answer 2

You can monitor store's update event.

init: function () {
    this.getMyimpprojectsStore().on('update', function(store, record) {
        // do something with record
    });
    // ...
},

Answer 3

I'm convinced that the update plugin will handle the update automatically, through the api of the underlying store and post the data automatically to the server if the proxy as autoSync to true.

Example of the configured proxy:

Ext.define('MyApp.store.YourStore', {
extend: 'Ext.data.Store',

model: 'MyApp.model.YourGridModel',
autoSync: true, //Commits the changes realtime to the server
proxy: {
    type: 'ajax',
    batchActions : true, //Commits the changes everytime a value is changed if true o otherwise store the changes and batch update them in 1 single post
    api: {
        read: 'path/to/select',
        create: 'path/to/create',
        update: 'path/to/update',
        destroy: 'path/to/delete'
    },
    reader: {
        type: 'json',
        root: 'results',
        successProperty: 'success'
    },
    writer: {
        type: 'json',
        writeAllFields: true
    },
    listeners: {
        exception: function(proxy, response, operation){

            Ext.MessageBox.show({
                title: 'REMOTE EXCEPTION',
                msg: operation.getError(),
                icon: Ext.MessageBox.ERROR,
                buttons: Ext.Msg.OK
            });
        }
    }
},
listeners: {
    write: function(proxy, operation){

        var response = Ext.JSON.decode(operation.response.responseText);

        if(response.success == true)
        {        
            //TODO: Proxy - Messageboxes might be a little anoying we might instead use the status bar in teh grid or something so show status of the operation
            Ext.MessageBox.show({
                title: this.xFileLibraryTitle,
                msg: response.message,
                icon: (response.success == true)? Ext.MessageBox.INFO : Ext.MessageBox.ERROR,
                buttons: Ext.Msg.OK
            });
        }
    }
}

});

I would look specially for the two configs: "autoSync" and "batchActions"

Hope this helps you further with your issue!