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
    });