ExtJS - Show/Hide icon or image from the grid

If you are providing edit/delete options on the extjs grid and wants to show/hide or enable/disable the image on particular action. i.e. if records state is particular in that case you want to restrict the user to click on the link etc.

Above is sample where we are showing the lock symbol for certain type of columns based on the indicator in the record we can lock and others are read-write

Two options -

1. Renderer to the column.

  {
                    align: 'right',
                    dataIndex: 'delete',
                    header: 'Delete',
                    sortable: true,
                    width: 25,
                    renderer: function(Value, metaData, record, rowIndex, colIndex, store){
                    if(!Ext.isEmpty(record.data.locked))
                                 metaData.css = 'x-hide';
                    else
                                  metaData.css = 'x-grid-icon'
                   }
}

Here you can define the stylesheet accordingly which takes care of whats beeing displayed on the columns.

2. Action Column.

ExtJS column panel > actioncolumn, here you have getClass where you can return the class directly and it will take care of the rest.

  {
                 xtype: 'actioncolumn',
                 align: 'right',
                 dataIndex: 'remove',
                 width: 25,
                 items:[
                 {
                        icon: 'img/delete.gif',
                        id: 'delimg',

                       getClass: function(Value, metaData, record){
                                  if(!Ext.isEmpty(record.data.locked))
                                       metaData.css = 'x-hide-display';
                                  else
                                      metaData.css = 'x-grid-icon'
               }
}

Here pretty much the concept is same, the only change is you can directly use getClass instead of doing something in renderer. though important thing is performance and placement of the column for the row where it will be used.

Please comment below if any question.