当前位置:编程学习 > JAVA >>

ExtJs修改树形结点的Icon?

谁知道ExtJs中怎样修改TreeNode的icon,用IconCls,外面引用css样式?
这是我写的样式
.x-tree-node-collapsed .myCollapsed{background-image: url('../images/add.gif')}    
.x-tree-node-expanded  .myExpanded{background-image: url('../images/delete.png')}    
.x-tree-node-leaf  .myLeaf{background-image: url('../images/cog.png')} 
然后在
var tree=new Ext.tree.TreePanel({
//省略其它配置
root:{

nodeType: 'async',
draggable:false,
iconCls:'myCollapsed'
},
listeners:{
expand:function(node){
node.iconCls='myExpanded';
},
collapse:function(node){
node.iconCls='myCollapsed';
}
});//end tree

但没有出现想要的结果,求高手指教,不甚感激。
--------------------编程问答-------------------- 图片引用的路径可能不对 用./和../来慢慢调试试 --------------------编程问答-------------------- 那你这样图标是没变还是没了? --------------------编程问答-------------------- 不是../和./的问题 --------------------编程问答-------------------- 我把程序改了一下
.x-tree-node-collapsed .myCollapsed{background-image: url('../images/add.gif')}   
.x-tree-node-expanded .myExpanded{background-image: url('../images/delete.gif')}   
.x-tree-node-leaf .myLeaf{background-image: url('../images/cog.png')}  
然后在
var tree=new Ext.tree.TreePanel({
//省略其它配置
root:{

  nodeType: 'async',
  draggable:false,
  iconCls:'myCollapsed',
 listeners:{
 expand:function(node){
    node.setIconCls('myExpanded');
 },
 collapse:function(node){
  node.setIconCls('myCollapsed');
 }
}
});//end tree --------------------编程问答-------------------- 收缩的时候图标是正确显示的

但展开时图标没有正确显示

似乎listeners中的setIconCls()不起作用 --------------------编程问答-------------------- 请问楼主 还记得这个最后是怎么解决的吗? --------------------编程问答-------------------- 在css里要加上!important,就生效了。 --------------------编程问答-------------------- [code=css][.tree1 {
background-image: url(../images/tree1.gif)  !important; 
}
.tree2 {
background-image: url(../images/tree2.png)  !important; 
}
.tree3 {
background-image: url(../images/tree3.png)  !important; 
}
.tree4 {
background-image: url(../images/tree4.gif)  !important; 
}
.tree5 {
background-image: url(../images/tree5.png)  !important; 
}
.tree6 {
background-image: url(../images/tree6.png)  !important; 
}
.tree7 {
background-image: url(../images/tree7.gif)  !important; 
}
.tree8 {
background-image: url(../images/tree7.png)  !important; 
}/code]
不谢 --------------------编程问答--------------------
引用 8 楼 mingzidaodiduochang 的回复:
[code=css][.tree1 {
background-image: url(../images/tree1.gif)  !important; 
}
.tree2 {
background-image: url(../images/tree2.png)  !important; 
}
.tree3 {
background-image: url(..……

+1 --------------------编程问答-------------------- 楼主是怎么解决的啊求方法
补充:Java ,  Java EE
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,