• 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: '导航树',
         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);
     }
  • 相关阅读:
    java读取xml文件的四种方法
    列表list常用的方法
    关于字符串的格式化----format与%
    安装爬虫常用包时出现的小问题
    Lniux系统-Ubantu安装搜狗输入法
    激活windows操作系统的命令行指令
    远程桌面连接的实现
    机器学习入门
    cookie,webstorage的理解
    设置窗口的自适应大小
  • 原文地址:https://www.cnblogs.com/sumbud/p/3981736.html
Copyright © 2020-2023  润新知