Ext JS on rowdblclick change clicked row background color - css

Question

Hello
I'm new to Ext JS and I have created grid whidth folowing fields
columns: [
{
header : 'Firs name',
width : 200,
sortable : true,
dataIndex: 'firstName'
},
{
header : 'Last name',
width : 200,
sortable : true,
dataIndex: 'lastName'
},
{
header : 'Favourite color',
width : 195,
sortable : true,
dataIndex: 'favouriteColor'
}
],
Values will be generated in php.
I have to make that when user doubleCllick on any row, that row's background color turns into user's favourite color (Red, Blue, Yellow).
So far I've done that
grid.on('rowdblclick', function(grid,index,e) {
alert(index);
});
... I got the index of the clicked row, but I don't know how to change its background color. Will appreciate any help.

Answer 1

You need to make use of the GridView object to get the DOM of the selected row. And apply CSS with your favorite color onto that row. First you need to create few CSS classes:
.redrow {
background-color: red !important;
}
Similarly for blue and yellow. Next you need to get the row and add the CSS class to the row.
grid.on('rowdblclick', function(grid,index,e) {
var color = grid.getStore().getAt(index).get('favouriteColor');
if(color == 'red')
Ext.fly(grid.getView().getRow(index)).addClass('redrow');
else if( color == 'blue')
Ext.fly(grid.getView().getRow(index)).addClass('bluerow');
.
.
.
});
If you are trying to change the gird row background color according to the the favouriteColor column, you need to use another technique. You can make use of the ViewConfig and implement the getRowClass method as shown below:
viewConfig: {
forceFit: true,
getRowClass: function(record, index,prarms,store) {
var color = record.get('favouriteColor');
if(color == 'red')
return 'redrow';
else if(color == 'blue')
return 'bluerow';
else if (color == 'yellow')
return 'yellowrow';
else
return;
}
}
The ViewConfig is used along with the grid declaration. You don't make use of the return value of the getRowClass. The framework makes use of the return value. You only need to write logic for selecting the right CSS class for the row. getRowClass method can be used if you are need to display the background colors when the grid is rendered. It cannot be used during user events or after the grid is rendered.
In your case, you don't need this method because you are changing the color of the row when the user double click the row right? So, you can refer to the first part for the answer where you change the row's background according to the favouriteColor value for that row.