ExtJS中如何阻止请求未完成时重复点击Action Column

这问题我之前做项目时也踩过坑，核心思路就是在请求发起时锁定当前点击的按钮，请求完成（无论成功失败）再解锁，结合ViewController的写法，给你两种靠谱的实现方案，按需选择：

方案1：基于记录（Record）的独立状态控制（推荐） #

这种方案会给当前点击行的记录添加临时状态，不会影响其他行的操作按钮，更灵活：

1. ViewController中的处理方法 #

Ext.define('YourApp.view.YourGridController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.yourgrid',

    onActionButtonClick: function(grid, rowIndex, colIndex, item, e, record, row) {
        // 检查当前记录是否有请求在进行中，有则直接返回
        if (record.get('isRequestInProgress')) {
            return;
        }

        // 获取当前点击的Action Column图标元素
        var btnEl = e.getTarget('.x-action-col-icon');
        
        // 给按钮添加禁用样式，阻止视觉上的重复点击
        btnEl.addCls('x-item-disabled');
        btnEl.set({ disabled: true });

        // 给当前记录标记请求中状态（临时属性，无需在Model定义）
        record.set('isRequestInProgress', true);

        // 发起Ajax请求
        Ext.Ajax.request({
            url: '/your/api/endpoint',
            params: {
                targetId: record.getId() // 传递当前行的业务参数
            },
            success: function(response) {
                // 这里写请求成功的逻辑，比如提示、刷新数据
                Ext.Msg.success('操作成功', '请求已处理完成');
                grid.getStore().reload();
            },
            failure: function(response) {
                // 请求失败的处理，比如错误提示
                Ext.Msg.error('操作失败', '服务器返回错误，请稍后重试');
            },
            callback: function(options, success, response) {
                // 无论请求成败，都要恢复按钮状态和记录标记
                record.set('isRequestInProgress', false);
                btnEl.removeCls('x-item-disabled');
                btnEl.set({ disabled: false });
            },
            scope: this // 确保回调中的this指向ViewController
        });
    }
});

2. 对应的Action Column配置 #

{
    xtype: 'actioncolumn',
    text: '操作',
    width: 60,
    items: [{
        icon: 'resources/icons/operation-icon.png', // 你的操作图标
        tooltip: '执行操作',
        handler: 'onActionButtonClick', // 绑定ViewController中的方法
        // 你已有的条件禁用逻辑（保留原代码即可）
        isDisabled: function(view, rowIndex, colIndex, item, record) {
            return record.get('status') === 'locked'; // 示例：状态为locked时禁用按钮
        }
    }]
}

方案2：全局状态控制（适合单按钮场景） #

如果你的Action Column只有一个按钮，且全局只允许同时处理一个请求，可以用ViewController的全局变量来控制：

Ext.define('YourApp.view.YourGridController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.yourgrid',

    // 全局标记是否有请求在进行
    isGlobalRequestPending: false,

    onActionButtonClick: function(grid, rowIndex, colIndex, item, e, record, row) {
        if (this.isGlobalRequestPending) {
            Ext.Msg.warning('提示', '当前有请求正在处理，请稍后再试');
            return;
        }

        var btnEl = e.getTarget('.x-action-col-icon');
        btnEl.addCls('x-item-disabled');
        btnEl.set({ disabled: true });

        this.isGlobalRequestPending = true;

        Ext.Ajax.request({
            url: '/your/api/endpoint',
            params: { targetId: record.getId() },
            success: function() { /* 成功逻辑 */ },
            failure: function() { /* 失败逻辑 */ },
            callback: function() {
                this.isGlobalRequestPending = false;
                btnEl.removeCls('x-item-disabled');
                btnEl.set({ disabled: false });
            },
            scope: this
        });
    }
});

额外优化：添加加载动画（提升用户体验） #

可以在请求过程中把按钮图标换成加载动画，让用户更直观感知：

// 在请求发起前保存原图标
var originalIcon = btnEl.getStyle('background-image');
btnEl.setStyle('background-image', 'url(resources/icons/loading.gif)');

// 在callback中恢复原图标
btnEl.setStyle('background-image', originalIcon);

关键注意点 #

• 一定要用callback而不是只在success/failure中恢复状态，避免因请求异常（比如网络中断）导致按钮一直处于禁用状态。
• 方案1的临时record属性无需在Model中定义，ExtJS支持动态给记录添加属性，且store reload后会自动清除。

内容的提问来源于stack exchange，提问作者Sweety