ExtJS: What is the Grid Panel event to detect grid data changed

5
votes

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?

2
javascriptextjsextjs4.1

2 Answers

4
votes

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
}

...
2
votes

Ext.data.Store datachanged( this, eOpts ). Fires whenever the records in the Store have changed in some way - this could include adding or removing records, or updating the data in existing records http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-event-datachanged

function dataChangedFun(store){
    // code here
}

myStore.on("datachanged", dataChangedFun, this);

And when you change the store's records manually then call dataChangedFun(myStore);