PDA

View Full Version : Grid Row - change row color and cursor



goldenka
12 Jan 2012, 3:27 AM
Hello,
I have a problem with changing grid row color. In column there is a renderer:


var rendrer = new function(val, metadata, record, rowIndex, colIndex) {
if(record.get('id') == 1 && colIndex=0) {
metadata.tdAttr = 'style="background-color: #FFFFCC;"';
}
}


Everything is OK, but when a row is selected it's color is changing to blue, I want it to remain yellow.

The next problem is to change cursor (from normal to hand cursor) when I select the row. How to do that ?

In EXT 3 this code did the trick:



viewConfig: {
getRowClass: function(record, index) {
if(record.get('id') == 1){
return 'cursor_hand';
}
else {
return 'cursor_default';
}
}
},


but in EXTJS 4 it doesn't work.

Thank you for your help!!

mitchellsimoens
12 Jan 2012, 9:51 AM
You will need to override the CSS that gets applied for when a row is selected and I would just go ahead and override the CSS of the row and not worry about placing a custom CSS class. This will then affect all your grids without any setup.

slemmon
12 Jan 2012, 1:18 PM
Try it with "!important":


var rendrer = new function(val, metadata, record, rowIndex, colIndex) {
if(record.get('id') == 1 && colIndex=0) {
metadata.tdAttr = 'style="background-color: #FFFFCC !important;"';
}
// return val; // if you want the value from the record returned as well
}


I'm not 100% sure what you're looking to do with the pointer. If you want it that on the cell I'd think you could add it to the styling above. If you want it to be a pointer for any selected row you can use:


.x-grid-row-selected div, .x-grid-row-selected .x-grid-cell
{
cursor: progress !important;
}

goldenka
13 Jan 2012, 1:04 AM
Hi, thank you for your suggestion with !important, it worked !

I tried to change the cursor with no success. I don't want to apply the css to any selected row, but only to rows witch 'id' dataIndexes are '1' (so I created a renderer).

I tried with this code:



var rendrer = new function(val, metadata, record, rowIndex, colIndex) {
if(record.get('id') == 1) {
metadata.tdAttr = 'style="background-color: #FFFFCC !important; cursor: progress !important;"';
}
return val;
}


It's not working. But I noticed, that the cursor changed on the edge of the row. On the other hand, when I put a cursor in the middle of the row, it's normal (not changed).

Thank you for any help!

slemmon
13 Jan 2012, 6:40 AM
This works for me:


Ext.widget('gridpanel', {
title: 'grid'
, height: 200
, width: 200
, renderTo: Ext.getBody()
, columns: [{
text: 'Col'
, dataIndex: 'col'
, renderer: function (val, metadata, record) {
if (record.get('col') == 1) {
metadata.style = 'background-color: #FFFFCC !important;cursor: pointer;'
}
return val;
}
}]
, store: {
fields: ['col']
, data: [{
col: 1
}, {
col: 2
}]
}
})

goldenka
18 Jan 2012, 1:45 AM
It works :) Thank you.