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); }