73. 解决ExtJS TreePanel 的 iconCls设置问题
转自:https://blog.csdn.net/hanchuang213/article/details/62881568
很久没有写代码了,最近在做一个在线帮助网站,于是又捡起了 ExtJS,我用 TreePanel 做为左边栏的导航树,我希望能够根据节点指向的内容来定义节点的图标,如以下的样子:
展开节点以前
展开节点以后
如果节点包含有子节点,则该节点就有 “展开” 和 “关闭” 这两种状态,我希望能过通过设置自己的样式表来控制指定节点的这两种状态下的图标,就如上图那样。
查看了 ExtJS 的帮助文档,文档提到 Ext.Tree.Panel 有一个 iconCls 设置项,但寥寥数语,没有详细的介绍如何使用,更没有提供范例代码:
于是我在节点数据中添加了这个属性(我借用了ExtJS 提供的范例 layout-browser 来测试),并参考了网站上搜索到的许多方法试着去实现这个效果,节点数据如下所示:
但却发现,无论我怎么定义 CSS ,均不能实现我所需要的效果,通过以下样式定义,只能设置节点 “关闭” 状态的图标,一旦展开节点,图标仍是默认的文件夹
样式表如下:
也就是只有 .myicon {...},和 .myicon2 {...}, 这两行定义有效,第二行定义展开节点样式的设置没有起作用,尽管网上提供了许多的范例,逐一试过均无效果(我用的是 ExtJS 4.1.0,不知道是不是版本的问题)。
于是开始分析 ExtJS 的代码了,在 ext-all-dev.js 找到定义节点图标样式的代码(打开文件,用 “expandedCls” 关键字搜索可以找到相应的代码段 ),分析后我认为,ExtJS 没有很好的处理 iconCls 这个属性,我们需要做一点修改,红色框部分是我添加的代码,添加后问题解决了,而且从原来的代码看,这里应该还定义了叶子节点(leaf 为 true 的节点 )和节点加载数据时的图标状态,这里我仅对节点的 “展开” 和 “关闭” 这两种状态做了测试,其他的大家可以自己尝试一下。
附:
Json代码:
[javascript] view plaincopy
{
text: '.',
children: [{
text:'Basic Ext Layouts',
iconCls:'myicon',
expanded: false,
children:[{
text:'Absolute',
id:'absolute',
iconCls: 'myicon2',
leaf:true
}]
},{
text:'Custom Layouts',
children:[{
text:'Center',
id:'center',
leaf:true
}]
},{
text:'Combination Examples',
iconCls:'myicon2',
children:[{
text:'Absolute Layout Form',
id:'abs-form',
leaf:true
},{
text:'Tabs with Nested Layouts',
id:'tabs-nested-layouts',
leaf:true
}]
}]
}
样式表设置代码:
[css]
.myicon {background-image: url(images/spellcheck.png)}
.x-grid-tree-node-expanded .myicon
{
/* the icon */
background-image: url(images/printer.png);
}
.myicon2 {background-image: url(images/page_attach.png)}
.x-grid-tree-node-expanded .myicon2
{
/* the icon */
background-image: url(images/disk.png);
}
修改代码段:
[javascript]
for (; i < len; i++) {
row = rows[i];
record = records[i];
if (record.get('qtip')) {
row.rowAttr = 'data-qtip="' + record.get('qtip') + '"';
if (record.get('qtitle')) {
row.rowAttr += ' ' + 'data-qtitle="' + record.get('qtitle') + '"';
}
}
if (record.isExpanded()) {
row.rowCls = (row.rowCls || '') + ' ' + this.expandedCls;
}
if (record.isLeaf()) {
row.rowCls = (row.rowCls || '') + ' ' + this.leafCls;
}
if (record.isLoading()) {
row.rowCls = (row.rowCls || '') + ' ' + this.loadingCls;
}
if (record.get('iconCls').length > 0) {
row.rowCls = (row.rowCls || '') + ' ' + record.get('iconCls');
}
}
作者:sz_gambol
73. 解决ExtJS TreePanel 的 iconCls设置问题相关推荐
- cls extjs5_73. 解决ExtJS TreePanel 的 iconCls设置问题
转自:https://blog.csdn.net/hanchuang213/article/details/62881568 很久没有写代码了,最近在做一个在线帮助网站,于是又捡起了 ExtJS,我用 ...
- ExtJs TreePanel 不能加载ashx数据的解决办法
今天学习Extjs TreePanel 时在加载动态数据时经常加载不进来,因为我是使用MVC2获取动态数据的,单独调试MVC的返回数据时OK的,网上有很多解决方案,其中最简单的是: loader: n ...
- Android webview 写入cookie的解决方法以及一些属性设置
Android webview 写入cookie的解决方法以及一些属性设置 参考文章: (1)Android webview 写入cookie的解决方法以及一些属性设置 (2)https://www. ...
- 解决datagrid单元格不能设置100%问题
//解决datagrid单元格不能设置100%问题 function fixWidth(percent) { return document.body.cli ...
- java heap 参数_java heap space解决方法和JVM参数设置
因为程序要从数据读取近10W行记录处理,当读到9W的时候就出现 java.lang.OutOfMemoryError: Java heap space 这样的错误. 在网上一查可能是JAVA的堆栈设置 ...
- 解决给word中表格设置“跨页断行”后出现大片空白
解决给word中表格设置"跨页断行"后出现大片空白 在写文档时出现了如下难堪情景,那个字他就是不到下一页去,它不想分开,就硬给它分开. 解决办法:在表格处右击,"表格属性 ...
- 解决WORD疑难之:设置节起始页码后出现诡异隐藏页/跳页、节首页页面边框丢失
解决WORD疑难之:设置节起始页码后出现诡异隐藏页/跳页.节首页页面边框丢失 适用软件及版本:MS OFFICE2003 pro中的WORD,其它版本应可适用. 适用人群:编排大中型复杂文档的用户 症 ...
- [完美解决]无线网卡windows仍在设置此设备的类配置,代码56
[完美解决]无线网卡windows仍在设置此设备的类配置,代码56 先说一下痛点,最近电脑突然连不上WIFI了,打开设备管理器卸载驱动也好,重启也好,不管用,理所当然的就以为是家里来的修电 ...
- 解决自己在docker中设置redis密码不生效的问题
解决自己在docker中设置redis密码不生效的问题 配置文件官网下载 下载解压后得到redis.conf文件 我的redis.conf文件 网盘 提取码:1szk 正确的在redis启动redis ...
最新文章
- ​人工神网络来解码皮质电图(ECoG)数据
- 三维视觉传感器的类型
- Java 洛谷 P1152 欢乐的跳
- ffplay分析(视频解码线程的操作)
- 备份软件选择---gengzy@dc
- linux桥接命令virsh,CentOS6.3 KVM如何设置网卡为桥接模式
- Flex皮肤制作教程
- html 字符转换 ascii,HTML ASCII
- 前后端分离前端框架的主要内容是什么?
- 2015-4-26分享的PDF
- Android UI绘制流程源码详细讲解Draw(Canvas canvas)
- 【资料分享】正念书单:7大经典著作,有效释放压力、缓解焦虑、治疗抑郁!
- 2.东软跨境电商数仓项目技术选型
- 自己的电脑不能连接打印机打印怎么办
- 计算机浏览器无法上网怎么办,电脑ie浏览器无法上网,浅析win10电脑ie浏览器无法上网的解决方法...
- security基于数据库的认证
- 发现一个叫阿尔法城的小站(以后此贴为我记录日常常用网址的帖子了)
- 量化交易 米筐 策略回测总结
- 用RGBD投影激光雷达数据:depthimage_to_laserscan
- 序列召回基础+GRU4Rec论文阅读
热门文章
- 应用深度学习EEGNet来处理脑电信号
- idea网页预览功能_IDEA 2020.2 重磅发布,动画级新功能预览!
- 将整本《绿野仙踪》存入纳米级DNA中,高效准确,读取无压力
- 两年伯克利数学博士毕业,蝉联阿里数学竞赛金奖,张钺:我就是个普通人
- 疫情凶险,开学延期:在家中陪孩子,需要注意这3点
- 倒下的RoadStar结局来了:VC清盘止损,三位创业者承担1亿债务,打着官司各投林...
- 阿里CTO张建锋:云拐点已至,All in cloud;贾扬清完整title公开
- BERT和ERNIE谁更强?这里有一份4大场景的细致评测
- ZJOI2019 Day2 游记
- css文本 颜色1