ExtJS 6.5.3 Modern：当其他列值为空时隐藏CheckColumn的CheckCell问题

我懂你遇到的痛点——Modern版的CheckColumn用的是Ext.grid.cell.Check而非默认单元格组件，所以常规的renderer配置确实完全不起作用。要实现当somethingElse字段为null时隐藏复选框单元格，我们得从CheckColumn的底层单元格组件入手，直接控制它的显示逻辑。

这里有两种实用方案，你可以根据项目需求选择：

方案一：自定义可复用的CheckCell组件（推荐） #

先创建一个自定义的CheckCell类，重写updateRecord方法来判断关联字段的值，进而控制单元格的显示状态：

Ext.define('YourApp.view.grid.cell.CustomCheckCell', {
    extend: 'Ext.grid.cell.Check',
    alias: 'widget.customcheckcell',

    updateRecord: function(record) {
        // 先执行父类逻辑，确保复选框的初始状态正常加载
        this.callParent(arguments);
        
        // 获取关联字段的值
        const somethingElse = record.get('somethingElse');
        // 当somethingElse为null时隐藏整个单元格元素
        this.element.setDisplayed(somethingElse !== null);
    }
});

然后在你的CheckColumn配置中指定使用这个自定义单元格：

{
    xtype: 'checkcolumn',
    dataIndex: 'isSomething',
    text: '',
    width: 30,
    menuDisabled: true,
    headerCheckbox: false,
    cell: {
        xtype: 'customcheckcell' // 绑定自定义单元格类型
    }
}

方案二：直接在CheckColumn内配置单元格逻辑（快速实现） #

如果这个逻辑只在当前列使用，也可以不用单独定义类，直接在cell配置里重写方法：

{
    xtype: 'checkcolumn',
    dataIndex: 'isSomething',
    text: '',
    width: 30,
    menuDisabled: true,
    headerCheckbox: false,
    cell: {
        xtype: 'checkcell',
        updateRecord: function(record) {
            this.callParent(arguments);
            const somethingElse = record.get('somethingElse');
            this.element.setDisplayed(somethingElse !== null);
        }
    }
}

逻辑说明 #

updateRecord方法会在单元格绑定的记录更新时触发——不管是表格初始加载数据，还是后续记录数据发生变更，都会执行这个逻辑。通过this.element.setDisplayed()可以直接控制整个单元格DOM的显示/隐藏，完美实现你要的动态隐藏效果。

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