5

私は GridPanel を持っており、ツールバーには「変更を拒否」と「変更を保存」という 2 つのボタンがあります。以下のコードは各ボタンの機能を示しており、これまでのところ期待どおりに機能しています。

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

    ...

});

グリッド データがユーザーによって変更された場合にのみ、ボタン (またはその他のアクション) を有効/無効にする方法は? つまり、グリッドの行/フィールドがダーティになった場合 (およびその逆) のみですか? コードはどのリスナーをリッスンする必要がありますか?

4

2 に答える 2

4

質問に示されているように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
}

...
于 2012-12-03T14:02:33.777 に答える
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);

于 2012-12-01T22:23:13.613 に答える