您的位置:首页 > Web前端 > CSS

ext treepanel 更换图标

2009-12-25 11:58 351 查看
1.动态更换图标:

代码

Js代码

node.on(
'click'
,
function
(node){  

    node.getUI().getIconEl().src = 'img/1.gif'
;  

});  

node.on('click',function(node){
node.getUI().getIconEl().src = 'img/1.gif';
});


2.覆写 Ext
.tree
.TreeLoader 的 createNode

Js代码

Ext
.tree
.MyTreeLoader = 
function
(config) {     

  Ext
.tree
.MyTreeLoader.superclass.constructor.call(this
, config);     

};   

Ext
.extend(Ext
.tree
.MyTreeLoader, Ext
.tree
.TreeLoader, {    

createNode : function
(attr) {   

//        if (attr.leaf == true) {   
  

//          attr.icon = '../../../resources/images/icons/fam/188.gif'; 
  

            attr.iconCls = "xxx-tree
-node-expanded"
;    

//        }   
  

        return
 Ext
.tree
.DWRTreeLoader.superclass.createNode.call(
this
, attr);     

    }   

}     

Ext
.tree
.MyTreeLoader = function(config) {
Ext
.tree
.MyTreeLoader.superclass.constructor.call(this, config);
};
Ext
.extend(Ext
.tree
.MyTreeLoader, Ext
.tree
.TreeLoader, {
createNode : function(attr) {
//        if (attr.leaf == true) {
//          attr.icon = '../../../resources/images/icons/fam/188.gif';
attr.iconCls = "xxx-tree
-node-expanded";
//        }
return Ext
.tree
.DWRTreeLoader.superclass.createNode.call(this, attr);
}
}


3.直接在ext
-all.css 中的下面这段样式放在tree
所在页面修改图标,或直接在

  ext
-all.css 中改也行。若要是把这段css放在单独的文件总引用,必须放在

  ext
-all.css 引用之后。

Css代码

.x-tree
-node-expanded .x-tree
-node-icon{  

    background-image:url(../images/default/tree
/folder-open.gif);  

}  

  

.x-tree
-node-leaf .x-tree
-node-icon{  

    background-image:url(../images/default/tree
/leaf.gif);  

}  

  

.x-tree
-node-collapsed .x-tree
-node-icon{  

    background-image:url(../images/default/tree
/folder.gif);  

}  

.x-tree
-node-expanded .x-tree
-node-icon{
background-image:url(../images/default/tree
/folder-open.gif);
}

.x-tree
-node-leaf .x-tree
-node-icon{
background-image:url(../images/default/tree
/leaf.gif);
}

.x-tree
-node-collapsed .x-tree
-node-icon{
background-image:url(../images/default/tree
/folder.gif);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  ext function url css tree