ExtJS：检测网格数据更改的网格面板事件是啥

Posted 2023-02-26

【中文标题】ExtJS：检测网格数据更改的网格面板事件是啥

【英文标题】：ExtJS: What is the Grid Panel event to detect grid data changedExtJS：检测网格数据更改的网格面板事件是什么

【发布时间】：2012-12-01 17:13:10

【问题描述】：

我有一个 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);
    

    ...

);

如何启用/禁用按钮（或任何其他操作）只有在用户修改了网格数据时？ IE。仅当任何网格行/字段变脏时（反之亦然）？我的代码应该监听哪个监听器？

【参考方案1】：

如问题所示，网格中有一个CellEditing 插件。通过侦听 CellEditing 插件的 validateedit 事件（当网格中的数据发生更改时会触发该事件），可以使用该事件的参数使用 Model 实例的 set 函数更新存储的行。当然，在完成所需的验证之后。代码根据getModifiedrecords 返回的内容决定是否启用/禁用按钮。

代码：

...

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)。 每当 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);

当您手动更改商店的记录时，请致电dataChangedFun(myStore);

【讨论】：

感谢您的回复；我试着听datachanged。但是当我更改网格中的数据，并因此通过set() 手动更改商店的记录（Ext.data.Model 类型），然后通过commit()，此事件仍未触发：/

我没有盲目复制你的代码示例，因为我上面的代码结构是为了交流而简化的。找到另一个解决方案；吃完东西后会用答案更新这个问题；无论如何，谢谢，+1ed :)