ext icon combobox

.ux-icon-combo-input {
	padding-left: 25px;
}

.x-form-field-wrap .ux-icon-combo-icon {
	top: 3px;
	left: 5px;
}

.ux-icon-combo-item {
	background-repeat: no-repeat ! important;
	background-position: 3px 50% ! important;
	padding-left: 24px ! important;
	width:120px;
	height:30px;
}

Ext.ux.IconCombo = Ext.extend(Ext.form.ComboBox, {
    initComponent:function() {
 
        Ext.apply(this, {
            tpl:  '<tpl for=".">'
                + '<div class="x-combo-list-item ux-icon-combo-item '
                + '{' + this.iconClsField + '}">'
                + '{' + this.displayField + '}'
                + '</div></tpl>'
        });
 
        // call parent initComponent
        Ext.ux.IconCombo.superclass.initComponent.call(this);
 
    }, // end of function initComponent
 
    onRender:function(ct, position) {
        // call parent onRender
        Ext.ux.IconCombo.superclass.onRender.call(this, ct, position);
 
        // adjust styles
        this.wrap.applyStyles({position:'relative'});
        this.el.addClass('ux-icon-combo-input');
 
        // add div for icon
        this.icon = Ext.DomHelper.append(this.el.up('div.x-form-field-wrap'), {
            tag: 'div', style:'position:absolute'
        });
    }, // end of function onRender
 
    setIconCls:function() {
        var rec = this.store.query(this.valueField, this.getValue()).itemAt(0);
        if(rec) {
            this.icon.className = 'ux-icon-combo-icon ' + rec.get(this.iconClsField);
        }
    }, // end of function setIconCls
 
    setValue: function(value) {
        Ext.ux.IconCombo.superclass.setValue.call(this, value);
        this.setIconCls();
    } // end of function setValue
});
 
// register xtype
Ext.reg('iconcombo', Ext.ux.IconCombo);

使用：

var severityComboStore= new Ext.data.JsonStore({
		root:'rows',
		fields:['key','value','icon'],
		data : {
			'rows':[
				{key:'',value:'严重等级:所有',icon:''},
				{key:'CRITICAL',value:'严重等级:严重',icon:'criticalIcon'},
				{key:'WARNING',value:'严重等级:告警',icon:'warningIcon'},
				{key:'UNKNOW',value:'严重等级:未知',icon:'unknowIcon'}
				//,{key:'ok',value:'正常',icon:'okIcon'}
			]
		}
	})

{
xtype : "iconcombo",
editable : false,
id : 'eventStateCombo',
mode : 'local',
triggerAction : "all",
emptyText : '事件状态',
store :eventStateComboStore,
value:'4',
valueField:'key',
displayField : 'value',
iconClsField: 'icon',
listeners:{
    "beforeselect":filterEventState	//选择事件状态过滤
}
}