实现Ext的TreePanel上节点的图标样式的自定义设置

要想改变TreePanel上的节点的图标样式，Ext的api里提供了通过设置节点的icon和iconCls两种方式，如下所示：

new Ext.tree.TreeNode{
        icon: 'youricon.gif',
        iconCls: 'your-iconCls'
} 

 

官方推荐首选的设置方式是通过iconCls进行设置。需要注意到是在设置节点的iconCls的样式的时候一定要用CSS层叠的写法才会起作用，具体CSS代码如下：

/*不考虑节点的状态，同一用一种图标显示*/
.x-tree-node  .your-iconCls{background-image: url(youricon.gif)}


/*为节点的开闭状态和叶节点状态分别设置样式*/
.x-tree-node-expanded  .your-iconCls{background-image: url(youricon.gif)}
.x-tree-node-collapsed  .your-iconCls{background-image: url(youricon2.gif)}
.x-tree-node-leaf  .your-iconCls{background-image: url(youricon3.gif)}