Question

我有一个编辑网格，当我按下提交按钮时，它会将总数添加到Amount Due字段，然后被禁用（这是一件好事）。我的问题是，每次按下添加按钮创建新记录时，我都无法重新激活提交按钮。

我的问题在于网格的监听器。这是正确的方法吗？如果您知道更好的方法，请告诉我。这是我的代码：

var iLineItemGrid = new Ext.grid.EditorGridPanel({
    id: 'iLineItemStore',
    store: iLineItemStore,
    cm: iLineItemCM,
    cls: 'iLineItemGrid',
    width: 'auto',
    height: 'auto',
    frame: true,
    //title:'Edit Plants?',
    //plugins:checkColumn,
    clicksToEdit: 1,
    viewConfig: {
        //forceFit: true
        autoFit: true
    },
    //new
    listeners: {
        edit: function (editor, edit) {
            var form = edit.grid.up('form'),
                button = form.down('button[text=Submit]');

            // enable the button after the grid is edited
            button.setDisabled(false);
        }
    },

    tbar: [{
        text: 'Add',
        tooltip: 'Add the line item',
        handler: function () {
            var r = new iLineItemRec({
                i_line_item_name: '',
                i_line_item_amt: ''
            });
            iLineItemGrid.stopEditing();
            iLineItemStore.insert(0, r);
            iLineItemGrid.startEditing(0, 0);
        },
        //Should this be scope:this or scope:iLineItemGrid?
        scope: this
    }, {
        text: 'Delete',
        tooltip: 'Remove the selected line item',
        handler: function () {
            iLineItemGrid.stopEditing();
            var r = iLineItemGrid.getSelectionModel().getSelectedCell();
            iLineItemStore.removeAt(r[1]);
        },
        //     handler: function(){
        //       iLineItemGrid.stopEditing();
        //       var r = iLineItemGrid.getSelectionModel().getSelected();
        //       iLineItemStore.removeAt(r[0]); }
        //  },

        //Should this be scope:this or scope:iLineItemGrid?
        scope: this
    },

           {
               xtype: 'tbfill'
           },

           {
               text: 'Submit',
               tooltip: 'Submit the line item',
               //new
               //disabled: true,
               handler: function () {
                   iLineItemGrid.stopEditing();
                   // Will this code save changes to the database?
                   //iLineItemGrid.getStore().commitChanges();
                   iLineItemStore.commitChanges();

                   var iAmountTotalForLineItems = 0;
                   var iAmountInDueField = Ext.getCmp('iAmountDue').value;
                   var tempTotal = 0;
                   var result = 0;
                   iLineItemStore.each(function (addAmount) {
                       iAmountTotalForLineItems += addAmount.get('i_line_item_amt');

                   });

                   alert('1 iAmountInDueField: ' + iAmountInDueField + ' iLineItemTotalHold: ' + iLineItemTotalHold + ' iAmountTotalForLineItems: ' + iAmountTotalForLineItems);
                   if (iLineItemTotalHold > iAmountTotalForLineItems) {
                       alert('if');
                       tempTotal = iLineItemTotalHold - iAmountTotalForLineItems;
                       result = iAmountInDueField - tempTotal;
                       alert('two: ' + result + ' = ' + iAmountInDueField + ' + ' + tempTotal);

                   } else if (iLineItemTotalHold < iAmountTotalForLineItems) {
                       alert('if2');
                       tempTotal = iAmountTotalForLineItems - iLineItemTotalHold;
                       result = iAmountInDueField + tempTotal;
                       alert('3: ' + result + ' = ' + iAmountInDueField + ' - ' + tempTotal);
                   }

                   iLineItemTotalHold = iAmountTotalForLineItems;

                   Ext.getCmp('iAmountDue').setValue(result);
                   this.setDisabled(true);
               }
               //scope:this
           }

          ]

});

Answer 1

首先，您需要为“提交”按钮分配唯一的ID。您可以使用id属性。

然后在“添加”按钮的处理程序中，添加以下行以重新激活提交按钮。

Ext.getCmp('submit_button_id_goes_here').setDisabled(false);

Answer 2

小心id。如果您打开两个具有相同ID的表单，则会遇到问题。我会为按钮或动作设置名称：

提交按钮：

 {
        text: 'Submit',
        tooltip:'Submit the line item',
        action: 'submit',
        // Your other stuff...
 }

添加按钮：

{
        text: 'Add',
        tooltip:'Add the line item',
        handler : function(){
            var r = new iLineItemRec({
                i_line_item_name: '',
                i_line_item_amt: ''
            });
            iLineItemGrid.stopEditing();
            iLineItemStore.insert(0, r);
            iLineItemGrid.startEditing(0, 0);
            iLineItemGrid.down('button[action=submit]').setDisabled(false);
        },
        //The scope here depends on what you want the 'this' variable to be in your handler. 
        //If you want it to be the grid then give iLineItemsGrid, if you want it to be the button you don't have to give a scope. 
        //But scope: this is dangerous because the this in your case is not the grid
        scope:iLineItemsGrid
}

编辑器网格面板的按钮（监听器）问题

2 个答案: