zoukankan      html  css  js  c++  java
  • 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);
     }
  • 相关阅读:
    Solr3.5安装测试指南yzn
    Babylon.js 构建 地球,支持切片地图 (四)
    arcgis 4 与deckgl 整合 (一)
    初遇Citymaker (一)
    arcgis 4 与deckgl 整合 (三)
    Babylon.js 构建 地球,支持切片地图 (一)
    Babylon.js 构建 地球,支持切片地图 (五)
    Babylon.js 构建 地球,支持切片地图 (三)
    Babylon.js 构建 地球,支持切片地图 (六)
    Babylon.js 构建 地球,支持切片地图 (二)
  • 原文地址:https://www.cnblogs.com/sumbud/p/3981736.html
Copyright © 2011-2022 走看看