ExtJS中Grid网格如何根据行状态动态显示启用/禁用右键Context menu项

你需要先给Grid绑定itemcontextmenu右键点击事件，在事件触发时拿到当前选中行的数据集（Record），读取enabled字段的状态后，动态更新右键菜单的对应选项文本和处理逻辑，再弹出菜单即可。

1. 绑定Grid右键事件获取行状态 #

给你的Grid组件添加itemcontextmenu事件监听，回调中可以直接拿到当前点击行的Record对象，读取enabled字段就可以获得行的启用状态：

yourGrid.on('itemcontextmenu', function (grid, record, item, index, e) {
    // 阻止浏览器默认右键菜单
    e.stopEvent();
    // 获取当前行启用状态，true=启用，false=禁用
    const isEnabled = record.get('enabled');
    
    // 更新右键菜单的切换选项
    updateContextMenu(isEnabled, record);
    
    // 弹出右键菜单
    contextMenu.showAt(e.getXY());
});

2. 动态更新右键菜单的切换项 #

你可以在创建上下文菜单时预留切换项的引用，每次右键触发时根据行状态更新它的文本和点击回调：

// 先声明切换项变量，方便后续更新
let toggleItem = {
    text: '',
    handler: Ext.emptyFn
};

// 创建上下文菜单
var contextMenu = Ext.create('Ext.menu.Menu', {
    controller: 'sites',
    width: 250,
    plain: true,
    items: [
        toggleItem, // 可根据需求调整切换项和Delete项的顺序
        {
            text: 'Delete',
            handler: function () {
                // 保留原有Delete逻辑
            }
        }
    ]
});

// 实现更新菜单的方法
function updateContextMenu(isEnabled, record) {
    if (isEnabled) {
        // 当前行是启用状态，显示禁用选项
        toggleItem.text = 'Disable';
        toggleItem.handler = function () {
            // 你的禁用行逻辑，比如调用接口修改状态、刷新Grid等
            record.set('enabled', false);
            record.save(); // 如配置了REST代理可直接调用保存方法
        }
    } else {
        // 当前行是禁用状态，显示启用选项
        toggleItem.text = 'Enable';
        toggleItem.handler = function () {
            // 你的启用行逻辑
            record.set('enabled', true);
            record.save();
        }
    }
    // 刷新菜单视图
    contextMenu.update();
}

如果你的Grid支持多选，只需要把处理逻辑里的record替换为grid.getSelection()遍历所有选中行即可实现批量切换状态。

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