“组合框”不显示所选值
ComboBox does not display selected value
我有一个非常简单的组合框配置,你可以看到在这个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,
}],
})
}
});
这是由于您的工厂对象的一部分包含配置的一部分:
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,
}],
})
}
});
在combo的声明中,在这里添加displayField:
{
xtype: 'myapp.LanguageCombo',
fieldLabel: 'Language',
width: 320,
displayField: 'name', // add here
margin: 15
}
相关文章:
- 根据组合框选择显示特定数据
- Extjs5:组合框不显示所选值
- 组合用于隐藏或显示内容的方法
- 组合框值更改时,显示一个文本框
- ExtJs组合框显示字段编码
- 显示给定输入数字的数据集中字母表的所有可能组合
- 组合功能以使用 Jquery 在一组单选按钮中显示输入字段和单选按钮
- Extjs 网格列 - 组合在值更改后显示键而不是值
- 使用显示值设置组合框值
- Cakephp 2.x - 隐藏/显示组合框
- 在下拉列表中显示树的组合框
- 角度中的组合框(选择组件)不基于参数设置显示值
- 显示图像的组合框
- 条件组合 显示/隐藏多个单选按钮
- 在文本编辑器中显示值,点击组合框:Yii 1.1.
- 组合框;选择时显示不同的说明文本
- EXT JS :在组合框中,如何为不在存储中的记录设置显示字段
- 计数并显示组合的选择选项值
- 是否可以显示组合的社交点赞&股票
- 剑道网格弹出编辑模式不显示组合框数据