Ext.ux.grid.VarHeaders - short/normal/long column headers

[stephen.friedrich]

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:

varheaders.png

Here is the demo and download page

Comments are welcome.

Some related ramblings on our new team blog: fit4dev

[tobiu]

hi stephen,

i like it!


best regards
tobias

[morfeusz]

Very good.

[ClausThaler]

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.


Thx

ClausT
(having a hard time understanding Ext4)

[stephen.friedrich]

Thanks a lot!

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

[ClausThaler]

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) {
                       if(grid.headerCt){
                           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.

Thx

ClausT

[stephen.friedrich]

Good catch.
I updated the plugin and also added a small locked grid example to the demo page 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!

[Schlurcher]

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) {
   this.updateColumnTextIfNeeded(column);
   if (this.lastSortColumn) {
       this.updateColumnTextIfNeeded(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.

[Schlurcher]

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;
        this.callParent();
    } 
});

[Christiand]

+1

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

Thank you