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?
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.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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With