1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    8
    Vote Rating
    0
    manuss is on a distinguished road

      0  

    Default Giving color to grid rows

    Giving color to grid rows


    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

    PHP Code:

    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"width90sortabletruedataIndex'id',tdCls'x-change-cell'},
            {
    header"Performance measured in"width150sortabletrue,dataIndex'lastChange'},
            {
    header"Description"width300sortabletruedataIndex'Description'}
        ]);

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

            },
    viewConfig: {
                 
    getRowClass: function(recordindexrowParamsstore) {
                     var 
    record.get('id');
                     
                     if (
    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

    PHP Code:
    .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

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,866
    Vote Rating
    438
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Code:
    // 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.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    8
    Vote Rating
    0
    manuss is on a distinguished road

      0  

    Default


    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
    PHP Code:
    .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.

    PHP Code:
    listeners : {
               
                
    'viewready': function(g){
                    
    markWithColor(g);
                    },
                
    'sortchange': function(g){
                    
    markWithColor(g);
                }
            } 
    PHP Code:
    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.

  4. #4
    Sencha User
    Join Date
    Jan 2011
    Posts
    544
    Vote Rating
    51
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


    Personally I would use a column renderer in this situation:
    Code:
    .price-fall {
        background-color: #FFB0C4 !important;
        color:red !important;
    }
    .price-rise {
        background-color: #B0FFC5 !important;
        color:green !important;
    }
    Code:
    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.

Thread Participants: 2