5

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 Answers 2

4

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

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);

2
  • Thanks for your reply; I tried to listen to datachanged. But when I change data in the grid, and consequently change the store's record (of type Ext.data.Model) manually via set(), and then commit(), this event is still not fired :/ Dec 3, 2012 at 11:30
  • I didn't copy blindly your code sample as the code structure I've put above is simplified for communication's sake. Found another solution; will update this question with an answer after I've eaten something; thanks anyway, +1ed :) Dec 3, 2012 at 12:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.