View Full Version : Ext.ux.grid.VarHeaders - short/normal/long column headers

21 Apr 2011, 4:50 AM
So finally I got around to port one of our smallest plugins to ExtJS 4.

The first version was created last year on request by a client, who wanted different text on a column header if the column is smaller or wider:


Here is the demo and download page (http://www.eekboom.de/VarHeaders.html)

Comments are welcome.

Some related ramblings on our new team blog: fit4dev (http://fit4dev.wordpress.com/2011/04/21/journey-to-ria-first-extjs-4-plugin/)

21 Apr 2011, 5:11 AM
hi stephen,

i like it!

best regards

21 Apr 2011, 9:29 AM
Very good.

6 May 2011, 2:02 AM
Hi Stephen,

I've tried using ext-4.0.0 and it does nothing (no errors in firebug also). Tried with ext-4.0-beta3 and it works as shown in the demo.

When comparing Container.js files located in src/grid/header/, it seems several events have been renamed from 'header...' to 'column...', e.g. 'headerresize' changed to 'columnresize' (among a dozen other changes) from beta 3 to release.

Far from being an expert in Ext, I suggest to change line

headerCt.on('headerresize', this.handleColumnHeaderResize, this);

(in VarHeader.js fn addListeners) to

headerCt.on('columnresize', this.handleColumnHeaderResize, this);

to make this work in 4.0.0 again.


(having a hard time understanding Ext4)

6 May 2011, 4:00 AM
Thanks a lot!

I was a little slow to check this with Ext 4 final.
I have updated the plugin page.

6 May 2011, 5:29 AM
I've tried to use the plugin on a grid with locked columns. This throws an error grid.headerCt is undefined in the init function. A grid with locked columns does not have a headerCt. Instead, it has two items that are gridpanels.

My workaround is to change the init routine:

init: function(grid) {
grid.headerCt.cascade(this.addListeners, this);
} else {
grid.items.items[0].headerCt.cascade(this.addListeners, this);
grid.items.items[1].headerCt.cascade(this.addListeners, this);

While this is working for me, I am not sure if this is the best way to do it.



7 May 2011, 11:38 AM
Good catch.
I updated the plugin and also added a small locked grid example to the demo page (http://eekboom.de/VarHeaders.html) to verify.

Additionally I noticed that the calculation was a few pixels off in 4.0.0 final. I fixed that, too.

Thanks for the feedback!

5 Jul 2012, 5:38 AM
I adjusted the handleColumnSortChange function a little bit, so it also updates the text of the last column you sorted by.

handleColumnSortChange: function(headerContainer, column, direction) {
if (this.lastSortColumn) {
this.lastSortColumn = column;

Also it would be nice if the text in the header menu would always be the longest version available. Currently it uses whatever text is present in the column headers at the time the menu is created.

5 Jul 2012, 5:57 AM
Ignore the menu thing, didn't know about menuText and used this in combination with an override.

Ext.define("Ext.override.grid.column.Column", {
override: "Ext.grid.column.Column",
initComponent: function() {
this.menuText = this.menuText || this.text;

10 Oct 2012, 9:02 AM

really good, easy plugin. Add a very cool "wow" factor to my grids.

Thank you =D>

31 Jan 2013, 7:07 AM
In blue, code needed to add support to the grid reconfigure event

init: function(grid) {
Ext.Array.forEach(grid.query('headercontainer'), this.initColumn, this);
grid.on('reconfigure', this.handleGridReconfigure, this);

handleGridReconfigure: function(grid){
Ext.Array.forEach(grid.query('headercontainer'), this.updateColumnTextIfNeeded, this);