The following seems to work just fine for me...
Code:
/**
* Ext.ux.IconCombo Extension Class for Ext 4.x Library
*
* @author Daniel Kuhnley
* @class Ext.ux.IconCombo
* @extends Ext.form.field.ComboBox
*/
Ext.define('Ext.ux.IconCombo',{
extend:'Ext.form.field.ComboBox',
alias:'widget.iconcombo',
initComponent:function() {
Ext.apply(this, {
listConfig: {
iconClsField:this.iconClsField,
getInnerTpl: function() {
return '<tpl for=".">'
+ '<div class="x-combo-list-item ux-icon-combo-item '
+ '{' +this.iconClsField+ '}">'
+ '{' + this.displayField + '}'
+ '</div></tpl>';
},
scope:this
},
scope:this
});
// call parent initComponent
this.callParent(arguments);
}, // end of function initComponent
onRender:function(ct, position) {
// call parent onRender
this.callParent(arguments);
// adjust styles
this.bodyEl.applyStyles({position:'relative'});
this.el.down('input.x-form-field').addCls('ux-icon-combo-input');
// add div for icon
this.icon = Ext.core.DomHelper.append(this.el.down('div.x-form-item-body'), {
tag: 'div', style:'position:absolute'
});
}, // end of function onRender
setIconCls:function() {
var rec = this.store.findRecord(this.valueField, this.getValue());
if(rec) {
this.icon.className = 'ux-icon-combo-icon '+rec.get(this.iconClsField);
}
}, // end of function setIconCls
setValue: function(value) {
this.callParent(arguments);
this.setIconCls();
} // end of function setValue
});
// end of file
With css:
Code:
<style type="text/css">
.ux-flag-us {
background-image:url(images/us.png) ! important;
}
.ux-flag-de {
background-image:url(images/de.png) ! important;
}
.ux-flag-fr {
background-image:url(images/fr.png) ! important;
}
.ux-icon-combo-icon {
background-repeat: no-repeat;
background-position: 0 50%;
width: 18px;
height: 14px;
}
/* X-BROWSER-WARNING: this is not being honored by Safari */
.ux-icon-combo-input {
padding-left: 25px;
}
.x-form-item-body .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;
}
</style>
And example usage:
Code:
<script type="text/javascript">
Ext.require([
'Ext.window.Window'
]);
Ext.onReady(function() {
Ext.create('Ext.Window', {
title: 'Icon Combo Ext 4.0 Extension Class Example',
width: 400,
height: 60,
x: 10,
y: 200,
plain: true,
layout: 'fit',
items: {
xtype:'iconcombo',
fieldLabel:'IconCombo',
store: new Ext.data.SimpleStore({
fields: ['countryCode', 'countryName', 'countryFlag'],
data: [
['US', 'United States', 'ux-flag-us'],
['DE', 'Germany', 'ux-flag-de'],
['FR', 'France', 'ux-flag-fr']
]
}),
valueField: 'countryCode',
displayField: 'countryName',
iconClsField: 'countryFlag',
triggerAction: 'all',
mode: 'local'
}
}).show();
});
</script>