ExtJS 5.0 - 在運行時更改組合框顯示

我有兩個可能的顯示字段：en和fr。根據用戶的區域設置，我想在組合框中使用其中一個或另一個作爲displayField，理想情況下是動態的。ExtJS 5.0 - 在運行時更改組合框顯示

在許多其他的方法，我已經嘗試設置甚至this.callParent之前在組合框的initComponentdisplayField到'en'或'fr'，但它不工作的權利。它可能會在下拉菜單中顯示正確的值，但不會將其顯示爲選區，有時甚至不會讓您選擇值。

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

我已經通過該組件看上去，它調用this.callParent對ComboBox完全初始化之前出現，即使在initComponent。

是否有其他方法可以在運行時設置組合框displayField並使其正常工作？

來源

2015-11-27 Yimin Rong

試一下這個（在撥弄測試與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() 
});

來源

2015-11-27 13:04:53 Michel

ExtJS 5.0 - 在運行時更改組合框顯示

回答

相關問題