1. #1
    Sencha User BitPoet's Avatar
    Join Date
    Sep 2008
    Location
    Bavaria
    Posts
    277
    Vote Rating
    1
    BitPoet is on a distinguished road

      0  

    Default [2.2] Ext.ux.plugins.grid.stripeCols

    [2.2] Ext.ux.plugins.grid.stripeCols


    Seeing that cell borders aren't supported with Ext 2.x anymore, I found it hard to keep my eyes on the right column in long grids. Adding borders and keeping header alignment turned out to be pure hell, so I toyed around to add a stripeCols option similar to the builtin stripeRows one and made a small plugin (just a few lines in fact) that does the trick for me:

    Code:
    Ext.ns('Ext.ux.plugins.grid');
    
    Ext.ux.plugins.grid.stripeCols = Ext.extend( Ext.util.Observable, {
        init:        function(grid) {
            grid.getView().afterRender = grid.getView().afterRender.createSequence( this.setCss );
            grid.getView().on('rowsinserted', this.setCss.createDelegate(grid.getView()));
            grid.getView().on('rowremoved', this.setCss.createDelegate(grid.getView()));
            grid.getColumnModel().on('columnmoved', this.setCss.createDelegate(grid.getView()));
            grid.getColumnModel().on('hiddenchange', this.setCss.createDelegate(grid.getView()));
            grid.getView().on('refresh', this.setCss.createDelegate(grid.getView()));
        }
        ,setCss:    function() {
            for(var j = 0; j < this.grid.getStore().getCount(); j++) {
                var markop = 1;
                var r = this.getRow(j);
                if( r ) {
                    for(var i = 0; i < this.grid.getColumnModel().getColumnCount(); i++) {
                        var c = this.getCell(j,i);
                        if( this.grid.stripeCols && i % 2 == markop  && ( ! this.grid.excludeCStripe || this.grid.excludeCStripe.indexOf(this.grid.getColumnModel().getDataIndex(i)) == -1 ) ) {
                            if( this.grid.getColumnModel().isHidden(i) || this.grid.skipCStripe && this.grid.skipCStripe.indexOf(this.grid.getColumnModel().getDataIndex(i)) != -1 )
                            {
                                markop ^= 1;
                            } else {
                                if( Ext.Element.get(c) ) {
                                    Ext.Element.get(c).addClass('x-grid3-col-alt');
                                }
                            }
                        } else {
                            if( Ext.Element.get(c) ) {
                                Ext.Element.get(c).removeClass('x-grid3-col-alt');
                            }
                        }
                    }
                }
            }
        }
    });
    Now all that is left is to set the corresponding css class for .x-grid3-col-alt (and in case you're using stripeRows at the same time, also for .x-grid3-row-alt .x-grid3-col-alt):

    Code:
    <style type="text/css">
    .x-grid3-col-alt {
        background-color:#fafafa !important;
    }
    .x-grid3-row-alt .x-grid3-col-alt {
        background-color:#eaeaea !important;
    }
    /* Optionally, you can also override the styles for hovered/selected rows */
    .x-grid3-row-over .x-grid3-col-alt {
        background: #e0e0e0 url(../images/default/grid/row-over.gif) repeat-x left top !important;
    }
    .x-grid3-row-selected .x-grid3-col-alt {
        background: #d0d0f0 !important;
        border:1px dotted #d0d0df0;
    }
    </style>
    To use it, simply define your grid like the following:

    Code:
    new Ext.grid.GridPanel({
       ...usual grid config options...
       ,stripeCols: true
       ,excludeCStripe: ['f3']
       ,skipCStripe: ['f6']
       ,plugins: [ new Ext.ux.plugins.grid.stripeCols() ]
       ...usual grid config options...
    });
    Online Example: http://www.chrwinter.de/app/stripeCols.html

    Additional config options:
    You can exclude columns from being striped by specifying those columns' dataIndexes to exclude in the grid's 'excludeCStripe' array in the grid config. Other columns' striping is not affected by this option.


    Or you can skip individual columns by listing them in the 'skipCStripe' array, then striping continues with the next column.


    Changes:
    v1.02: (2009-04-02) Add hover/select styles to CSS examples
    v1.03: (2009-04-04) Added excludeCStripe / skipCStripe config options
    v1.04: (2009-04-04) Plugin now also honors column move/hide/unhide [thx tobiu]

    News:
    yyogev has adapted the code for ExtJS 4, you can find it here.
    Last edited by BitPoet; 22 Dec 2011 at 9:50 PM. Reason: Link to ExtJS 4 version

  2. #2
    Sencha User BitPoet's Avatar
    Join Date
    Sep 2008
    Location
    Bavaria
    Posts
    277
    Vote Rating
    1
    BitPoet is on a distinguished road

      0  

    Default


    Update (v1.03): New config options to exclude/skip columns from striping

  3. #3
    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 BitPoet,

    i just took a look at your online-demo.
    when exchanging columns via drag and drop,
    the color of each column has to be recalculated or it is no longer guaranteed, that the colors are different for each column to their neighbors.


    kind regards,
    tobiu

  4. #4
    Sencha User BitPoet's Avatar
    Join Date
    Sep 2008
    Location
    Bavaria
    Posts
    277
    Vote Rating
    1
    BitPoet is on a distinguished road

      0  

    Default


    Thanks for the feedback, tobiu. The plugin now also listens to columnmove and hiddenchange events to recalculate striping and generally checks for hidden columns.

  5. #5
    Ext User NBRed5's Avatar
    Join Date
    May 2007
    Location
    Norfolk, England, United Kingdom
    Posts
    82
    Vote Rating
    0
    NBRed5 is on a distinguished road

      0  

    Default


    Great extension, I don't have any particular uses for it at the moment although I can see it's potential.

    Possible other uses could be to highlight the sorted by column in a sorted grid. Have you thought of integrating that functionality.

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


    its working nice now!

    you should tell the others in the top-posting, that you are using

    Code:
    skipCStripe:	['f3'],
    excludeCStripe:	['f6']
    in the show-case.

    good job,
    tobiu

  7. #7
    Sencha User BitPoet's Avatar
    Join Date
    Sep 2008
    Location
    Bavaria
    Posts
    277
    Vote Rating
    1
    BitPoet is on a distinguished road

      0  

    Default


    Quote Originally Posted by NBRed5 View Post
    Possible other uses could be to highlight the sorted by column in a sorted grid. Have you thought of integrating that functionality.
    I'm not sure if I should package too much functionality into a single plugin. Sorting and on-the-fly highlighting are things in its own, and maybe better off in their own plugins. It's rather straight forward to implement, just by hooking onto the grid's sortchange event, iterating over all rows, remove the previously sorted column (if present) and apply the css class to the currently selected one. The only footangle is moving columns, because ColumnModel's columnmoved is fired too early in the chain before the GridView has finished its work, thus one must hook onto the view's afterMove routine via createSequence.

    I've cooked up a raw example here, anyone wanting to toy with it or improve it feel free

  8. #8
    Sencha User BitPoet's Avatar
    Join Date
    Sep 2008
    Location
    Bavaria
    Posts
    277
    Vote Rating
    1
    BitPoet is on a distinguished road

      0  

    Default


    Quote Originally Posted by tobiu View Post
    its working nice now!

    you should tell the others in the top-posting, that you are using

    Code:
    skipCStripe:    ['f3'],
    excludeCStripe:    ['f6']
    in the show-case.

    good job,
    tobiu
    Thank you
    I've already edited the posting.

  9. #9
    Sencha User dotnetwise's Avatar
    Join Date
    Mar 2010
    Location
    Iasi, Romania
    Posts
    31
    Vote Rating
    1
    dotnetwise is on a distinguished road

      0  

    Default Multiple columns ordering

    Multiple columns ordering


    What about to support multiple columns ordering?

  10. #10
    Ext Premium Member yyogev's Avatar
    Join Date
    Jun 2009
    Location
    Shoham, Israel
    Posts
    196
    Vote Rating
    6
    yyogev is on a distinguished road

      0  
    Yaron Yogev

    IT Software Developer