删除操作列图标但保持列可见

Question

我在树状网格面板上有一个动作列定义，我想在文件夹中隐藏动作图标，但在叶子节点中显示不同的图标，我成功地做了，但是，当我应用 'x-hide-display'样式我还注意到列本身被隐藏了，我只想在每列中显示图标。 感谢

    this.columns = [{
            xtype: 'treecolumn', //this is so we know which column will show the tree
            text: 'Folder',
            flex: 1,
            sortable: true,
            dataIndex: 'folder'
        },{
            text: '',
            width: 20,
            menuDisabled: true,
            xtype: 'actioncolumn',
            tooltip: 'View Chats',
            align: 'center',
            items:[{
                icon: 'resources/images/comment.png',
                getClass: function(value, metaData, record){
                    if(record.raw.leaf)
                        metaData.css = 'x-grid-icon'
                    else
                        metaData.css = 'x-hide-display';
                }
            }]
        },{
            text: '',
            width: 20,
            menuDisabled: true,
            xtype: 'actioncolumn',
            tooltip: 'View Alerts',
            align: 'center',
            items:[{
                icon: 'resources/images/alert.png',
                getClass: function(value, metaData, record){
                    if(record.raw.leaf)
                        metaData.css = 'x-grid-icon'
                    else
                        metaData.css = 'x-hide-display';
                }
            }]
        },{
            text: '',
            width: 20,
            menuDisabled: true,
            xtype: 'actioncolumn',
            tooltip: 'Favorite',
            align: 'center',
            items:[{
                icon: 'resources/images/favorites.png',
                getClass: function(value, metaData, record){
                    if(!record.raw.leaf)
                        metaData.css = 'x-grid-icon'
                    else
                        metaData.css = 'x-hide-display';
                }
            }]
        },{
            text: '',
            width: 20,
            menuDisabled: true,
            xtype: 'actioncolumn',
            tooltip: 'Share',
            align: 'center',
            items:[{
                icon: 'resources/images/share.png',
                getClass: function(value, metaData, record){
                    if(!record.raw.leaf)
                        metaData.css = 'x-grid-icon'
                    else
                        metaData.css = 'x-hide-display';
                }
            }]
        }]

Answer 1

它很简单，而不是添加x-hide-display添加你自己的css类：

.hide-icon img{ visibility: hidden !important }

这就是全部。 我们添加了img，因为你只想隐藏图像图标而不是隐藏单元格本身，如果在鼠标悬停在行上时没有添加img，你会发现隐藏的单元格不会改变灰色背景颜色

Answer 2

这对我有所帮助：

if(!record.raw.leaf){
  return 'x-grid-icon';
}else{
  return 'x-hidden';
}