当一个事件仍在进行中时，如何禁止用户多次单击操作列extjs

Posted 2021-05-06

我有一个操作列，我在某些情况下禁用它并有一个处理程序来进行ajax调用。但我想限制用户或拨打多个电话，直到一个电话完成。我不希望用户在单击时双击该图标。

ViewController方法：

    processDone: function (record) {
    //debugger;
    var me = this;
    var detailRecs = me.getStore('WarrantyDetail').data.items;
    if (!Ext.isEmpty(record) && (detailRecs.length > 0)) {
        canProcess = false;
        Ext.Array.forEach(detailRecs, function (r) {
            if (r.data.facilityId == 9 || r.data.amount == 0 || 
         Ext.isEmpty(record.data.qeContact)) {
                canProcess = true;

            }
        });
        if (canProcess) {
            Ext.Msg.alert('Invalid detail line item ');
            return;
        }        
        var detailLineAmt = me.getStore('WarrantyDetail').sum('amount');
        detailLineAmt = Math.abs(detailLineAmt);
        var headerAmount = Math.abs(record.data.amount)
       //if (me.getStore('WarrantyDetail').sum('amount') > 

     Math.abs(record.data.amount)){
            if (detailLineAmt > headerAmount){//added to check for range
               Ext.Msg.alert('Sum of Detail Amount must not be more than `
            Header Amount ');`
            return;
        }

        Ext.Ajax.request({
            url: webContext + 'url',
            success: function (response) {
                me.getStore('WarrantyHeader').reload();
            },
            failure: function (response) {
                me.getStore('WarrantyHeader').reload();
            }
        });
        this.getViewModel().set('currentHeader', null);
    } else if (!Ext.isEmpty(record) && (detailRecs.length == 0)) {
        Ext.Msg.alert('Please add atleast one detail lineItem');
    }
}

行动专栏

if (this.showDone) {
Ext.Array.insert(this.columns, 0, [{
                xtype: 'actioncolumn',
                width: 30,
                minWidth: 30,
                resizable: false,
                menuDisabled: true,
                items: [{
                    icon: 'resources/images/icons/approve_icon.png', 
                    tooltip: 'Flag Record as Done',
                    stopSelection: false,

                    handler: function (tableview, rowIndex) {
                        var rec = tableview.grid.getStore().getAt(rowIndex);
                        if (rec.data.qualityDone) {
                            return;
                        }
                        if 
(!tableview.grid.getSelectionModel().isSelected(rec)) {
                            tableview.grid.getSelectionModel().select(rec);
                            Ext.Function.defer(function () {
                                tableview.grid.doDone(rec);
                            }, 250);
                        } else {
                            tableview.grid.doDone(rec);
                        }

                    },
                    isDisabled: function (view, rowIndex, colIndex, 
                item,record) {
                        var done = record.data.qualityDone;
                        if (FACTT.app.isQualityUser()) {
                            return done;
                        } else if (FACTT.app.isARUser() && done) {
                            return false;
                        } else {
                            return true;
                        }
                    }
                }],
                renderer: function (value, meta, record, row, column, store, 
                    view) {
                    /* To conditionally hide the icon specified in the icon 
                          config above. eg */
                    var colItem1 = meta.column.items[0],
                        imgPath = 'resources/images/icons';

                    if (!record.data.qualityDone) {

                        //colItem1.disabled = false;
                        if (!record.data.qualityDone && 
                       FACTT.app.isARUser()) {
                            colItem1.icon = imgPath + 
                                    '/padlock_unlockedgray.png';
                        } else {
                            colItem1.icon = imgPath + 
                            '/padlock_unlocked.png';
                            colItem1.tooltip = 'Click here to complete & 
                 submit the record to AR';
                        }
                    } else if (record.data.qualityDone && 
                  FACTT.app.isARUser()) {
                        colItem1.icon = imgPath + '/padlock_lockedblue.png';
                        colItem1.tooltip = 'Header record is Locked. Please 
                   click on the Detail record to create an adjustment';

                    } else {
                        colItem1.icon = imgPath + '/padlock_locked2.png';
                        colItem1.tooltip = 'Header record is Locked';

                    }

                }
            }

答案

在操作列中为您的记录设置一个标志属性，并在您的ajax返回响应时将其设置回默认值。当您想要调用ajax时，请检查该标志属性。例如，在您的操作列处理程序中：

handler: function (tableview, rowIndex) {
       var rec = tableview.grid.getStore().getAt(rowIndex);
       if(!rec.ajaxFlag){
            //call your ajax here...
            rec.ajaxFlag = true;
       } 
}

在你的ajax中这样做：

Ext.Ajax.request({
        url: webContext + 'url',
        success: function (response) {
            record.ajaxFlag = false;//set flag to false
        },
        failure: function (response) {
            record.ajaxFlag = false;//set flag to false
        }
});