Question

我有一个GridPanel，在工具栏中我有两个按钮“Reject Changes”和“Save Changes”。下面的代码显示了每个按钮的作用，并且到目前为止工作正常。

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

    ...

});

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

Answer 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
}

...

Answer 2

Ext.data.Store datachanged（this，eOpts）。只要存储中的记录以某种方式发生更改，就会触发 - 这可能包括添加或删除记录，或更新现有记录中的数据 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);

ExtJS：检测网格数据变化的Grid Panel事件是什么

2 个答案: