Question

我的数据有两个可能的显示字段：en和fr。根据用户的区域设置，我希望在组合框中使用displayField中的一个，理想情况下是动态的。

在众多其他方法中，我尝试在displayField的{{1}}中将'en'设置为'fr'或initComponent，甚至在this.callParent之前，但它没有＆＃ 39;工作正确。它可能会在下拉列表中显示正确的值，但它不会将其显示为选择，有时甚至不会让您选择值。

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

ExtJS 5.0 - 在运行时更改组合框displayField

1 个答案: