ComboBox 不显示选定的值

Question

我有一个配置非常简单的 ComboBox，如您在 this fiddle 中所见。

问题是当我 select 下拉列表中的一个值时，它没有显示在组合的文本字段中，我不明白为什么。

此外，我已将属性 hideTrigger 设置为 true 但组合的触发器仍然显示。

这是 fiddle 代码，如果您无法访问它：

Ext.define('MyApp.LanguageCombo', {
  extend: 'Ext.form.field.ComboBox',
  alias: 'widget.myapp.LanguageCombo',

  initComponent: function() {
    Ext.apply(this, this.factory());
    this.callParent();
  },

  factory: function() {
    return {
        store: Ext.create('Ext.data.JsonStore', {
            proxy: {
                type: 'memory',
            },
            fields: ['id', 'name'],
            data: [{"name":"afar","id":"aar"},{"name":"austro-asiatiques, langues","id":"aav"},{"name":"abkhaze","id":"abk"},{"name":"aceh","id":"ace"},{"name":"acolo (syn : acoli, gang)","id":"ach"},{"name":"adangbme (syn : adan, adagbe, adame)","id":"ada"},{"name":"adygh\u00e9","id":"ady"},{"name":"afro-asiatiques, langues","id":"afa"},{"name":"afrihili","id":"afh"},{"name":"afrikaans","id":"afr"},{"name":"a\u00efnou","id":"ain"},{"name":"aljamia (syn : aljamiada)","id":"ajm"},{"name":"akan (syn : twi)","id":"aka"},{"name":"akkadien","id":"akk"},{"name":"albanais","id":"alb"},{"name":"al\u00e9oute (syn : al\u00e9out, aleut)","id":"ale"},{"name":"algonquines, langues","id":"alg"},{"name":"altai du Sud","id":"alt"},{"name":"atlantique-congo, langues","id":"alv"},{"name":"amharique","id":"amh"},{"name":"anglo-saxon (ca.450-1100)","id":"ang"},{"name":"angika","id":"anp"},{"name":"apaches, langues","id":"apa"},{"name":"alacalufanes, langues","id":"aqa"},{"name":"algiques, langues","id":"aql"},{"name":"arabe","id":"ara"},{"name":"aram\u00e9en d'empire (700-300 BCE)","id":"arc"},{"name":"aragonais","id":"arg"},{"name":"arm\u00e9nien","id":"arm"},{"name":"mapudungun (syn : mapuche, mapuce)","id":"arn"},{"name":"arapaho","id":"arp"},{"name":"artificielles, langues","id":"art"},{"name":"arawak","id":"arw"},{"name":"assamais","id":"asm"},{"name":"asturien (syn : bable, l\u00e9onais, asturol\u00e9onais)","id":"ast"},{"name":"athapascanes, langues","id":"ath"},{"name":"arauanes, langues","id":"auf"},{"name":"australiennes, langues","id":"aus"},{"name":"avar","id":"ava"},{"name":"avestique (syn : ancien, zend)","id":"ave"},{"name":"awadhi","id":"awa"},{"name":"arawak, langues","id":"awd"},{"name":"aymara","id":"aym"},{"name":"uto-azt\u00e8ques, langues","id":"azc"},{"name":"az\u00e9ri (syn : azerbaidjanais)","id":"aze"},{"name":"banda, langues","id":"bad"},{"name":"bamil\u00e9k\u00e9, langues","id":"bai"},{"name":"bachkir (syn : baskir)","id":"bak"},{"name":"baloutchi","id":"bal"},{"name":"bambara","id":"bam"},{"name":"balinais","id":"ban"},{"name":"basque","id":"baq"},{"name":"basa (syn : bassa)","id":"bas"},{"name":"baltes, langues","id":"bat"},{"name":"bedja (syn : beja, bichari)","id":"bej"},{"name":"bi\u00e9lorusse","id":"bel"},{"name":"bemba","id":"bem"},{"name":"bengali","id":"ben"},{"name":"berb\u00e8res, langues","id":"ber"},{"name":"bhojpuri","id":"bho"},{"name":"langues biharis","id":"bih"},{"name":"bikol","id":"bik"}],
        }),
        displayField: 'name',
        valueField: 'id',
        hideTrigger: true,
        validate: function() {
            var languagesWithSameCodeAndName = ['ewe', 'fon', 'ido', 'kom', 'lao', 'ocf', 'tiv', 'twi', 'vai', 'yao'];
            return Ext.isEmpty(this.getRawValue()) 
                || this.getValue() != this.getRawValue() 
                || languagesWithSameCodeAndName.indexOf(this.getValue()) != -1;

        },
        tpl: Ext.create('Ext.XTemplate',
             '<tpl for="."><li role="option" class="x-boundlist-item" data-qtip="{[this.valueRenderer(values)]}">{[this.valueRenderer(values)]}</li></tpl>',
            {
                valueRenderer: function(values) {
                    return Ext.String.format('[{0}] {1}', values.id, values.name);
                },
            }
        )
    }
  }
}); 



