ExtJS4 TreePanel中图标的问题

我们使用TreePanel中我们application.The代码：ExtJS4 TreePanel中图标的问题

var exStore = Ext.create('Ext.data.TreeStore',{ 
    root : { 
     children : [{ 
      text : 'Parent 1', 
      id : 'parent1', 
      checked : false, 
      iconCls : 'ico1', 
      children : [{ 
       text : 'Child 1', 
       id : 'child1', 
       checked : false, 
       leaf : true 
      },{ 
       text : 'Child 2', 
       id : 'child2', 
       checked : false, 
       leaf : true 
      }] 
     },{ 
      text : 'Parent 2', 
      id : 'parent2', 
      checked : false, 
      iconCls : 'ico2', 
      children :[{ 
       text : 'Child 3', 
       id : 'child3', 
       checked : false, 
       leaf : true 
      },{ 
       text : 'Child 4', 
       id : 'child4', 
       checked : false, 
       leaf : true 
      }] 
     }] 
    } 
}); 

var treepanel = Ext.create('Ext.tree.Panel',{ 
    id : 'tree', 
    width : 300, 
    height : 300, 
    store : exStore, 
    rootVisible : false 
});

但是我们在这里面临的两个问题。

1.我们为父节点指定了iconCls，当树折叠时显示效果很好。如果我们展开树，它会被文件夹图标替换。有关参考请查看附加图像。
2.如果我们选择父节点，那么必须选择特定父节点下的子节点。

enter image description here

如果任何人有idea.Please帮助me.We试图对这些问题很多。

来源

2011-07-15 Unknown

转到您的CSS和尝试类似：

.x-tree-node-collapsed .x-tree-node-icon 
{ 
    background-image: url('../images/tree/ico1.png') !important; 
    background-repeat: no-repeat; 
} 

    .x-tree-node-expanded .x-tree-node-icon 
{ 
    background-image: url('../images/tree/ico2.png') !important; 
    background-repeat: no-repeat; 
} 
    .x-tree-node-leaf .x-tree-node-icon{ 
    background-image:url(/images/menu/folder.gif); 

}

来源

2011-07-20 11:08:18 Armance

请注意，这会改变您应用中的所有树木。 – dbrin

可以指定你想要的图标变化通过列出树的“CLS”特性可将其树。例如：

{  
    xtype: 'treepanel',  
    cls: 'my-tree-panel',  
    store: 'MyStore', 
    ... 
}

因此，包含树面板的DIV将应用CSS类'my-tree-panel'。然后在你的CSS文件中定义的选择如下：

.my-tree-panel .x-tree-icon-leaf {  
    background-image: url("images/newicon.png") !important; 
}

图标的变化将只适用于特定的树面板。因此，您可以在应用程序中使用不同的树形面板，并且您可以自定义每个图标。

来源

2012-06-16 05:54:03 user1454926

改变图标的树，然后给它的ID作为

#tree x-tree-node-expanded .x-tree-node-icon 
{ 
    background-image: url("bookopen.png") !important; 
    background-repeat: no-repeat; 
} 
#tree .x-tree-node-collapsed .x-tree-node-icon 
{ 
    background-image: url("bookclose.png") !important; 
    background-repeat: no-repeat; 
}

，如果你想对任何特定的图标图标，然后给该节点ID，精细同一作品。

来源

2013-07-05 11:04:44

ExtJS4 TreePanel中图标的问题

回答

相关问题