javascript ExtJS：检测网格数据更改的网格面板事件是什么
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13661675/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ExtJS: What is the Grid Panel event to detect grid data changed
提问by Joseph Victor Zammit
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.
我有一个 GridPanel，在工具栏中我有两个按钮“拒绝更改”和“保存更改”。下面的代码显示了每个按钮的作用，到目前为止一切都按预期工作。
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?
仅当用户修改了网格数据时，如何启用/禁用按钮（或任何其他操作）？即仅当任何网格行/字段变脏时（反之亦然）？我的代码应该收听哪些侦听器？
采纳答案by Joseph Victor Zammit
As shown in the question there's a CellEditingplugged-in to the Grid. By listening to the CellEditing Plugin's validateeditevent, 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 setfunction. Of course after the required validation is done. The code decides whether to enable/disable the buttons based on what getModifiedrecordsreturns.
如问题所示，CellEditingGrid有一个插件。通过监听 CellEditing Plugin 的validateedit事件，当网格中的数据发生变化时会触发该事件，可以使用该事件的参数使用 Model 实例的set函数更新商店的行。当然，在完成所需的验证之后。代码根据getModifiedrecords返回的内容决定是否启用/禁用按钮。
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
}
...
回答by Boris Gappov
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
Ext.data.Store datachanged( this, eOpts )。每当 Store 中的记录以某种方式发生更改时触发 - 这可能包括添加或删除记录，或更新现有记录中的数据 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);
当您手动更改商店的记录时，请致电 dataChangedFun(myStore);
