1. #1
    Ext User OlleJonsson's Avatar
    Join Date
    May 2008
    Location
    Malmö, Sweden
    Posts
    30
    Vote Rating
    1
    OlleJonsson is on a distinguished road

      0  

    Default You could add a CSS class on a grid column

    You could add a CSS class on a grid column


    When creating a column model column specifier, ExtJS lets you say "css: 'background-color:yellow;'", which is nice but a little messy. How about "columnCssClass: 'myApp-editable-cell'"?

    Override in two places:

    Code:
    Ext.override(Ext.grid.GridView, {
        // OVERRIDDEN: we added the columnCssClass attribute (this is ExtJS 3.1.0)
        getColumnData : function(){
            
            var cs = [], cm = this.cm, colCount = cm.getColumnCount();
            for(var i = 0; i < colCount; i++){
                var name = cm.getDataIndex(i);
                cs[i] = {
                    name : (!Ext.isDefined(name) ? this.ds.fields.get(i).name : name),
                    renderer : cm.getRenderer(i),
                    scope: cm.getRendererScope(i),
                    id : cm.getColumnId(i),
                    columnCssClass: cm.config[i].columnCssClass || '', // ADDED
                    style : this.getColumnStyle(i)
                };
            }
            return cs;
        },
     // OVERRIDDEN: we added the columnCssClass attribute (this is ExtJS 3.1.0)
        doRender : function(cs, rs, ds, startRow, colCount, stripe){
            var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1;
            var tstyle = 'width:'+this.getTotalWidth()+';';
            
            var buf = [], cb, c, p = {}, rp = {tstyle: tstyle}, r;
            for(var j = 0, len = rs.length; j < len; j++){
                r = rs[j]; cb = [];
                var rowIndex = (j+startRow);
                for(var i = 0; i < colCount; i++){
                    c = cs[i];
                    p.id = c.id;
                    p.css = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
                    p.css += ' ' + c.columnCssClass || ''; // ADDED
                    p.attr = p.cellAttr = '';
                    p.value = c.renderer.call(c.scope, r.data[c.name], p, r, rowIndex, i, ds);
                    p.style = c.style;
                    if(Ext.isEmpty(p.value)){
                        p.value = ' ';
                    }
                    if(this.markDirty && r.dirty && Ext.isDefined(r.modified[c.name])){
                        p.css += ' x-grid3-dirty-cell';
                    }
                    cb[cb.length] = ct.apply(p);
                }
                var alt = [];
                if(stripe && ((rowIndex+1) % 2 === 0)){
                    alt[0] = 'x-grid3-row-alt';
                }
                if(r.dirty){
                    alt[1] = ' x-grid3-dirty-row';
                }
                rp.cols = colCount;
                if(this.getRowClass){
                    alt[2] = this.getRowClass(r, rowIndex, rp, ds);
                }
                rp.alt = alt.join(' ');
                rp.cells = cb.join('');
                buf[buf.length] =  rt.apply(rp);
            }
            return buf.join('');
        }
    
    });
    Last edited by OlleJonsson; 25 Feb 2010 at 1:36 AM. Reason: version clearer now

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Moved to examples and extras

  3. #3

  4. #4
    Sencha User
    Join Date
    May 2009
    Posts
    9
    Vote Rating
    1
    ebart is on a distinguished road

      0  

    Default


    The 'id' config option of ColumModel doesn't quite cut it though. I'd like to specify a single class for multiple columns (the clickable cells in my case). But the 'id' has to be unique inside the grid scope or other features (depending on the id) won't work properly (like cellclick event or autoexpandcolumn).

    Regarding that 'id' config option. I think this is a bad name for something that isn't truly unique throughout the application. Config names should have a consistent meaning throughout the framework. Suggest renaming it to 'name'.

  5. #5
    Ext JS Premium Member
    Join Date
    Nov 2007
    Posts
    74
    Vote Rating
    0
    sean.zhou is on a distinguished road

      0  

    Default


    Quote Originally Posted by jgarcia@tdg-i.com View Post
    Moved to examples and extras
    I like this implementation. It allows an editable cell to change its color when the row is selected. For example, the editable cell could be shown with background in lightyellow and if the row is selected, the editable cell becomes light green; in parallel to the non-editable cells changing color from white to light blue.

    I am wondering whether this modification can be materialized into released ExtJs code.