A popular user extension to ExtJS, Ext.tree.ColumnTree (originally just a demo), suffers from a few lacking features.  These features include:

  • Header isn't anchored at the top
  • Cannot resize column width
  • Cannot reorder columns
  • Cannot click headers for sortability

Because all of these features are found in the GridPanel, people have grown to love these features, and thus expect them in any column-based data layout.  There is a user extension named TreeGrid, rumored to be adopted as a part of the Ext widget library, that provides these features.  However, the extension is currently a little immature, and is more geared to being a Grid than it is to being a Tree (if that makes any sense?).  So in the meantime, while it's being matured, I extended the ColumnTree to at least have an anchored column header bar, and will perhaps add the other features in the near future.

Another small edition is that I have added the xtype registration of 'columntreepanel', so you can create the ColumnTree via an xtype config object, rather than its constructor.

ux-columnnodeui.js (4.46 kb)