如何在Grid中隐藏/显示特定CheckColumn单元格

你可以通过修改renderer函数，结合metaData控制单元格状态，同时覆盖默认的复选框渲染逻辑来实现需求：

{
   xtype: 'checkcolumn',
   renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
       if (record.data.hidden === true) {
           // 添加禁用样式阻止交互，返回空内容隐藏复选框
           metaData.tdCls += ' x-item-disabled';
           return '';
       } else {
           // 调用CheckColumn默认渲染器，正常显示复选框的选中状态
           return Ext.grid.column.CheckColumn.prototype.renderer.apply(this, arguments);
       }
    },
    itemId: 'mycheck',
    bind: {
        text: '{warranty}'
    }
}

关键细节说明： #

• 当record.data.hidden为true时，通过metaData.tdCls添加禁用样式，避免用户点击无意义的空白单元格，返回空字符串直接隐藏复选框
• 如果需要保留单元格占位（避免布局错位），可以把返回内容改成<div>&nbsp;</div>，同样搭配禁用样式
• 若要彻底拦截点击事件，可在Grid的beforecellclick事件中补充判断：

listeners: {
    beforecellclick: function(grid, td, cellIndex, record) {
        var checkCol = grid.down('#mycheck');
        if (cellIndex === checkCol.getIndex() && record.data.hidden) {
            return false; // 阻止当前单元格的点击事件
        }
    }
}

内容的提问来源于stack exchange，提问作者Tech-Maou