Question

I have a GridPanel and within the toolbar I have two buttons “Reject Changes” and “Save Changes”. The code below shows what each button does, and so far things work as expected.

Ext.define('APP.view.MyGrid' ,{
    extend: 'Ext.grid.Panel',

    ...

    initComponent: function() {    
        var me=this;
        me.store = myStore;         
        me.plugins = [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1, autoCancel: false
            }),
        ];          
        me.rejectBtn = {
            xtype:'button', id:'kbsGridCancelBtn', text:'Reject changes',
            handler: function() { me.store.rejectChanges(); }
        },      
        me.saveBtn = {
            xtype:'button', id:'kbsGridSaveBtn', text:'Save changes',
            handler: function() { me.store.sync(); }
        },      
        me.bbar = Ext.create('Ext.toolbar.Toolbar', {
            items : [{ xtype: 'tbfill'},me.rejectBtn,'-',me.saveBtn] 
        });

        me.callParent(arguments);
    }

    ...

});

How to enable/disable the buttons (or any other action) only if the grid data has been modified by the user? I.e. only if any grid row/field becomes dirty (and vice-versa)? Which listener(s) should my code be listening to?

Answer 1

As shown in the question there’s a CellEditing plugged-in to the Grid. By listening to the CellEditing Plugin’s validateedit event, which is fired when data in the grid is changed, one can use the event’s parameters to update the store’s row using the Model instance’s set function. Of course after the required validation is done. The code decides whether to enable/disable the buttons based on what getModifiedrecords returns.

Code:

...

listeners: {
    'validateedit': function(cep, e, eOpts) {
        var me = this,            
            rowIdx = e.rowIdx, // row index
            fieldName = e.field,
            newVal = e.value,
            storeRow = this.store.getAt(rowIdx);

        // assuming valid input, proceed with the below    
        storeRow.set(fieldName, newVal);

        // if modified records > 0 then enable buttons
        var enableButtons = Boolean(me.store.getModifiedRecords().length);

        if (enableButtons) {
            /* enable buttons */
        } else { /* disable buttons */ }        

    }, scope: this
}

...