nightwatch
nightwatch

Reputation: 1304

ExtJS 4 - how to set the background of a tree panel (including tree nodes)

I'm trying to change the background color of a Treepanel in extjs 4. So far I've created a custom css class with the desired color and applied it to the panel and its view

    {
        baseCls: "mycustomclass",
        viewConfig: {baseCls: "mycustomclass"}
        (...)
    }

And this code sets the background of the panel area everywhere but for the tree nodes. Tree nodes are still white. So my question is how to set the background color of the entire tree panel, including nodes.

here's a screenshot of how it looks like - the greenish color is my treepanel area. The nodes also belong to treepanel but are white

screenshot

Upvotes: 2

Views: 5655

Answers (2)

nightwatch
nightwatch

Reputation: 1304

I have found a solution and here it is:

    .navpanel 
    {
        background-color: #c0c0c0;
    }

    .navpanel .x-grid-cell
    {
        background-color:#c0c0c0;
    }
    .navpanel .x-grid-row-selected .x-grid-cell, .x-grid-row-selected .x-grid-rowwrap-div
    {
        background-color:#f0f0f0 !important;
        font-weight: bold;
    }

The 'navpanel' class is applied to my treepanel's view (via viewConfig). All other classes are overrides to standard extjs css so they need to be loaded after extjs css. Google Chrome's 'inspect element' function was very helpful here.

Upvotes: 3

catalinux
catalinux

Reputation: 1452

Try working a new approach. This will definitely work

http://www.slideshare.net/senchainc/slides-5971886 http://www.sencha.com/learn/theming/ http://www.sencha.com/learn/theming-sencha-frameworks-with-sass-and-compass/

A tree panel has more components, so it will not work as easy as you might think

Upvotes: 0

Related Questions