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

Question

我有兩個可能的顯示字段的數據： en和fr 。 根據用戶的語言環境，我想將一個或另一個用作組合框中的displayField ，最好是動態使用。

在許多其他方法中，我嘗試在組合框的initComponent中將displayField設置為'en'或'fr' ，甚至在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()
});

我已經瀏覽了該組件，並且在調用this.callParent之前，它甚至出現在initComponent ，該組合框已完全初始化。

還有其他方法可以在運行時設置組合框的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()
});