更改extjs4中的树节点背景颜色

时间:2015-04-29 11:44:20

标签: extjs4

我是JS的新手,所以如果我提出非常基本的问题,请原谅我。

我想更改我在这里的树中节点的背景颜色。

Ext.application({
            name: 'Autopsy',
            launch: function() {
            Ext.create('Ext.container.Viewport', {
                    layout: 'border',
                    items:[ {
                        ......
                        .......
                    }, {
                        region:'west',
                        collapsible: true,
                        resizable: true,
                        title: 'Threads (Total: {{ num_threads|replace("\n","\\n") }})',
                        width: 200,
                        layout: 'fit',
                        items: [
                            {

                                xtype: 'treepanel',
                                rootVisible: false,
                                store: threadStore,
                                lines: false,
                                useArrows: true,
                            }
                        ]
                    }, {
                       .....
                       .....

ThreadSotre是

          var threadStore = Ext.create('Ext.data.TreeStore', {
                                root: {
                                    text: 'Root',
                                    expanded: true,
                                    children: [
                                        {% for thread in threadIds %}
                                        { text: "Thread {{ thread }}", leaf:                 true },
                                        {% endfor %}
                                        { text: "Thread Ex", expanded: true, children: [
                                            { text: "funcTop", leaf: true },
                                            { text: "funcBottom", leaf: true},
                                            { text: "test", leaf: true}
                                        ] },
                                    ]
                                }
                            });

这给我一个如下所示的输出

线程6

线程5

线程4

主题3

线程2

线程1

我希望“线程1”的背景颜色为红色。我该怎么办?

1 个答案:

答案 0 :(得分:0)

您可以使用treecolumn渲染器更改节点的样式。示例代码如下。

xtype: 'treepanel',
   rootVisible: false,
   store: threadStore,
   lines: false,
   useArrows: true, 
   columns: [{
          xtype : 'treecolumn',
          text: 'Email',
          dataIndex: 'name',
          flex: 1,
          renderer: function (value, metaData) {
                //TODO Apply your logic here...
                if(value==='Thread1'){
                    metaData.tdAttr = 'bgcolor="red"';
              }
              return value;
          }
      }