ExtJS 5.0 - Changing combobox displayField at runtime - extjs

Question

I have data with two possible display fields: en and fr. Depending on the locale of the user, I'd like to use one or the other as displayField in the combobox, ideally dynamically.
Among many other approaches, I have tried setting displayField to 'en' or 'fr' in initComponent of the combobox, even before this.callParent but it doesn't work right. It might show the correct values in the dropdown, but it won't show it as a selection or sometimes won't even let you select values.
// The sample data
var digits = [
{id: 1, en: 'one', fr: 'un'},
{id: 2, en: 'two', fr: 'deux'},
{id: 3, en: 'three', fr: 'trois'},
{id: 4, en: 'four', fr: 'quatre'},
{id: 5, en: 'five', fr: 'cinq'},
{id: 6, en: 'six', fr: 'six'},
{id: 7, en: 'seven', fr: 'sept'},
{id: 8, en: 'eight', fr: 'huit'},
{id: 9, en: 'nine', fr: 'neuf'},
{id: 10, en: 'zero', fr: 'zéro'}
];
// Define the model for a digit
Ext.define('Digit', {
extend: 'Ext.data.Model',
fields: [
{type: 'integer', name: 'id'},
{type: 'string', name: 'en'},
{type: 'string', name: 'fr'}
]
});
// The data store holding the digits
var store = Ext.create('Ext.data.Store', {
model: 'Digit',
data: digits
});
// Simple form
Ext.create('Ext.form.Panel', {
title: 'Digits',
bodyPadding: 10,
width: 300,
layout: 'anchor',
items: [{
xtype: 'combobox',
fieldLabel: 'Select a digit',
valueField: 'id',
displayField: 'en',
store: store,
queryMode: 'local',
typeAhead: true/*,
// This code will prevent the combobox from working properly.
// Even commenting out this.displayField = 'fr'; mucks it up!
initComponent:
function () {
this.displayField = 'fr';
this.callParent(arguments);
}*/
}],
renderTo: Ext.getBody()
});
I've looked through the component and it appears even in initComponent before calling this.callParent that the combobox is completely initialized.
Is there some other way to set displayField of a combobox at runtime and have it work correctly?

Answer 1

Try this (tested in a fiddle with ExtJS 5.0.0 and 5.0.1):
Ext.create('Ext.form.Panel', {
title: 'Digits',
bodyPadding: 10,
width: 300,
layout: 'anchor',
items: [{
xtype: 'combobox',
fieldLabel: 'Select a digit',
valueField: 'id',
displayField: 'en',
store: store,
queryMode: 'local',
typeAhead: true,
initComponent: function () {
me = this;
me.displayField = 'fr';
this.callParent(arguments);
}
}],
renderTo: Ext.getBody()
});
With ExtJS5.1 this would work fine:
Ext.create('Ext.form.Panel', {
title : 'Digits',
bodyPadding: 10,
width : 300,
layout : 'anchor',
items: [{
xtype : 'combobox',
fieldLabel : 'Select a digit',
valueField : 'id',
displayField: 'en',
store : store,
queryMode : 'local',
typeAhead : true,
listeners: {
render: function(combobox) {
combobox.setDisplayField('fr');
}
}
}],
renderTo: Ext.getBody()
});