如果在Java代码中树的Node不设置cls的话,Extjs Tree默认的图标是Folder类型的,可以通过CSS来更改图标。位置在ext\resources\css\ext-all.css.
在css文件中找到
.x-tree-node-collapsed .x-tree-node-icon{background-image:url(../images/default/tree/folder.gif);}
.x-tree-node-expanded .x-tree-node-icon{background-image:url(../images/default/tree/folder-open.gif);}
.x-tree-node-leaf .x-tree-node-icon{background-image:url(../images/default/tree/leaf.gif);}
分别是展开前、展开后以及最没有子节点时的图标,我们可以更改成自己想要的图标
treePanel.on('click',function(n){
n.getUI().getIconEl().src = '../../images/icons/checked.png';
});
首先,写一个js文件,扩展Ext.form.comboBox,
Ext.namespace('Ext.ux');
Ext.ux.IconCombo = function(config) {
Ext.ux.IconCombo.superclass.constructor.call(this, config);
this.tpl = config.tpl ||
'<tpl for="."><div class="x-combo-list-item x-icon-combo-item {'
+ this.iconClsField
+ '}">{'
+ this.displayField
+ '}</div></tpl>'
;
this.on({
render:{scope:this, fn:function() {
var wrap = this.el.up('div.x-form-field-wrap');
this.wrap.applyStyles({position:'relative'});
this.el.addClass('x-icon-combo-input');
this.flag = Ext.DomHelper.append(wrap, {
tag: 'div', style:'position:absolute'
});
}}
});
}
Ext.extend(Ext.ux.IconCombo, Ext.form.ComboBox, {
setIconCls: function() {
var rec = this.store.query(this.valueField, this.getValue()).itemAt(0);
if(rec) {
this.flag.className = 'x-icon-combo-icon ' + rec.get(this.iconClsField);
}
},
setValue: function(value) {
Ext.ux.IconCombo.superclass.setValue.call(this, value);
this.setIconCls();
}
});
必须有此样式对应:
.x-icon-combo-icon {
background-repeat: no-repeat;
background-position: 0 50%;
width: 18px;
height: 14px;}
把该js 包含到jsp页面上,现在是调用扩展的图标下拉框了:
var icnCombo = new Ext.ux.IconCombo({
store: new Ext.data.SimpleStore({
fields: ['iconCode', 'iconName', 'iconCSS'],
data: [
['', '默认样式', ''],
['add', '样式1', 'add'],
['edit', '样式2', 'edit'],
['details', '样式3', 'details']
]
}),
valueField: 'iconCode',
displayField: 'iconName',
iconClsField: 'iconCSS',
triggerAction: 'all',
fieldLabel : '图标样式',
hiddenName : "menu.iconCls",
name : "menu.iconCls",
editable:false,
mode: 'local',
id: 'iconCombo',
width: 160
});
在css文件中找到
.x-tree-node-collapsed .x-tree-node-icon{background-image:url(../images/default/tree/folder.gif);}
.x-tree-node-expanded .x-tree-node-icon{background-image:url(../images/default/tree/folder-open.gif);}
.x-tree-node-leaf .x-tree-node-icon{background-image:url(../images/default/tree/leaf.gif);}
分别是展开前、展开后以及最没有子节点时的图标,我们可以更改成自己想要的图标
treePanel.on('click',function(n){
n.getUI().getIconEl().src = '../../images/icons/checked.png';
});
首先,写一个js文件,扩展Ext.form.comboBox,
Ext.namespace('Ext.ux');
Ext.ux.IconCombo = function(config) {
Ext.ux.IconCombo.superclass.constructor.call(this, config);
this.tpl = config.tpl ||
'<tpl for="."><div class="x-combo-list-item x-icon-combo-item {'
+ this.iconClsField
+ '}">{'
+ this.displayField
+ '}</div></tpl>'
;
this.on({
render:{scope:this, fn:function() {
var wrap = this.el.up('div.x-form-field-wrap');
this.wrap.applyStyles({position:'relative'});
this.el.addClass('x-icon-combo-input');
this.flag = Ext.DomHelper.append(wrap, {
tag: 'div', style:'position:absolute'
});
}}
});
}
Ext.extend(Ext.ux.IconCombo, Ext.form.ComboBox, {
setIconCls: function() {
var rec = this.store.query(this.valueField, this.getValue()).itemAt(0);
if(rec) {
this.flag.className = 'x-icon-combo-icon ' + rec.get(this.iconClsField);
}
},
setValue: function(value) {
Ext.ux.IconCombo.superclass.setValue.call(this, value);
this.setIconCls();
}
});
必须有此样式对应:
.x-icon-combo-icon {
background-repeat: no-repeat;
background-position: 0 50%;
width: 18px;
height: 14px;}
把该js 包含到jsp页面上,现在是调用扩展的图标下拉框了:
var icnCombo = new Ext.ux.IconCombo({
store: new Ext.data.SimpleStore({
fields: ['iconCode', 'iconName', 'iconCSS'],
data: [
['', '默认样式', ''],
['add', '样式1', 'add'],
['edit', '样式2', 'edit'],
['details', '样式3', 'details']
]
}),
valueField: 'iconCode',
displayField: 'iconName',
iconClsField: 'iconCSS',
triggerAction: 'all',
fieldLabel : '图标样式',
hiddenName : "menu.iconCls",
name : "menu.iconCls",
editable:false,
mode: 'local',
id: 'iconCombo',
width: 160
});
发表评论
-
一个故事讲清楚NIO(转载)
2015-10-22 11:32 620假设某银行只有10个职 ... -
js一些菜单例子
2012-12-03 15:21 793JS树 录结构菜单 演示地址: http://vip.5d. ... -
Servlet.service() for servlet jsp threw exception,NullPointerException
2012-10-09 17:07 10982011-7-28 2:09:33 org.apache.ca ... -
如何远程连接db2数据库
2012-09-18 10:10 897在DB2数据库中,编目(catal ... -
[转]DB2行列转换
2012-09-13 13:15 816行转列 给出下面的数据: CREATE TABLE Sales ... -
存储过程 入门
2012-09-07 09:49 862示例说明:先创建一个临时表,并插入数据,然后查询临时表,返回游 ... -
ue使用的一些小技巧
2012-09-05 11:36 12011. UE里面替换tab键为空格 解决使用UE编辑好 ... -
Ext.data.Store使用示例
2012-04-16 20:34 1254Ext.data.Store是EXT中用来 ... -
js六种数据类型和var
2012-04-13 14:32 1216JavaScript 有六种数据类 ... -
ExtJs 控制复选框disabled
2012-04-13 14:12 2859var csm2 = new Ext.grid.Checkbo ... -
JS 四舍五入
2012-04-10 23:36 916写法巨强的四舍五入的转换函数,如下: function ro ... -
Ext el属性
2012-04-10 23:08 847这个是你要将你的组件渲染到哪个div 比如有个<div ... -
getOutputStream() has already been called for this response
2012-04-06 17:33 942getOutputStream() has al ... -
修改TOMCAT(5.5版本前)内存的方法
2012-03-30 11:34 1068Tomcat默认可以使用的内 ... -
oracle 常用sql
2012-03-27 10:49 808--创建用户 CREATE USER &q ... -
两台windows服务器----SVN的迁移
2012-03-26 17:27 1117两台服务器,进行SVN的迁移: 系统平台:windows se ... -
hibernate 延迟加载
2012-03-23 18:06 739延迟加载机制是为了避 ... -
分享一个ldap验证链接的方法
2012-03-22 12:07 1076public String auth(String userN ... -
poi 操作excel
2012-03-19 21:52 1105本篇面向对象为Java的初 ... -
Oracle Minus关键字
2012-03-06 15:56 1099//--一句话 去同存异,留第一个sql里面的结果。 //创建 ...
相关推荐
3.7.3. 默认图标好单调,改一下撒 3.7.4. 偷偷告诉你咋从节点弹出对话框 3.7.5. 小小提示 3.7.6. 给树节点设置超链接 3.8. 灰壳显灵!让我直接修改树节点的名称吧! 3.9. 我拖,我拖,我拖拖拖。 3.9.1. 树形节点的...
9.2. 带全选的checkbox树形CheckBoxTree 9.3. 带全选的checkbox的grid 9.4. fisheye 9.5. 可以设置时间的日期控件 9.6. JsonView实现用户卡片拖拽与右键菜单 9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧!...
.x-tree-node-collapsed .x-tree-node-icon { background:transparent url(web/css/images/default/tree/1.gif); } .x-tree-node-expanded .x-tree-node-icon { background:transparent url(web/css/images/default...
9.2. 带全选的checkbox树形CheckBoxTree 9.3. 带全选的checkbox的grid 9.4. fisheye 9.5. 可以设置时间的日期控件 9.6. JsonView实现用户卡片拖拽与右键菜单 9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧!...
这个包是在之前包的基础上多加了很多功能。 原来的内容: 1ext2.2源码及例子 2深入浅出extJs例子 3自己写的例子 470过个插件 新增内容: ...4动态修改树节点图标和提示层 5ext结合mxGraph作出流程图编辑器
10.4 修改节点的默认图标 10.5 从节点弹出对话框 10.6 节点提示信息 10.7 为节点设置超链接 10.8 树形的拖放 10.8.1 节点拖放的3种形式 10.8.2 叶子不能append 10.8.3 判断拖放的目标 10.8.4 树之间的拖放 ...
10.4 修改节点的默认图标 10.5 从节点弹出对话框 10.6 节点提示信息 10.7 为节点设置超链接 10.8 树形的拖放 10.8.1 节点拖放的3种形式 10.8.2 叶子不能append 10.8.3 判断拖放的目标 10.8.4 树之间的拖放 ...
+为所有Panel(包括Grid,Tree,Form等)增加枚举类型Icon,其中包含1700多个小图标。 -如果Panel具有IconUrl属性,则IconUrl优先于Icon。 -所有Icon的列表在icon.aspx。 -为Button,MenuItem(MenuButton,...
+为所有Panel(包括Grid,Tree,Form等)增加枚举类型Icon,其中包含1700多个小图标。 -如果Panel具有IconUrl属性,则IconUrl优先于Icon。 -所有Icon的列表在icon.aspx。 -为Button,MenuItem(MenuButton,...
indows版下载地址: ...3.打开ext2fs UUID 4.GMA添加了一些HD3000显卡的修改 5.修复了GUI themese问题 6.添加Nvidia和Ati的一些芯片ID:630m 9600GT 9500MG HD5670 7.添加了对于新的处理器的检测 8.修复主题中图标问题