要想改变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)}