PDA

View Full Version : [SOLVED] Change class of the last row of a gridpanel



senacle
25 Mar 2010, 6:02 AM
All in the title.

We can change the class of any row based on this :



viewConfig: {
forceFit: true,
// Return CSS class to apply to rows depending upon data values
getRowClass: function(record, index) {
var c = record.get('change');
if (c < 0) {
return 'price-fall';
} else if (c > 0) {
return 'price-rise';
}
}
}


How to do this for the last row ?

httpdotcom
25 Mar 2010, 7:40 AM
Include all the parameters of getRowClass (record, index, rowParams, store)

console.log (index, store.getCount() ) ; //for testing
if (index == store.getCount() ) return...

some tweaking may be necessary (if index starts at 0 and store starts indexing rows at 1, etc.)...

Not tested, so YMMV.

fay
25 Mar 2010, 7:42 AM
Don't forget it's "==" not "=" :)

httpdotcom
25 Mar 2010, 10:09 AM
guess I should have tested...thanks fay. updated post

senacle
25 Mar 2010, 11:50 PM
console.log (index, store.getCount() ) ; //for testing
Very useful :) I did'nt know this before.


Here's my code :


viewConfig: {
forceFit: true,
getRowClass: function(record, index, rowParams, store) {
console.log (index+1, store.getCount() ) ;
if (index+1 == store.getCount() ) {
return 'last_row';
}
}
}

In the css :


.last_row {
background-color: #cc9999;
}
It works fine.



But if a css is specified for columns, like this (i give only one column example) :



...
{header: 'TEST', width: 80, sortable: false, renderer: style_valeur_grid, dataIndex: 'test', id: 'idtest'},
...

In the css :


.last_row {
background-color: #cc9999;
}
.x-grid3-td-idtest{
background-color: #ffff99;
text-align: center;
}

The css row is'nt displayed, only the column row is set.

Condor
26 Mar 2010, 12:38 AM
Why would you want to write a getRowClass method that assigns a class to the last row?

Ext already assigns a class to the last row (x-grid3-row-last). You should use that class to base your css rule on.

senacle
26 Mar 2010, 6:24 AM
Ok, i've also found this x-grid3-row-last class.

The CSS


.x-grid3-td-test {
background-color: #ffff99;
text-align: center;
}

.x-grid3-row-last {
background-color: #cc9999;
text-align: center;
}


The renderer


function style_valeur_grid(val, metaData, record, rowIndex, colIndex, store){
if (rowIndex+1 == store.getCount() ) {
metaData.css = 'x-grid3-row-last';
}
}


For each column of the grid :



...{header: 'TEST', width: 80, sortable: false, renderer: style_valeur_grid, dataIndex: 'test', id: 'test'},
...

Condor
26 Mar 2010, 6:27 AM
That would change all grids. I would recommend:


.x-grid3-td-test {
background-color: #ffff99;
text-align: center;
}
.x-grid3-row-last .x-grid3-td-test {
background-color: #cc9999;
}

(and remove the renderer, because it is no longer needed)