Theming a tree node

[Asken]

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

[skirtle]

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


Ext.create('Ext.tree.Panel', {
cls: 'custom-select',
...
});


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


.#{$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.

[Asken]

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.

[skirtle]

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.