extjs4主题树面板

Question

I'm trying to get started theming a Sencha 4 Tree panel, changing things such as text size and background colours, etc. I've yet to find the correct way to do this, using viewConfig or otherwise. Here's what I have at the moment:

JS:

var store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true,
        children: [
            { text: "detention", leaf: true },
            { text: "homework", expanded: true, children: [
                { text: "book report", leaf: true },
                { text: "alegrbra", leaf: true}
            ] },
            { text: "buy lottery tickets", leaf: true }
        ]
    }
});

Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    width: 400,
    height: 250,
    store: store,
    rootVisible: false,
    renderTo: 'nav'
});

HTML:

<div id='nav'>

</div>

CSS:

#nav .x-tree-node-text  {
    font-size: 1.3em;
    background-color: #c0c0c0;
}

http://jsfiddle.net/EzLmd/1/

Can anyone point out the correct way to do this?

Answer 1

Yea, for theme purpose you can use the same trick for styling different ext objects. eg to change the text color for the nodes you can use.

#nav .x-grid-cell-inner{
    color: #ff0000;
} 

don't use the #tags if you want to change it globally. (to change the entire theme of extjs in your application).

for more styling

#nav .x-grid-cell-inner{
    color: #ff0000;
    text-decoration : line-through;
    font-size:larger;
} 

Hope this will help ;)