PDA

View Full Version : Theming a tree node



Asken
24 Aug 2011, 2:02 AM
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
26 Aug 2011, 5:26 AM
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
5 Oct 2011, 12:06 AM
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
5 Oct 2011, 7:35 AM
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.