title: ComboBox does not display selected value
body: <p>I am having a ComboBox with a quite simple config as you can see in <a href="https://fiddle.sencha.com/#fiddle/un3" rel="nofollow">this fiddle</a>.</p>
  
  <p>The problem is that when I select a value in the drop-down list, it is not displayed in the combo's text field and I can't figure out why.</p>
  
  <p>Also, I have set the property hideTrigger to <strong>true</strong> but the combo's trigger is still displayed.</p>
  
  <p>Here is the fiddle code if you can't access it :</p>
  
  <pre><code>Ext.define('MyApp.LanguageCombo', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.myapp.LanguageCombo',
  
    initComponent: function() {
      Ext.apply(this, this.factory());
      this.callParent();
    },
  
    factory: function() {
      return {
          store: Ext.create('Ext.data.JsonStore', {
              proxy: {
                  type: 'memory',
              },
              fields: ['id', 'name'],
              data: [{"name":"afar","id":"aar"},{"name":"austro-asiatiques, langues","id":"aav"},{"name":"abkhaze","id":"abk"},{"name":"aceh","id":"ace"},{"name":"acolo (syn : acoli, gang)","id":"ach"},{"name":"adangbme (syn : adan, adagbe, adame)","id":"ada"},{"name":"adygh\u00e9","id":"ady"},{"name":"afro-asiatiques, langues","id":"afa"},{"name":"afrihili","id":"afh"},{"name":"afrikaans","id":"afr"},{"name":"a\u00efnou","id":"ain"},{"name":"aljamia (syn : aljamiada)","id":"ajm"},{"name":"akan (syn : twi)","id":"aka"},{"name":"akkadien","id":"akk"},{"name":"albanais","id":"alb"},{"name":"al\u00e9oute (syn : al\u00e9out, aleut)","id":"ale"},{"name":"algonquines, langues","id":"alg"},{"name":"altai du Sud","id":"alt"},{"name":"atlantique-congo, langues","id":"alv"},{"name":"amharique","id":"amh"},{"name":"anglo-saxon (ca.450-1100)","id":"ang"},{"name":"angika","id":"anp"},{"name":"apaches, langues","id":"apa"},{"name":"alacalufanes, langues","id":"aqa"},{"name":"algiques, langues","id":"aql"},{"name":"arabe","id":"ara"},{"name":"aram\u00e9en d'empire (700-300 BCE)","id":"arc"},{"name":"aragonais","id":"arg"},{"name":"arm\u00e9nien","id":"arm"},{"name":"mapudungun (syn : mapuche, mapuce)","id":"arn"},{"name":"arapaho","id":"arp"},{"name":"artificielles, langues","id":"art"},{"name":"arawak","id":"arw"},{"name":"assamais","id":"asm"},{"name":"asturien (syn : bable, l\u00e9onais, asturol\u00e9onais)","id":"ast"},{"name":"athapascanes, langues","id":"ath"},{"name":"arauanes, langues","id":"auf"},{"name":"australiennes, langues","id":"aus"},{"name":"avar","id":"ava"},{"name":"avestique (syn : ancien, zend)","id":"ave"},{"name":"awadhi","id":"awa"},{"name":"arawak, langues","id":"awd"},{"name":"aymara","id":"aym"},{"name":"uto-azt\u00e8ques, langues","id":"azc"},{"name":"az\u00e9ri (syn : azerbaidjanais)","id":"aze"},{"name":"banda, langues","id":"bad"},{"name":"bamil\u00e9k\u00e9, langues","id":"bai"},{"name":"bachkir (syn : baskir)","id":"bak"},{"name":"baloutchi","id":"bal"},{"name":"bambara","id":"bam"},{"name":"balinais","id":"ban"},{"name":"basque","id":"baq"},{"name":"basa (syn : bassa)","id":"bas"},{"name":"baltes, langues","id":"bat"},{"name":"bedja (syn : beja, bichari)","id":"bej"},{"name":"bi\u00e9lorusse","id":"bel"},{"name":"bemba","id":"bem"},{"name":"bengali","id":"ben"},{"name":"berb\u00e8res, langues","id":"ber"},{"name":"bhojpuri","id":"bho"},{"name":"langues biharis","id":"bih"},{"name":"bikol","id":"bik"}],
          }),
          displayField: 'name',
          valueField: 'id',
          hideTrigger: true,
          validate: function() {
              var languagesWithSameCodeAndName = ['ewe', 'fon', 'ido', 'kom', 'lao', 'ocf', 'tiv', 'twi', 'vai', 'yao'];
              return Ext.isEmpty(this.getRawValue()) 
                  || this.getValue() != this.getRawValue() 
                  || languagesWithSameCodeAndName.indexOf(this.getValue()) != -1;
  
          },
          tpl: Ext.create('Ext.XTemplate',
               '&lt;tpl for="."&gt;&lt;li role="option" class="x-boundlist-item" data-qtip="{[this.valueRenderer(values)]}"&gt;{[this.valueRenderer(values)]}&lt;/li&gt;&lt;/tpl&gt;',
              {
                  valueRenderer: function(values) {
                      return Ext.String.format('[{0}] {1}', values.id, values.name);
                  },
              }
          )
      }
    }
  }); 
  
  
  
  Ext.application({
    name: 'Fiddle',
    launch: function() {
      Ext.create('Ext.container.Container', {
          renderTo: Ext.getBody(),
          items: [{
              xtype: 'myapp.LanguageCombo',
              fieldLabel: 'Language',
              width: 320,
              margin: 15,
          }],
      })
    }
  });
  </code></pre>