Icon In ExtJs Combo

Question

How to display Icon along with display field in ExtJs Combo.Is There any extension for extjs combo. Please provide some samples.

Answer 1

For ExtJS4 add a listConfig with getInnerTpl Method to the combobox:

xtype: 'combobox',
anchor: '100%',
listConfig: {
  getInnerTpl: function(displayField) {
    return '<img src="/images/icons/{id}.png" class="icon"/> {' + displayField + '}';
  }
},
name: 'type',
fieldLabel: 'Group Type',
displayField: 'label',
hiddenName: 'type',
queryMode: 'local',
store: 'group.Types',
valueField: 'id'

Answer 2

Refer this :

Workaround-Image-in-Combobox-options

Country selector with flag images in ExtJS

Answer 3

Another way, I think is possible to improve it but works ok for me:

  ,store: new Ext.data.ArrayStore({
              id: 0,
              fields: [
                'lang', 'desc','url'
             ],
             data: [['CA','Spanish','es.gif'],['VA','Valencian','va.gif']]
 })

 ,tpl : '<tpl for=".">'+
                 '<tpl if="0==0"><div class="x-combo-list-item" ><img src="../img/{url}">       {desc}</div></tpl>'+
                '</tpl>'