Results 1 to 5 of 5

Thread: Colouring Grid Row depending on value

  1. #1
    Ext JS Premium Member
    Join Date
    Feb 2012
    Posts
    44
    Answers
    3

    Default Answered: Colouring Grid Row depending on value

    Hello,

    I have a grid and i'd like to color the rows depending on a value of the record.

    i read many posts about the topic of my title, but the solution suggested doesn't work. Here's my code:
    Code:
    viewConfig: {
                    stripeRows: false,
                    getRowClass: function(record, rowIndex, rowParams, store){ 
                
                var style = 'enabled-row';
                var status = record.get('status');
                
                
                if( status == 'CLOSED'  ){
                style = 'disabled-row';
                } 
                
                return style;
                }
                },
    this is my CSS
    Code:
    .enabled-row .x-grid-cell { 
        background-color: #e2ffe2; !important
        color: #090; 
    } 
    
    .disabled-row .x-grid-cell { 
        background-color: #c9c9c9; !important
        color: #550;
    }
    So, here's what happening. Actually, nothing. There's no visual effect neither after loading or on updating the grid.
    What am i missing?

    Thanks

  2. Here is a fiddle showing that it works fine.

  3. #2
    Sencha User
    Join Date
    Apr 2013
    Posts
    908
    Answers
    105

    Default

    Here is a fiddle showing that it works fine.

  4. #3
    Ext JS Premium Member
    Join Date
    Feb 2012
    Posts
    44
    Answers
    3

    Default

    thanks hakimio.
    I see, it works on fiddle.

    but it is not on my application. i really can't see the difference.I also copy-paste the example in my code and it is not working.

    It seems to me that the function is not called at all. is it possible?

  5. #4
    Sencha User
    Join Date
    Apr 2013
    Posts
    908
    Answers
    105

    Default

    Well, either print something in console or add a breakpoint to see if the function is executed (maybe you misspelled sth?). Then, if it is, inspect you html to see if the CSS class is added and if there is some other CSS rule which is overriding your CSS.

  6. #5
    Ext JS Premium Member
    Join Date
    Feb 2012
    Posts
    44
    Answers
    3

    Default

    Thanks.
    actually it worked as i was expecting.

    as you sugggested me, hakimio, i checked with firebug and i saw that the correct css element was added.

    The problem was the following one. Sencha architect doesn't copy all the files when you do a build. Hence my css was not copied at all and for this reason was not working in the final build.

    i made a copy and so now it's ok.

Similar Threads

  1. PieChart colouring
    By manoj123 in forum Ext: Discussion
    Replies: 5
    Last Post: 26 Dec 2012, 11:40 PM
  2. Conditional colouring of grid row on hover
    By jshailes in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 29 Mar 2011, 6:41 AM
  3. Selective Text Colouring on Grid
    By jdobrowski in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 18 Mar 2008, 7:20 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •