Ext JS 6.5 Modern Grid组件禁用功能失效求助

我帮你搞定这个问题！在Ext JS 6.5的Modern版本里，grid组件本身并没有disabled配置项或者disable()方法——这就是你之前尝试无效的核心原因。Modern和Classic版本的组件API差异不小，这点很容易踩坑。

下面给你几个实用的解决方案，根据你的需求选就行：

方案1：用遮罩完全禁用交互（推荐） #

如果只是想让用户能看到表格但不能操作，给Grid加个遮罩是最直接的方式，还能给用户提示：

// 替换成你的实际权限判断逻辑
const isAuthorized = false; 

Ext.create({
    xtype: 'grid',
    store: 'gridStore',
    columns: [{ text: 'Name', dataIndex: 'name' }],
    listeners: {
        afterrender: function(grid) {
            if (!isAuthorized) {
                // 添加遮罩，阻止所有交互
                grid.setMasked({
                    xtype: 'loadmask',
                    message: '您没有权限操作此表格'
                });
                // 如果连查看都不想让用户看到，直接隐藏Grid即可
                // grid.hide();
            }
        }
    }
});

方案2：精细化禁用交互元素 #

如果需要更细粒度的控制（比如允许查看但禁用排序、编辑、选择等），可以逐个关闭Grid的交互属性：

const isAuthorized = false;

Ext.create({
    xtype: 'grid',
    store: 'gridStore',
    columns: [{ text: 'Name', dataIndex: 'name' }],
    // 禁用列排序
    sortableColumns: isAuthorized,
    // 禁用单元格编辑（如果开启了编辑功能）
    editable: isAuthorized,
    // 禁用行选择（如果用了选择模型）
    selectable: isAuthorized ? { mode: 'single' } : false,
    // 同步禁用工具栏按钮（如果有）
    tbar: [{
        text: '新增',
        disabled: !isAuthorized
    }, {
        text: '删除',
        disabled: !isAuthorized
    }]
});

方案3：无权限时不渲染Grid #

如果用户完全没有查看权限，干脆就不创建Grid，换成提示组件：

const isAuthorized = false;

if (isAuthorized) {
    // 有权限才创建Grid
    Ext.create({
        xtype: 'grid',
        store: 'gridStore',
        columns: [{ text: 'Name', dataIndex: 'name' }]
    });
} else {
    // 无权限时显示提示面板
    Ext.create({
        xtype: 'panel',
        padding: 20,
        html: '<div style="text-align:center;">您没有权限查看此表格</div>'
    });
}

小提醒 #

Modern版的组件设计更偏向移动端场景，很多Classic版的配置（比如disabled）在Modern里是不存在的，开发时一定要对照Modern专属的API文档哦。

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