码迷,mamicode.com
首页 > Web开发 > 详细

Extjs 树节点样式改变

时间:2014-09-19 17:34:15      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   color   io   ar   div   sp   cti   

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 树节点样式改变

标签:des   style   blog   color   io   ar   div   sp   cti   

原文地址:http://www.cnblogs.com/sumbud/p/3981736.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!