1. #1
    Ext JS Premium Member Asken's Avatar
    Join Date
    Feb 2010
    Location
    sweden
    Posts
    118
    Answers
    2
    Vote Rating
    0
    Asken is an unknown quantity at this point

      0  

    Default Answered: Theming a tree node

    Answered: Theming a tree node


    Hi,

    I want to make the tree node bold (or different color or something) if selected rather than showing the whole row in the tree panel.

    I'm using the theming stuff to do everything but I can't find a "selected-node"-variable to change.

    Anyone knows how to change?

    (And it's also really annoying that the forum changes to Japanese all the time. Any way to make the English (US) stick?)

    Regards,
    Kristian

  2. Adding the cls is only necessary to isolate the styling to a single tree. If you want to style all trees that way (as you might in a theme) then just don't include the cls and adjust the CSS selector accordingly.

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,590
    Answers
    541
    Vote Rating
    322
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Here's an example of doing it with normal CSS:

    Code:
    Ext.create('Ext.tree.Panel', { 
        cls: 'custom-select', 
        ...
    });
    Code:
    .custom-select .x-grid-row-selected .x-grid-cell {
        color: #900;
    }
    The entry in the theming stuff seems to be this section from _grid.scss:

    Code:
    .#{$prefix}grid-row-selected .#{$prefix}grid-cell,
    .#{$prefix}grid-row-selected .#{$prefix}grid-rowwrap-div {
        border-style: $grid-row-cell-selected-border-style;
        border-color: $grid-row-cell-selected-border-color;
    
        background-color: $grid-row-cell-selected-background-color !important;
    }
    Doesn't look like there's a variable for the color but there's no reason you can't add one to your custom theme.

  4. #3
    Ext JS Premium Member Asken's Avatar
    Join Date
    Feb 2010
    Location
    sweden
    Posts
    118
    Answers
    2
    Vote Rating
    0
    Asken is an unknown quantity at this point

      0  

    Default


    Code:
    Ext.create('Ext.tree.Panel', { 
        cls: 'custom-select', 
        ...
    });
    That's what I don't want to do... Seems there is no way of doing this vanilla-style.

  5. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,590
    Answers
    541
    Vote Rating
    322
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Adding the cls is only necessary to isolate the styling to a single tree. If you want to style all trees that way (as you might in a theme) then just don't include the cls and adjust the CSS selector accordingly.

Thread Participants: 1

Tags for this Thread