1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    6
    Vote Rating
    2
    MakrelJohnson is on a distinguished road

      0  

    Default Unanswered: EXTJS 4.0.7 Grid Row Styles not rendering

    Unanswered: EXTJS 4.0.7 Grid Row Styles not rendering


    Hello, I've been struggling this morning with viewConfig in my Grid Panel setting styles based on cell value.
    The style is being added but the styles are not rendering. ex: yellow background is not displaying, yet you can inspect element and it's built to have a yellow background.

    viewConfig in the grid construction:
    Code:
    viewConfig: {
                getRowClass: function(record, index, rowParams, store) {
                    var cls = '';
                    var data = record.data;
                    if (data.assignedto != '') {
                        cls = 'yellow-row';
                    }
    
    
                    if (data.cancelled != '') {
                        cls = 'red-row';
                    }
                    return cls;
                }
            },
    Row as seen by Chrome. Note the 'yellow-row' class.
    HTML Code:
    <tr class="x-grid-row yellow-row x-grid-row-selected"> ...</tr>
    Am I missing a last command to apply the style? Nothing I've seen in the docs hints to this and I'd appreciate some direction.

    Thanks!
    Last edited by MakrelJohnson; 5 Dec 2011 at 9:17 AM. Reason: ...forgot the 'return cls;' line

  2. #2
    Sencha User
    Join Date
    Dec 2011
    Posts
    6
    Vote Rating
    2
    MakrelJohnson is on a distinguished road

      0  

    Default


    I've used this method, which seems to work for now:
    in my column definitions I added
    Code:
    tdCls: 'x-specialformat-cell'
    on each column.

    I defined a few styles:
    Code:
    .red-row .x-specialformat-cell {background-color: #F5C0C0;}
    .yellow-row .x-specialformat-cell { background-color: #CCCCCC; }
    .green-row .x-specialformat-cell { background-color: #99CC99; }
    I then used my renderer as described above. Seems the tdCls did the trick. By applying it to the entire cell collection, my rows are colored as I need them with select still applying the select class which is fine for me.

    Code:
    ...
    , { header: 'startdate', width: 70, dataIndex: 'startdate', tdCls: 'x-specialformat-cell', renderer: Ext.util.Format.dateRenderer('Y-m-d') }
    ,{ header: 'closeddate', width: 70, dataIndex: 'closeddate', tdCls: 'x-specialformat-cell', renderer: Ext.util.Format.dateRenderer('Y-m-d') }
    , { header: 'status', width: 70, dataIndex: 'status', tdCls: 'x-specialformat-cell' }
    , { header: 'address', dataIndex: 'address', tdCls: 'x-specialformat-cell', flex: 1 }
    , { header: 'city', dataIndex: 'city', tdCls: 'x-specialformat-cell' }
    , { header: 'zip', width: 50, dataIndex: 'zip', tdCls: 'x-specialformat-cell' }
    , { header: 'region', width: 50, dataIndex: '', tdCls: 'x-specialformat-cell' }
    I referenced this page to get this to work: http://jsfiddle.net/molecule/tPB8Z/

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar