remove action column icon but keeping column visible

Question

I have an action column definition on a tree-grid panel, I want to hide on folders the action icon but show in leaf nodes different icons, I'm successfully doing it, but, when I apply the 'x-hide-display' style I also notice that the column itself its being hidden, I just want to show the icons inside each columns. thanks

    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

This helped me:

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

Answer 2

Its very simple, instead of adding x-hide-display add your own css class:

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

That's all. We added img because you only want to hide the image icon not to also hide the cell itself, if you don't add img when you pass the mouse over the row you will notice that the hidden cell won't change the grey background color.