首页 > 代码库 > 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 树节点样式改变