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);
 }
时间: 2024-10-24 02:06:22

Extjs 树节点样式改变的相关文章

jQuery的取节点与更快的CSS样式改变

jQuery中使用 $ ,可以通过元素的id, css class或 tag name很容易的获取到相应的元素. 这让之前取节点的繁琐变的简单.简短.简洁.并且为了更加方便的可以选择到相应的元素,提供了筛选的功能. 例: $(“p:gt(2)”) //2以上的元素$("p:lt(10)”) // 0-9   $(“p:empty”) //没有子孩子的p 还在匹配的元素中,设置一个样式属性的值 例: $("p").css("color","red&

Extjs 4.2 右键菜单树节点(,选择逆,废除)

写自己的最新版本号extjs4.2树节点的操作,记录它,可能在将来被用于. var tree = new Ext.tree.TreePanel({ flex: 1, animate: true, autoScroll: true, anchor: '100% 93%', store: new Ext.data.TreeStore({ root:{ expanded: true, text:'A', children:[{ expanded: true, text:'1', children:[{

ExtJs 4.2 treePanel 点击树节点 传送参数到后台(多个参数)

//***********************************************左边树开始*********************************************** //分组树Store var treeStore = Ext.create('Ext.data.TreeStore', { proxy: { type: 'ajax', url: "/Handler/StorePositionLayoutHandler.ashx?func=getbystores

ext 树节点操作

ext 树节点操作 tree :树    node:节点 1.全部展开 tree.expandAll(); 2.全部收缩 tree.collapseAll(); 3.得到父节点 node.parentNode 4.判断是否有父节点 node.parentNode==null 5.判断是否有子节点 node.hasChildNodes() 6.获取下一级所有子节点 node.eachChild(function(child) { }) 7.获取选择的节点 tree.getSelectionMode

DOM树节点和事件

一.前言:DOM树节点是JS的基础语句.通过节点,能够取到HTML代码中的任意标签,从而对其进行修改和添加各种视觉效果. 二.DOM树节点    DOM节点分为三大类: 元素节点,属性节点,文本节点     文本节点,属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:     可以使用getElement系列方法,取到元素节点 .      1.查看元素节点      getElementById: 通过ID取到唯一节点.如果id重名,则id只能取到第一个      ge

TreeView 树节点的处理

TreeView 树节点的处理 1 using System; 2 using System.Collections.Generic; 3 using System.ComponentModel; 4 using System.Data; 5 using System.Drawing; 6 using System.Linq; 7 using System.Text; 8 using System.Threading.Tasks; 9 using System.Windows.Forms; 10

zTree变异篇:如何让同级树节点平铺而非垂直显示

昨天有一个zTree的使用者在实际的项目中有着这样一个特殊的需求,要求同级树节点能够水平显示,根据设定的宽度自动换行,效果图如下所示: 通过在浏览器调试模式下观察其同级节点的css为: li { display: list-item; text-align: -webkit-match-parent; } 这个display属性就注定了其节点都会像item一样垂直显示的.我们知道了这一点所以问题解决方案就出来了. 解决思路: 1.彻底修改zTree树所配备的zTreeStyle.css文件: 2

pyqt5 树节点点击实现多窗口切换

# coding=utf-8 import sys from PyQt5.QtWidgets import * from PyQt5.QtCore import * from PyQt5.QtGui import * class Example(QWidget): def __init__(self): super().__init__() self.initUI() def initUI(self): hbox = QHBoxLayout(self) left = QFrame(self) #

android selector(如对TextView点击样式改变)

selector 1.selector 从单词的意思来说:选择者,选择器,就是对你的目标的控制. 从API来说: A controller for the selection of SelectableChannel objects. Selectable channels can be registered with a selector and get a SelectionKey that represents the registration. The keys are also add