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
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.