Integration of ColumnHeaderGroup and LockingGridView ExtJS plug-ins

ExtJS official site provides different plug-ins for achieving grid column grouping & freeze pane locking functionality (similar to excel).

We tried to find if any plug-in which provides both the functionality are available. We searched in Ext forums and in other ExtJS related portals also. But we couldn’t. So, finally WALKING TREE has taken a decision to come up with a plug in that provides both the functionalities.

The existing column header grouping plug-in XTemplate generates one table for each level of column headers. As this approach is not suitable while differentiating locked headers and unlocked headers, while merging the plug-ins, the XTemplate has been modified to generate only one table, which contains one row for each level of column headers.

And also, the master template has been modified as below

Before modification

After modification

Here the changes related to column rendering ends.

Now about rendering rows.

doRender() has been modified to logically split the cells of locked columns and unlocked columns. The logic behind this method has been explained in the below diagram

On each event of lock / unlock of a column, based on the column index all the non-group headers locked property would be set appropriately. And columnlockchange event would be fired, which in turn invokes the refresh() method.

After locking Europe column

Any comments on this blog are welcome. And walking tree will try to fix the reported bugs. Finally, we thank all the ExtJS contributors for their continuous support.

Posted in Sencha ExtJS
13 comments on “Integration of ColumnHeaderGroup and LockingGridView ExtJS plug-ins
  1. Phani Kiran G says:

    Hi Manish,
    The tab event and enter event will not work from locked columns to normal columns.

  2. Manish pandit says:

    Does Tab and Enter Event will work from locked to normal columns ?

  3. wkim says:

    how can i buy this and how much is it?

  4. Arif Shaikh says:


    What is the cost to buy this component ?


  5. Walking Tree says:

    Walking Tree has further enhanced this module and fixed few issues. Here is the list of fixes / enhancements
    1) when trying to hide second group / column its adjacent column used to hide.
    2) When trying to hide the column / group adjacent to the locked column the data part used to overlap with the locked one. This was making the data unreadable.
    3) When resizing the columns the alignment was getting disturbed.
    4) When the user was trying to lock the group which may not fit in the visible area then it used lock the group. However, there was no scroll bar to view the unlocked part of the grid.
    5) Enhancement were made to enable sorting as well

    Overall the changes makes this component even more useful and this enables user to view data more effectively.

  6. Hans says:

    Ehm.. my exact requirement.. let’s see. I want to use it freely across and entire project. So there’s no example for what kind of grid i want to use. I simply want to lock a few columns and want to enable header grouping.

  7. Hans says:

    is there a possibility to buy it from you?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: