Ext.form.ComboBox: Use template for displayField
Solution 1
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'
}
Solution 2
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)
Comments
-
Ivar Bonsaksen almost 2 years
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 thestatusCodes
into locale spesific status names, and this works well for the drop down list, but as soon as I select something, thestatusCode
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.