javascript - ExtJS: What is the Grid Panel event to detect grid data changed - Stack Overflow

admin管理员组

文章数量:1346189

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 bees dirty (and vice-versa)? Which listener(s) should my code be listening to?

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 bees dirty (and vice-versa)? Which listener(s) should my code be listening to?

• javascript
• extjs
• extjs4.1

Share Improve this question Follow edited Dec 1, 2012 at 18:47 Joseph Victor Zammit asked Dec 1, 2012 at 17:13 Joseph Victor ZammitJoseph Victor Zammit 15.3k1313 gold badges8181 silver badges104104 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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
}

...

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

本文标签： javascriptExtJS What is the Grid Panel event to detect grid data changedStack Overflow