ExtJS Grid with header action

Title: ExtJS Grid with header action

Summary: This article walks us through the steps to add the header action capability to the ExtJS GridPanel

Problem Statement: Many a times we need the capability on the ExtJS GridPanel where a user can see an action icon on the column header and on click of it the user can kick-off certain behavior in the system, as shown below. E.g. let us say, we have a grid where we are showing a list of parts and their prices. Now, some parts may be available but some may not. You want the user provide a filter icon on the Availability column so that when the user clicks on it, it will hide the parts which are not available, and clicking it again will show all the parts, again. Alternatively, you may want to provide a action on one of the columns to allow the user to add/remove all the items to their cart. There could be many practical needs where we may need a column header action functionality on the grid panel.

Prerequisites: Working knowledge of JavaScript, HTML, CSS, and ExtJS 3.x. Also, knowledge of how the Template/XTemplate work in ExtJS is required.

System Requirements: ExtJS 3.x, ExtJS 3.x compatible browser

Detail:

This is an overidden GridView plug-in to show the action icons in the column header and all the cells of a column. For the header action, this works on two column properties – enableHeaderAction and headerActionCls – to show the decide whether an action icon needs to be displayed or not and if it needs to be displayed, it uses the headerActionCls to show the icon.

When the user clicks on the action icon in the header, the plug-in fires – headeraction – event and passes the headeActionCls name to the handler so that that handler code can identify the icon which was clicked

Added the functionality to toggle the header action icons. This is driven by three additional properties
– toggleHeaderAction
– alternateHeaderActionCls
– alternateHeaderActionToolTip

This plug-in is compatible with the grid’s RowAction plug-in.

The implementation is based on overriding the GridView as shown below:

How it works:

Ext.grid.GridView is added to the GridPanel as a plugin, by default. It takes the complete responsibility of formatting the grid view and putting all the styles (e.g. apply different background for the alternate rows). In this solution, we have overridden the following methods of the base Ext.grid.GridView class:

1. init
2. initTemplates
3. renderHeaders

init is the main plug-in method which is called by the ExtJS framework to initialize a plug-in. We have modified this method to add the extra code to intercept the event to figure out whether the event has occurred on a header action. And, if so, it fires the headeraction event. While firing the event, we are passing the following to the event handler:
1. grid panel instance reference
2. CSS class name of the header action, which is clicked
3. column index
4. column object representing the column where the header action was clicked

In initTemplates, we have modified the hcell template where we have added the additional tags related to the header action, as shown below:

Here, we are adding an <img> tag if on the incoming column information, enableHeaderAction flag is true. headerActionText property on the column is set as the alternate text for the image whereas headerActionCls contains the style name, which has the image path in it. Additionally, headerActionToolTip property is used to show the tooltip for the corresponding header action icon.

Now that we have added the element to the tag, which can be rendered based on the properties value on a column, and also we have written the code in the init method to handle the click events on the header action, it is time to make the changes, which are required to pass the header action related properties to the grid view so that it can apply them on the modified hcell template to render the header action icon on a grid panel. To accomplish this, we modified renderHeaders method, where we are setting the properties on p, as shown below:

After the above code is executed, the additional header action related properties are set on the internal column object and will now be available to the hcell template and will show the icon that we would have specified as part of the headerActionCls.

After adding this override, now here is a sample usage of the properties showing how these properties can be specified to get the icons appearing on the header:

And, following code shows, how we can register our handler on the GridPanel for the headeraction event:

And, if we look at the CSS, following shall be the CSS defined, which we have used to set the values for headerActionCls property:

Following is a sample screen showing how the header actions will appear on the screen:

If you are reading this, I hope this article was useful to you and look forward to your feedback!