首页 > 代码库 > Extjs 树节点样式改变
Extjs 树节点样式改变
ExtJs 中默认对树节点图标控制的CSS代码:
1 .x-tree-icon-leaf{width:16px;background-image:url(‘../../resources/themes/images/default/tree/leaf.gif‘)}2 .x-tree-icon-parent{width:16px;background-image:url(‘../../resources/themes/images/default/tree/folder.gif‘)}3 .x-grid-tree-node-expanded .x-tree-icon-parent{background-image:url(‘../../resources/themes/images/default/tree/folder-open.gif‘)}
对树节点的图标的改变:
1、获取树节点
可以在后台先打印出来节点
var store = Ext.create(‘Ext.data.TreeStore‘, { root: { id : ‘root‘ , text : ‘我的tree‘ , expanded: true, //这个children是一个数组 children: [ { id : ‘c1‘ , text: "1", expanded: true, children: [ {id : ‘c1‘ ,text: "11", leaf: true }, {id : ‘c2‘ , text: "22", leaf: true} ] }, { id : ‘c2‘ , text: "2", expanded: true, children: [ {id : ‘c3‘ , text: "33", leaf: true }, {id : ‘c4‘ , text: "44", leaf: true} ] }, { id : ‘c3‘ , text: "3", expanded: true, children: [ {id : ‘5‘ , text: "55", leaf: true }, {id : ‘6‘ , text: "66", leaf: true} ]} ] }});var testTree = Ext.create(‘Ext.tree.Panel‘, { title: ‘导航树‘, width: 200, height: 800, store: store, rootVisible: true, lines : true , //设置lines为false, TreePanel将会隐藏折线. useArrows : false , //隐藏折线,并且显示出一个箭头图标.// iconcls : renderTo : Ext.getBody()});
if(message.type == ‘change_icon‘){ // testTree .settreeCls(‘user-online‘); //var rootNode = treestore.getRootNode(); //var root = rootNode.childNodes; //console.log(testTree.getRootNode().get(‘id‘)); //console.log(testTree.id); //console.log(testTree); //console.log(testTree); /* testTree testTree.setIconCls(‘user-online‘);*/ }
/** * treeNode ext TreeNode对象 * oldIconCls 原图标css名 * newIconCls 新图标css名 */ function updateTreeNodeIcon(treeNode,oldIconCls,newIconCls){ if(!treeNode) return; /*获得树节点<Img> html页面元素对象*/ var imgHtmlEl = treeNode.getUI().getIconEl(); /*设置树节点新图标css*/ treeNode.iconCls = newIconCls; Ext.Element.fly(imgHtmlEl).removeClass(oldIconCls);// @1 Ext.Element.fly(imgHtmlEl).addClass(newIconCls); }
Extjs 树节点样式改变
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。