Ext.form.field.ComboBox 显示说明
Posted
技术标签:
【中文标题】Ext.form.field.ComboBox 显示说明【英文标题】：Ext.form.field.ComboBox show Description 【发布时间】：2018-02-20 22:58:23 【问题描述】：我将下面的代码用于 10 个字段，但我想让我的 5 个字段显示（缩写 - 名称），另一个只显示（缩写）我如何达到这个目标。 注意：此代码来自http://docs.sencha.com/extjs/4.1.1/#!/api/Ext.form.field.ComboBox
提前致谢，
var states = Ext.create('Ext.data.Store',
fields: ['abbr', 'name'],
data : [
"abbr":"AL", "name":"Alabama",
"abbr":"AK", "name":"Alaska",
"abbr":"AZ", "name":"Arizona"
]
);
Ext.create('Ext.form.ComboBox',
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
valueField: 'abbr',
renderTo: Ext.getBody(),
// Template for the dropdown menu.
// Note the use of "x-boundlist-item" class,
// this is required to make the items selectable.
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="x-boundlist-item">abbr - name</div>',
'</tpl>'
),
// template for the content inside text field
displayTpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'abbr - name',
'</tpl>'
)
);
【问题讨论】：
你应该如何确定哪些项目显示哪些显示值？ 【参考方案1】：一种可能的方法是使用Ext.XTemplate。以下工作示例根据条件以不同方式显示前两项。
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function()
Ext.QuickTips.init();
Ext.FocusManager.enable();
var states = Ext.create('Ext.data.Store',
fields: ['abbr', 'name'],
data : [
"abbr":"AL", "name":"Alabama",
"abbr":"AK", "name":"Alaska",
"abbr":"AZ", "name":"Arizona"
]
);
var template = Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="x-boundlist-item">',
'<tpl if="xindex<=2">',
'abbr',
'<tpl else >',
'abbr - name',
'</tpl>',
'</div>',
'</tpl>'
);
Ext.create('Ext.form.ComboBox',
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody(),
tpl: template
);
);
</script>
<title>Test</title>
</head>
<body>
</body>
</html>
【讨论】：
以上是关于Ext.form.field.ComboBox 显示说明的主要内容，如果未能解决你的问题，请参考以下文章