ExtJS 5.0 - Изменение отображения comboboxField во время выполнения

Question

У меня есть данные с двумя возможными полями отображения: en и fr. В зависимости от языка пользователя, я хотел бы использовать один или другой как displayField в combobox, в идеале динамически.

Среди многих других подходов, я попытался установить displayField к 'en' или 'fr' в initComponent из выпадающего списка, еще до this.callParent, но он не работает правильно. Он может отображать правильные значения в раскрывающемся списке, но он не будет отображать его как выбор или иногда даже не позволит вам выбирать значения.

// 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() 
}); 

Я посмотрел через компонент и, кажется, даже в initComponent перед вызовом this.callParent, что выпадающий полностью инициализирован.

Есть ли другой способ установить displayField выпадающего списка во время выполнения и заставить его работать правильно?

Answer 1

Постарайся это (проверено в скрипкой с ExtJS 5.0.0 и 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() 
}); 

С ExtJS5.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, 
     listeners: { 
      render: function(combobox) { 
       combobox.setDisplayField('fr'); 
      } 
     } 
    }], 
    renderTo: Ext.getBody() 
});