Giving color to grid rows

[manuss]

Hi,

I want to add color to grid rows based on business requirements,

as per the example provided here

http://jsfiddle.net/molecule/tPB8Z/

I wrote my own function like below

function createLovGrid(history){
    
    myData = history;

     ds = new Ext.data.SimpleStore({
        fields: [
            {name: 'id'},
            {name: 'lastChange'},
            {name: 'Description'}
        ]
    });
    ds.loadData(myData);

    var colModel = new Ext.grid.ColumnModel([
        {header: "id", width: 90, sortable: true, dataIndex: 'id',tdCls: 'x-change-cell'},
        {header: "Performance measured in", width: 150, sortable: true,dataIndex: 'lastChange'},
        {header: "Description", width: 300, sortable: true, dataIndex: 'Description'}
    ]);

     grid = new Ext.grid.GridPanel({ 
        height:200, 
        width:580, 
        ds: ds, 
        cm: colModel,
        cls:'my-grid',
        listeners : {
            'rowdblclick': function(grid, index, rec){
                if(listenArgs == 'C'){
                    radioSelected =1;
                    createProceedButton();
                }
            },
            'viewready': function(g){
               // g.getView().getRow(1).style.color="#f30";
            }

        },viewConfig: {
             getRowClass: function(record, index, rowParams, store) {
                 var c = record.get('id');
                 
                 if (c < 240) {
                     console.info('reached c < 240');
                        return 'price-rise';
                    } else{
                        console.info('reached c > 240');
                        return 'price-fall';
                    }
             }
        }
}
    );
    
return grid;

} 

and my css look like this

.my-grid .price-fall .x-change-cell {
    background-color: #FFB0C4;
    color:red;
}
.my-grid .price-rise .x-change-cell {
    background-color: #B0FFC5;
    color:green;
} 

I am getting console.info part from firebug but unable to get the colored rows. Any one please help

[scottmartin]

If you want to use my-grid, then you will have to make the following changes:

// cls: 'my-grid' <- remove
id: 'my-grid' <- add

#my-grid .price-fall .x-change-cell {
    background-color: #FFB0C4;
    color:red;
}
#my-grid .price-rise .x-change-cell {
    background-color: #B0FFC5;
    color:green;
}​

The other alternative is to just remove my-grid from your CSS and not use an id in your grid as show in the fiddle example you posted.

Regards,
Scott.

[manuss]

Hi scott, thanks for your help. I tried

1.removing cls "my-grid" from my frid panel and css file

2.Using id and # to get css values (As scott says)

3.giving !Important marker

.price-fall .x-change-cell {
    background-color: #FFB0C4 !important;
    color:red !important;
}
.price-rise .x-change-cell {
    background-color: #B0FFC5 !important;
    color:green !important;
} 

4. Providing the import of my css file after every other imports

None of them worked.

As a work around i am doing something like this

I added some listeners to the grid panel in which it will loop through all the data in the store, after finding the appropriate value ,it will change the color of the grid row.

listeners : {
           
            'viewready': function(g){
                markWithColor(g);
                },
            'sortchange': function(g){
                markWithColor(g);
            }
        } 

function markWithColor(g){

    for(var i=0;i<ds.getTotalCount();i++){
        if(stdId == ds.getAt(i).data.id){
            g.getView().getRow(i).style.backgroundColor="#FF6699";
            break;
            

        }
    }
   

} 

where stdId is the value which I want to check for and id is my column name.

The problem with this approach is that I can't do the same thing in "mouse over" event. Console says "g.getView().getRow(i)" is not defined. Other ways it is ok.

[willigogs]

Personally I would use a column renderer in this situation:

.price-fall {
    background-color: #FFB0C4 !important;
    color:red !important;
}
.price-rise {
    background-color: #B0FFC5 !important;
    color:green !important;
}

function render_foo (val, meta, record, rowIndex, colIndex, store) {
    var id = record.get('id');
    if(id < 240) {
        meta.css += ' price-fall';
    } else {
        meta.css += ' price-rise';
    }
    return val;
};

var colModel = new Ext.grid.ColumnModel([
    {header: "id", width: 90, sortable: true, dataIndex: 'id', renderer: render_foo},
    {header: "Performance measured in", width: 150, sortable: true, dataIndex: 'lastChange'},
    {header: "Description", width: 300, sortable: true, dataIndex: 'Description'}
]);

You can then get rid of the listeners and viewConfig in the grid.