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

[BitPoet]

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:

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

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

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.

[BitPoet]

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

[tobiu]

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

[BitPoet]

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

[NBRed5]

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.

[tobiu]

its working nice now!

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

skipCStripe:	['f3'],
excludeCStripe:	['f6']

in the show-case.

good job,
tobiu

[BitPoet]

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

[BitPoet]

its working nice now!

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

skipCStripe:    ['f3'],
excludeCStripe:    ['f6']

in the show-case.

good job,
tobiu

Thank you
I've already edited the posting.

[dotnetwise]

What about to support multiple columns ordering?

[yyogev]

http://www.sencha.com/forum/showthread.php?164041-stripeCols-grid-plugin-migrated-to-ExtJS-4&p=696713


Enjoy,