我正在使用一个非常简单的配置的ComboBox，您可以在this fiddle中看到。
问题在于，当我在下拉列表中选择一个值时，它不会显示在组合的文本字段中，我无法找出原因。
此外，我已将属性hideTrigger设置为 true ，但仍会显示组合的触发器。
如果你无法访问它，那么这是小提琴代码：
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,
}],
})
}
});
答案 0 :(得分：1)
这是由于您的工厂对象的一部分包含配置的一部分：
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,
}],
})
}
});
答案 1 :(得分：0)
在你的组合声明中，在这里添加你的displayField：
{
xtype: 'myapp.LanguageCombo',
fieldLabel: 'Language',
width: 320,
displayField: 'name', // add here
margin: 15
}