title: ExtJS 5.0 - Changing combobox displayField at runtime
body: <p>I have data with two possible display fields: <code>en</code> and <code>fr</code>. Depending on the locale of the user, I'd like to use one or the other as <code>displayField</code> in the combobox, ideally dynamically.</p>
  
  <p>Among many other approaches, I have tried setting <code>displayField</code> to <code>'en'</code> or <code>'fr'</code> in <code>initComponent</code> of the combobox, even before <code>this.callParent</code> 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.</p>
  
  <pre><code>// 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()
  });
  </code></pre>
  
  <p>I've looked through the component and it appears even in <code>initComponent</code> before calling <code>this.callParent</code> that the combobox is completely initialized.</p>
  
  <p>Is there some other way to set <code>displayField</code> of a combobox at runtime and have it work correctly?</p>