ExtJS Grid面板actioncolumn无法按特定行隐藏/显示图标问题

问题原因 #

你自定义的图标类缺少ExtJS actioncolumn图标必备的基础样式属性：当你直接配置icon属性时，ExtJS会自动给元素加上x-action-col-icon类，自带宽高、背景对齐、行内展示等基础样式；用getClass返回自定义类时，你写的.showIcon没有补全这些基础属性，导致图标即使加载了也无法正常渲染显示。

另外你当前的.hideDisplay仅设置了背景为空，仍会占据actioncolumn的位置，属于冗余配置。

解决方案 #

方案1：保留现有getClass逻辑，补全CSS样式 #

修改你的样式文件，给自定义图标类加基础适配属性：

.showIcon{
    background: url('image.svg') no-repeat center center !important;
    width: 16px; /* 调整为你的图标实际尺寸 */
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer; /* 保留action图标默认的点击手势 */
}
.hideDisplay{
    display: none !important;
}

方案2：简化逻辑，复用原生icon配置（更推荐） #

不需要单独写显示类，直接保留原生icon配置，只在需要隐藏的时候返回隐藏类即可，代码修改量更小，也不会出现样式兼容问题：

JS配置修改：

this.columns = [{
    xtype: 'actioncolumn',
    itemId:'invalid_icon',
    sortable: false,
    menuDisabled: true,
    cls:'table_invalid_icon',
    width: 70,
    items: [{
        icon: 'image.svg', // 保留原注释的icon配置
        getClass: function(Value, metaData, record){
            // 不符合显示条件时返回隐藏类，符合条件返回空即可用原生样式
            return record.data.name !== 'test' ? "hideDisplay" : "";
        }
    }]
}]

对应CSS简化为：

.hideDisplay{
    display: none !important;
}

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