Extjs 树节点样式改变

浏览数：124 / 时间：2015年06月09日

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