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 - 在运行时更改组合框显示

回答

相关问题