javascript - extjs4 主题树面板

Question

我正在尝试开始为 Sencha 4 Tree 面板设置主题，更改文本大小和背景颜色等内容。 我还没有找到使用 viewConfig 或其他方式执行此操作的正确方法。 这是我目前拥有的:

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/

有人能指出正确的方法吗？

Answer 1

是的，出于主题目的，您可以使用相同的技巧来设置不同的 ext 对象的样式。例如，更改您可以使用的节点的文本颜色。

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

如果您想全局更改它，请不要使用#tags。 (更改应用程序中 extjs 的整个主题)。

更多样式

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

希望这会有所帮助；)