如何在ExtJS RowEditing的beforeedit监听中通过Ajax控制行编辑权限

ExtJS的RowEditing插件beforeedit监听器默认是同步执行的，直接用异步Ajax请求无法阻止编辑（函数会先返回默认的true），而返回Promise是官方支持的异步拦截方案，具体实现如下：

核心实现思路 #

• 让beforeedit监听器返回Ext.Promise对象，ExtJS会自动等待Promise的状态结果
• 将Ext.Ajax.request包装在Promise内部，根据后端接口返回的锁定状态决定Promise的resolve值：
  • resolve(true)：允许编辑
  • resolve(false)：阻止编辑

完整代码示例 #

plugins: {
    rowediting: {
        clicksToEdit: 1,
        listeners: {
            beforeedit: function(editor, context) {
                // 返回Promise对象
                return new Ext.Promise(function(resolve) {
                    Ext.Ajax.request({
                        url: '/api/check-row-lock', // 替换为你的行锁定检查接口
                        method: 'POST',
                        params: {
                            rowId: context.record.getId() // 传递当前行的唯一标识
                        },
                        success: function(response) {
                            var resData = Ext.decode(response.responseText);
                            // 根据后端返回的isLocked字段判断
                            if (resData.isLocked) {
                                Ext.Msg.alert('提示', '该行正在被其他用户编辑，无法修改');
                                resolve(false); // 阻止编辑
                            } else {
                                resolve(true); // 允许编辑
                            }
                        },
                        failure: function() {
                            Ext.Msg.alert('错误', '检查行锁定状态失败，请稍后重试');
                            resolve(false); // 请求失败时默认阻止编辑
                        }
                    });
                });
            }
        }
    }
}

优化体验：添加加载提示 #

在异步请求过程中，可以显示加载遮罩，避免用户重复操作：

beforeedit: function(editor, context) {
    var grid = context.grid;
    // 创建加载遮罩
    var loadMask = new Ext.LoadMask({
        target: grid,
        msg: '正在检查行状态...'
    });
    loadMask.show();

    return new Ext.Promise(function(resolve) {
        Ext.Ajax.request({
            url: '/api/check-row-lock',
            params: { rowId: context.record.getId() },
            success: function(response) {
                loadMask.hide();
                var resData = Ext.decode(response.responseText);
                if (resData.isLocked) {
                    Ext.Msg.alert('提示', '该行正在被其他用户编辑');
                    resolve(false);
                } else {
                    resolve(true);
                }
            },
            failure: function() {
                loadMask.hide();
                Ext.Msg.alert('错误', '检查状态失败');
                resolve(false);
            }
        });
    });
}

注意事项 #

• 确保后端接口返回标准JSON格式，例如：{"isLocked": true}或{"isLocked": false}
• Promise的reject不会直接影响编辑拦截，建议用resolve(false)统一处理阻止逻辑
• 低版本ExtJS可能需要额外引入Promise polyfill，ExtJS 6+原生支持Promise

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