1. #1
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    239
    Vote Rating
    2
    stephen.friedrich will become famous soon enough

      1  

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

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


    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
    ExtJS 4 plugins:
    varheaders - short/normal/long column header
    clearbutton - mouseover clear button in text field
    Blog: fit4dev
    ExtJS User Group Hamburg

  2. #2
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,669
    Vote Rating
    110
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    hi stephen,

    i like it!


    best regards
    tobias
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  3. #3
    Sencha User
    Join Date
    Apr 2009
    Posts
    48
    Vote Rating
    0
    morfeusz is on a distinguished road

      0  

    Default


    Very good.

  4. #4
    Sencha User
    Join Date
    Jan 2008
    Posts
    10
    Vote Rating
    0
    ClausThaler is on a distinguished road

      0  

    Default Not working with 4.0.0 ?

    Not working with 4.0.0 ?


    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
    Code:
    headerCt.on('headerresize', this.handleColumnHeaderResize, this);
    (in VarHeader.js fn addListeners) to
    Code:
    headerCt.on('columnresize', this.handleColumnHeaderResize, this);
    to make this work in 4.0.0 again.


    Thx

    ClausT
    (having a hard time understanding Ext4)

  5. #5
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    239
    Vote Rating
    2
    stephen.friedrich will become famous soon enough

      0  

    Default


    Thanks a lot!

    I was a little slow to check this with Ext 4 final.
    I have updated the plugin page.
    ExtJS 4 plugins:
    varheaders - short/normal/long column header
    clearbutton - mouseover clear button in text field
    Blog: fit4dev
    ExtJS User Group Hamburg

  6. #6
    Sencha User
    Join Date
    Jan 2008
    Posts
    10
    Vote Rating
    0
    ClausThaler is on a distinguished road

      0  

    Default


    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:
    Code:
                       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

  7. #7
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    239
    Vote Rating
    2
    stephen.friedrich will become famous soon enough

      0  

    Default


    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!
    ExtJS 4 plugins:
    varheaders - short/normal/long column header
    clearbutton - mouseover clear button in text field
    Blog: fit4dev
    ExtJS User Group Hamburg

  8. #8
    Sencha User
    Join Date
    Oct 2007
    Posts
    21
    Vote Rating
    0
    Schlurcher is on a distinguished road

      0  

    Default


    I adjusted the handleColumnSortChange function a little bit, so it also updates the text of the last column you sorted by.

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

  9. #9
    Sencha User
    Join Date
    Oct 2007
    Posts
    21
    Vote Rating
    0
    Schlurcher is on a distinguished road

      0  

    Default


    Ignore the menu thing, didn't know about menuText and used this in combination with an override.
    Code:
    Ext.define("Ext.override.grid.column.Column", {    
        override: "Ext.grid.column.Column",
        initComponent: function() { 
            this.menuText = this.menuText || this.text;
            this.callParent();
        } 
    });

  10. #10
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Montréal, Canada
    Posts
    220
    Vote Rating
    5
    Christiand is on a distinguished road

      0  

    Default


    +1

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

    Thank you

Similar Threads

  1. How to show the tooltip of button with a long width but a short text?
    By zch_heero in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 24 May 2010, 10:52 PM
  2. grid column wrap normal but edit weird
    By huhulucy90 in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 1 Oct 2009, 11:11 PM
  3. Replies: 6
    Last Post: 22 Apr 2008, 11:11 PM

Thread Participants: 5

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi