Ext.form.ComboBox: Use template for displayField

Question

Is there any way to apply a template to the selected value of a ComboBox? I'm using a template to display the drop down values of the ComboBox, but as soon as i select one, the plain value from the datastore is shown.

{
  id:               'requestStatusCombo',
  hiddenName:       'requestStatus',
  tpl:             '<tpl for="."><div class="x-combo-list-item">{statusCode:requestStatus}</div></tpl>',
  fieldLabel:       'Status',
  xtype:             'combo',
  mode:           'local',
  triggerAction:     'all',
  store:             new Ext.data.ArrayStore({
      fields:       ['statusCode'],
      data:       [['unassigned'],['assigned'],['closed']]
  }),
  valueField:       'statusCode',
  displayField: 'statusCode'
}

I want to use my format function requestStatus to translate the statusCodes into locale spesific status names, and this works well for the drop down list, but as soon as I select something, the statusCode is shown.

So is it possible to assign a template to the displayField, or perhaps do some simple batch modification on the datastore? By processing the input through a reader maybe? Is there another <tpl for="?"> keyword that will make this happen?

I'm looking for some simple method utilizing the Ext library. If the only solution is to pre process the data, I'm capable of doing that myself.

Answer 1

Examinig generated DOM you will notice that while list elements are DIVs, the field itself is html INPUT element. You can't have HTML within INPUT element... so no... no xtemplate here.

This does not mean it can't be done by extending Ext.form.ComboBox (or Ext.Component maybe)

Answer 2

I found a solution!

I changed my datastore, and added a reader to pre-process the status using a convert function:

{
  id:               'requestStatusCombo',
  hiddenName:       'requestStatus',
  fieldLabel:       'Status',
  xtype:             'combo',
  mode:           'local',
  triggerAction:     'all',
  store:             new Ext.data.Store({
      data:       [['unassigned'],['assigned'],['closed']],
      reader:       new Ext.data.ArrayReader({},[
          {name: 'statusCode',   mapping: 0},
          {name: 'displayname', mapping: 0, convert: function(statusCode) {
              return Ext.util.Format.requestStatus(statusCode);
          }}
      ])
  }),
  valueField:       'statusCode',
  displayField:   'displayname'
}