Ext.application({
  name: 'Fiddle',
  launch: function() {
    Ext.create('Ext.container.Container', {
        renderTo: Ext.getBody(),
        items: [{
            xtype: 'myapp.LanguageCombo',
            fieldLabel: 'Language',
            width: 320,
            margin: 15,
        }],
    })
  }
});

Answer 1

在您的组合声明中，在此处添加您的显示字段：

{
     xtype: 'myapp.LanguageCombo',
     fieldLabel: 'Language',
     width: 320,
     displayField: 'name', // add here
     margin: 15
}

Answer 2

这是由于您的部分工厂对象包含部分配置：

Ext.define('MyApp.LanguageCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.myapp.LanguageCombo',

initConfig: function() {
    Ext.apply(this.config, this.factoryConfig());
    Ext.apply(this, this.factory());
    this.callParent(arguments);
},

factoryConfig: function() {
    return {
        displayField: 'name',
        valueField: 'id',
        hideTrigger: true
    }
},
factory: function() {
    return {
        store: Ext.create('Ext.data.JsonStore', {
            proxy: {
                type: 'memory',
            },
            fields: ['id', 'name'],
            data: [{
                "name": "afar",
                "id": "aar"
            }, {
                "name": "austro-asiatiques, langues",
                "id": "aav"
            }, {
                "name": "abkhaze",
                "id": "abk"
            }, {
                "name": "aceh",
                "id": "ace"
            }, {
                "name": "acolo (syn : acoli, gang)",
                "id": "ach"
            }, {
                "name": "adangbme (syn : adan, adagbe, adame)",
                "id": "ada"
            }, {
                "name": "adygh\u00e9",
                "id": "ady"
            }, {
                "name": "afro-asiatiques, langues",
                "id": "afa"
            }, {
                "name": "afrihili",
                "id": "afh"
            }, {
                "name": "afrikaans",
                "id": "afr"
            }, {
                "name": "a\u00efnou",
                "id": "ain"
            }, {
                "name": "aljamia (syn : aljamiada)",
                "id": "ajm"
            }, {
                "name": "akan (syn : twi)",
                "id": "aka"
            }, {
                "name": "akkadien",
                "id": "akk"
            }, {
                "name": "albanais",
                "id": "alb"
            }, {
                "name": "al\u00e9oute (syn : al\u00e9out, aleut)",
                "id": "ale"
            }, {
                "name": "algonquines, langues",
                "id": "alg"
            }, {
                "name": "altai du Sud",
                "id": "alt"
            }, {
                "name": "atlantique-congo, langues",
                "id": "alv"
            }, {
                "name": "amharique",
                "id": "amh"
            }, {
                "name": "anglo-saxon (ca.450-1100)",
                "id": "ang"
            }, {
                "name": "angika",
                "id": "anp"
            }, {
                "name": "apaches, langues",
                "id": "apa"
            }, {
                "name": "alacalufanes, langues",
                "id": "aqa"
            }, {
                "name": "algiques, langues",
                "id": "aql"
            }, {
                "name": "arabe",
                "id": "ara"
            }, {
                "name": "aram\u00e9en d'empire (700-300 BCE)",
                "id": "arc"
            }, {
                "name": "aragonais",
                "id": "arg"
            }, {
                "name": "arm\u00e9nien",
                "id": "arm"
            }, {
                "name": "mapudungun (syn : mapuche, mapuce)",
                "id": "arn"
            }, {
                "name": "arapaho",
                "id": "arp"
            }, {
                "name": "artificielles, langues",
                "id": "art"
            }, {
                "name": "arawak",
                "id": "arw"
            }, {
                "name": "assamais",
                "id": "asm"
            }, {
                "name": "asturien (syn : bable, l\u00e9onais, asturol\u00e9onais)",
                "id": "ast"
            }, {
                "name": "athapascanes, langues",
                "id": "ath"
            }, {
                "name": "arauanes, langues",
                "id": "auf"
            }, {
                "name": "australiennes, langues",
                "id": "aus"
            }, {
                "name": "avar",
                "id": "ava"
            }, {
                "name": "avestique (syn : ancien, zend)",
                "id": "ave"
            }, {
                "name": "awadhi",
                "id": "awa"
            }, {
                "name": "arawak, langues",
                "id": "awd"
            }, {
                "name": "aymara",
                "id": "aym"
            }, {
                "name": "uto-azt\u00e8ques, langues",
                "id": "azc"
            }, {
                "name": "az\u00e9ri (syn : azerbaidjanais)",
                "id": "aze"
            }, {
                "name": "banda, langues",
                "id": "bad"
            }, {
                "name": "bamil\u00e9k\u00e9, langues",
                "id": "bai"
            }, {
                "name": "bachkir (syn : baskir)",
                "id": "bak"
            }, {
                "name": "baloutchi",
                "id": "bal"
            }, {
                "name": "bambara",
                "id": "bam"
            }, {
                "name": "balinais",
                "id": "ban"
            }, {
                "name": "basque",
                "id": "baq"
            }, {
                "name": "basa (syn : bassa)",
                "id": "bas"
            }, {
                "name": "baltes, langues",
                "id": "bat"
            }, {
                "name": "bedja (syn : beja, bichari)",
                "id": "bej"
            }, {
                "name": "bi\u00e9lorusse",
                "id": "bel"
            }, {
                "name": "bemba",
                "id": "bem"
            }, {
                "name": "bengali",
                "id": "ben"
            }, {
                "name": "berb\u00e8res, langues",
                "id": "ber"
            }, {
                "name": "bhojpuri",
                "id": "bho"
            }, {
                "name": "langues biharis",
                "id": "bih"
            }, {
                "name": "bikol",
                "id": "bik"
            }],
        }),
        validate: function() {
            var languagesWithSameCodeAndName = ['ewe', 'fon', 'ido', 'kom', 'lao', 'ocf', 'tiv', 'twi', 'vai', 'yao'];
            return Ext.isEmpty(this.getRawValue()) || this.getValue() != this.getRawValue() || languagesWithSameCodeAndName.indexOf(this.getValue()) != -1;

        },
        tpl: Ext.create('Ext.XTemplate', '<tpl for="."><li role="option" class="x-boundlist-item" data-qtip="{[this.valueRenderer(values)]}">{[this.valueRenderer(values)]}</li></tpl>', {
            valueRenderer: function(values) {
                return Ext.String.format('[{0}] {1}', values.id, values.name);
            },
        })
    }
}

});

Ext.application({
    name: 'Fiddle',
    launch: function() {
        Ext.create('Ext.container.Container', {
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'myapp.LanguageCombo',
                fieldLabel: 'Language',
                width: 320,
                margin: 15,
            }],
        })
    }
});

ComboBox 不显示选定的值

ComboBox does not display selected value

javascript

combobox

extjs

extjs6