ext treepanel 更换图标
2009-12-25 11:58
351 查看
1.动态更换图标:
代码
Js代码
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);
}
}
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);
}
代码
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.Net TreePanel 修改Icon图标
- [Ext.Net]TreePanel自定义图标
- [Ext.Net]TreePanel自定义图标
- Ext.Window和Ext.tree.TreePanel简单用法
- Ext JS Ext.tree.Panel 要点
- EXT3.3在IE9上 , TreePanel click event 失效
- ExtJS4 Ext.tree.Panel获取Node对象
- Ext.Net 1.x_Ext.Net.TreePanel 选择值回传父页
- Ext核心API详解-Ext.tree.TreePanel
- Ext.net中TreePanel动态生成
- 学习EXT第六天--关于树TreePanel(Part 1)
- 为什么Ext中不能直接使用赋值更换panel的store
- ExtJs2.0学习系列(13)--Ext.TreePanel之第二式【转】
- css修改ExtJS:TreePanel的小图标
- 自己写的一个js 类 ,继承Ext.tree.TreePanel
- ExtJs2.0学习教程(13)--Ext.TreePanel之第二式
- ExtJs2.0学习系列(12)--Ext.TreePanel之第一式
- Ext treePanel方法属性
- Ext JS TreePanel
- ext TreePanel 一次递归加载数据及异步加载数据(点子节点加载数据)