ext tree 更改图标
如果在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
});