2014-03-31 53 views
0

我想開始主題化Sencha 4樹面板,更改文字大小和背景顏色等。 我還沒有找到正確的方法來做到這一點,使用viewConfig或者其他。 這是我目前所面對的:extjs4主題樹面板

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/

任何人都可以指出正確的方法來做到這一點?

回答

0

是的,爲了達到主題目的,您可以使用相同的技巧來設置不同的ext對象的樣式。例如更改您可以使用的節點的文本顏色。

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

如果您想要全局更改,請不要使用#tags。 (在應用程序中更改extjs的整個主題)。

更多造型

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

希望這將幫助;)