Results 1 to 8 of 8

Thread: How to set alternate row coloring to ext js tree grid

  1. #1
    Sencha User
    Join Date
    Apr 2011
    Posts
    43

    Default How to set alternate row coloring to ext js tree grid

    Hi,

    I have the same grid as http://dev.sencha.com/deploy/ext-4.0.../treegrid.html . I want to set alternate row coloring to the grid. i.e,Ext.tree.Panel. Any help?? I might need to set my preferred colors to it

  2. #2
    Sencha Premium User westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    1,035

    Default

    For a grid the CSS classes you need to alter are x-grid-row & x-grid-row-alt.

    I don't think tree's support stripeRows, but there is x-grid-row-over.
    Product Architect
    Altus Ltd.

  3. #3
    Sencha User
    Join Date
    Apr 2011
    Posts
    43

    Default

    Hi,

    I find that for all the rows in the tree grid, the class set is x-grid-row. When i inspect through fire bug, i find that there are 5 <tr> inside tbody each for each row. when i expand the second row twisty which has further 3 children, i find that there are total 8 <tr> in the tbody. everything seems to be dynamic. How do i set alternative row color in this case ?

  4. #4
    Sencha Premium User westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    1,035

    Default

    You're going to have to override Ext.tree.View and make it support stripeRows.

    See the source for Ext.grid.View and look at how it goes about it, looks fairly straightforward.
    Product Architect
    Altus Ltd.

  5. #5
    Ext JS Premium Member
    Join Date
    Oct 2011
    Location
    Danville, CA
    Posts
    1

    Default How about CSS

    This is how I did it with CSS-3:

    .x-grid-row:nth-of-type(odd) .x-grid-cell {
    background-color: #D3E8EC;
    }


    It's actually better than with JS, since the alt row colors will be always in sync with expanded/collapsed nodes in the tree.

    Alex Kouznetsov
    Lyris

  6. #6
    Ext JS Premium Member
    Join Date
    Jan 2010
    Location
    San Diego, CA
    Posts
    254

    Default

    ingenious! works flawlesly. I added the following class to restrict this to tree panels only:
    Code:
    .x-tree-panel .x-grid-row:nth-of-type(odd) .x-grid-cell {
        background-color: #D3E8EC;
    }
    also this color choice renders slightly different on FF than IE8 - but I'll find something suitable.
    Thanks for your suggestion.

  7. #7
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    21

    Default Not working in IE8

    Quote Originally Posted by akouznetsov View Post
    This is how I did it with CSS-3:

    .x-grid-row:nth-of-type(odd) .x-grid-cell {
    background-color: #D3E8EC;
    }
    It's actually better than with JS, since the alt row colors will be always in sync with expanded/collapsed nodes in the tree.

    Alex Kouznetsov
    Lyris
    Hi I tried the same code works in Firefox but it is not working in IE8 .Any Ideas why so?
    i also tried changing color to red.

  8. #8
    Sencha User
    Join Date
    Nov 2013
    Posts
    259

    Default

    I tried this to target a specific treepanel but it does not work in extjs 4.2.2:

    Code:
    .hypervisorTree .x-tree-panel .x-grid-row:nth-of-type(odd) .x-grid-cell {
        background-color: #D3E8EC;
    }

Posting Permissions

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