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.

ExtJS - Performance Tuning - Multiple inserts in grid

- Copying the rows from the grid and inserting into same grid at position 0
- Copying or inserting rows at any location

While inserting the rows basically one will use below logic -

//r is record in below
foreach(..)
{
  r = ... store.insert(0, r);
}

however as you want to insert multiple rows in the grid, you are inserting rows into the store. Which will end up putting rows in the grid. You are missing one thing here, on each insert into the store, your grid will keep getting refreshed, which will end up in major delay in insert and performance glitch.

In order to have a quick/clean insert into the store, suspend the event on the store

store.suspendEvents(true);

//insert record in the store

store.resumeEvents();

It improves a performance, as grid is no longer getting refresh with each insert of row in the store.

You can perform the suspend at multiple places while doing calculations or validation on the grid, best thing to find out about this kind of performance issue is run the profiler, or perf. tuner while running the code. and find out which methods or events keep getting called.