View Full Version : Change Grid with CheckboxModel default on itemclick behaiour

6 Oct 2011, 1:20 AM
I'm trying to create a Ext.grid.Panel, displaying a list of region (EU, Asian, US etc..), with a CheckboxModel to be able to select multiple entry. I assigned a different colour to each entry on the grid by setting the getRowClass function in viewConfig
I tried to change the two following default behaviour of the grid, but couldn't find out how:

When you select one row, the row colour change to grey. I want the row to keep the original colour I gave even after you select a row. I tried:

Set selectedItemCls:" " . The result is the row still change colour when I select, and the tick box disappear.
Listen to the itemclick event, then set the colour again. -- Does not work as well

When you select one row, it's check box is ticked. But when you select other row, it deselect the previous check box and check the new one. The only way to select multiple row is to use CTR+Click or to click to the check box instead of the row. I want to make the single click event behave the same way with CTR+Click.
I would appreciate any pointer on how can I do this or where to look. Took me two days fiddling around with no result. I'm currently look through ExtJs library source code and try to find where those default behaviours are set so I can change them.

The code I'm using is as follow:

var Region = Ext.create('Ext.grid.Panel', {
store: regionStore

, columns: [{text: '', flex : 1, dataIndex: 'name'}]

, title: "Region"

, width: 200

, height: 500

, viewConfig: {
getRowClass: function(record, rowIndex, rowParams, store){
return "row-color-" + record.get('colorIndex');
, stripeRows: false
//, selectedItemCls: ""

, selModel: Ext.create('Ext.selection.CheckboxModel',{
selectionObject : selectionGrid
, listeners : {
selectionchange : {
fn: function (sm, record, index, option){//do some work here}

7 Oct 2011, 10:05 AM
You haven't posted your CSS so I'm guessing a little. The selected row colour uses the !important flag so you'll need it too. Something like:

.row-color-0 .x-grid-cell {
background-color: red !important;

For the selection behaviour see here: