Say goodbye to renderers and homemade dom insertions to get row level actions in a grid cell, there’s an xtype in extjs 4 that saves time and code. Although this field type has been available since version 3.3, I for one put off diving into the use of this feature as I waited patiently for version 4 and patched my pre 3.3 applications that used renderers to accomplish the same thing, albeit with much more code. The xtype ‘actioncolumn’ adds icons to a column; and these icons each contain a handler with references to the column, row index, and grid object. Just this makes it really handy, but couple that with the getClass function that acts as a renderer on the column and you have a real code saving object! The example grid below will answer the following common action column questions (just click on the lock icon to see it in action, then read further to find out how).

Can I show and hide icons based on a condition in the grid data?

Yes, you can switch icons and hide / show icons based on values in your grid. Inside the getClass function of the action column you can set the the css that will be applied to the action item icon.

The getClass function that controls the locked and unlocked icons is below. There is a boolean value in the closed column that is evaluated for each row. The built in extjs class x-hide-display will remove the icon from a grid cell.

getClass: function(value,metadata,record){
var closed = record.get('closed');
if (closed == 0 ) {
    return 'x-hide-display';	
} else {
    return 'x-grid-center-icon';								
}
}

Can I programmatically switch icons in the action column?

Sure just click on one of the locks above, you can easily change between unlocked and locked icons by committing the new value in closed to the store in your handler. Since you have placed the logic in the getClass function it acts as a renderer and the view is refreshed when the store is updated. The code to commit the new closed value to the store is below.

handler: function(grid, rowIndex, colIndex) {
    var rec = grid.getStore().getAt(rowIndex);
    grid.getSelectionModel().select(rowIndex);
    grid.removeRowCls(grid.getNode(rowIndex),'line-through');
   // This is the line that does the trick
    grid.getStore().getAt(rowIndex).set('closed', 0);									
},

When I click on the icon it fires the action item handler and not the row selection action?

I noticed that too, just add the following line in your action item handler to select the row:

 grid.getSelectionModel().select(rowIndex);

How do I center icons in the action column, and how can I change the cursor?.

Ok, first you will need to add a css class in your main css file so that you may apply it to the icon in the action column. The following class will center the icons and preserve the cursor. You can see from the answer to the first question that we applied the class below in the getClass function.

.x-grid-center-icon{
   display:block; 
   margin:0 auto; 
   text-align:center;
   cursor:hand;
}

This should get you started with the actioncolumn.