PDA

View Full Version : Displaying icon in ComboBox editbox area



gnube
10 Oct 2011, 2:38 AM
I can get my combox to render icons in the drop down list but have struggled to find a way to render in the edit area. Examples I have found are pre 4.x which have helped a lot but not completely.

I think there would be a small addition to what I have in my example below which will update a class/template for the selected field?


Ext.define('DynamicApp.form.FamFamIconComboBox', { extend: 'Ext.form.ComboBox',
alias: 'widget.FamFamIconComboBox',
// usage:
// {
// xtype:'FamFamIconComboBox',
// fieldLabel: 'icon,
// name: 'iconCls'
// }
store: Ext.create('DynamicApp.store.FamFamIcons',{
id: 'famfamiconcombobox'
}),


displayField: 'iconName', //the name within the store model
valueField: 'iconCode', // "
allowBlank: true,
autoSelect: true,
selectOnFocus: true,
typeahead: true
,
listConfig: {
getInnerTpl: function() {
// here you place the images in your combo
var tpl = '<div class="x-combo-list-item">'
+ '<table><tbody><tr>'
+ '<td>'
+ '<div class="{' + this.displayField + '} x-icon-combo-icon"></div></td>'
+ '<td>{' + this.displayField + '}</td>'
+ '</tr></tbody></table>'
+ '</div>';
return tpl;
}
// ,listeners: {
// 'select': function(){
// debugger;
// }
// }


}
});
Cheers