ExtJS6 TreePanel树节点合上展开显示不同图标

时间:2022-09-02 22:47:57

TreePanel的节点如包含子节点,可在展开/合上时显示不同的图标,增强客户端效果,提高用户体验。非常简单,使用TreePanel的两个事件:beforeitemexpand和beforeitemcollapse。

Ext.define('MyTreePanel_cls', {
extend: 'Ext.tree.Panel',
height: 400,
width: 300,
store: mTreeStore,
tbar: Ext.create('TreeToolbarCls'),
listeners:
{
beforeitemexpand: function (node, index, item, eOpts)
{
node.data.iconCls = 'folder_open';
},
beforeitemcollapse: function (node, index, item, eOpts)
{
node.data.iconCls = 'folder_close';
}
}
});

在页面上要定义好folder_open和folder_close两个CSS样式。

.folder_close
{
background: url("/Image/tree/folder_close.ico") no-repeat center !important;
} .folder_open
{
background: url("/Image/tree/folder_open.ico") no-repeat center !important;
}

运行效果是这样的:

ExtJS6 TreePanel树节点合上展开显示不同图标

ExtJS6 TreePanel树节点合上展开显示不同图标的更多相关文章

  1. ext TreePanel树节点操作

    1.全部展开 tree.expandAll();2.全部收缩 tree.collapseAll();3.得到父节点 node.parentNode4.判断是否有父节点 node.parentNode= ...

  2. django部署到linux上不显示.svg图标处理方法

    在setting文件的最开始添加如下内容: import mimetypes mimetypes.add_type("image/svg+xml", ".svg&quot ...

  3. Windows XP解决显示桌面图标消失的问题

    1.依次单击“开始”,“运行”,在运行对话框中输入regsvr32 /n /i:u shell32.dll,按回车键 2.弹出“shell32.dll中的DllInstall成功”的窗口,表明已将数据 ...

  4. 转:zTree树控件key配置之title:zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称

    当树节点的名称有些很长时,全部显示出来显得很拥挤的情况下,我们会想到用省略节点名称来代替,当鼠标移入节点时能够显示该节点的全称.这样我们应该如何做呢? 首先,我们要在树的节点内多增加一个属性用于设置该 ...

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

    //***********************************************左边树开始********************************************** ...

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

    昨天有一个zTree的使用者在实际的项目中有着这样一个特殊的需求,要求同级树节点能够水平显示,根据设定的宽度自动换行,效果图如下所示:   通过在浏览器调试模式下观察其同级节点的css为: 这个dis ...

  7. JQuery/JS插件 jsTree加载树,预先加载,初始化时加载前三级节点,当展开第三级节点时 就加载该节点下的所有子节点

    jsTree加载树, 初始化时 加载前三级节点, 当展开第三级节点时 就加载该节点下的所有子节点 html: <!DOCTYPE html> <html> <head&g ...

  8. 展开easyui 树节点到某个点

    $(function () { $('#tt').tree({ url: '/IS/Department/JsonTree?companyID=@(Request.QueryString[" ...

  9. 【zTree】zTree展开树节点

    今天在做zTree树的时候想着将第一级tree展开,于是利用下面方法: /** * 展开树节点的第一层 */ function openFirstTreenode(){ // 获取树对象 var tr ...

随机推荐

  1. 推荐两篇Unity与Android交互的文章

    http://www.xuanyusong.com/archives/676 里面18,19介绍

  2. python内置的数据结构

    详解列表List 这里是列表对象方法的清单: list.append(x) 添加一个元素到列表的末尾.相当于a[len(a):] = [x]. list.extend(L) 将给定列表L中的所有元素附 ...

  3. 转JSONObject put&comma;accumulate&comma;element的区别

        public Object put (Object key, Object value) 将value映射到key下.如果此JSONObject对象之前存在一个value在这个key下,当前的 ...

  4. NET笔试题集

    题目来源于传智播客和各大互联网,复习.重新整理贴出来. 1.简述 private. protected. public. internal.protected internal 访问修饰符和访问权限 ...

  5. wait函数返回值总结,孤儿进程与僵尸进程&lbrack;总结&rsqb;

    http://blog.csdn.net/astrotycoon/article/details/41172389 wait函数返回值总结 http://www.cnblogs.com/Anker/p ...

  6. 在SSIS包中使用 Checkpoint从失败处重新启动包

    使用SSIS做ETL的过程中会遇到各种各样的错误,对于一些大数据量的Job失败以后我们不希望重新运行,因为重新运行的时间开销是非常大的,我们只希望从失败的部分开始运行,这样可以省去很多的时间. SSI ...

  7. Unity3d 帧率设置 及在游戏执行时显示帧率

    在Unity3d 中能够通过代码设置 来限定游戏帧率. Application.targetFrameRate=-1; 设置为 -1 表示不限定帧率. 转自http://blog.csdn.net/h ...

  8. 数据挖掘应用案例:RFM模型分析与客户细分(转)

    正好刚帮某电信行业完成一个数据挖掘工作,其中的RFM模型还是有一定代表性,就再把数据挖掘RFM模型的建模思路细节与大家分享一下吧!手机充值业务是一项主要电信业务形式,客户的充值行为记录正好满足RFM模 ...

  9. vue学习中v-if和v-show一起使用的问题

    v-if和v-show一起使用 在开发项目过程中v-if和v-show一起使用时,接下面跟着的v-else会在页面上面显示两次 .代码如下: <tbody class="sortabl ...

  10. JAVA中写时复制&lpar;Copy-On-Write&rpar;Map实现

    1,什么是写时复制(Copy-On-Write)容器? 写时复制是指:在并发访问的情景下,当需要修改JAVA中Containers的元素时,不直接修改该容器,而是先复制一份副本,在副本上进行修改.修改 ...