一、 定义
(ComboBox)下拉控件,下拉选择某选顶。
二、 常用属性
属性名称 | 描述 |
data:object | 初始化数据 |
displayField : String | 显示的字段 |
displayTpl:Ext.XTemplate/Ext.Template/String/String[] | 选中后显示模版 |
loader: Ext.ComponentLoader/Object | 加载远程数据 |
queryMode : String | 'remote远程数据; 'local'本地数据; |
tpl: Ext.XTemplate/Ext.Template/String/String[] | 下拉显示模版 |
value : Object | 提示表单时的值 |
valueField : String | 值的字段 |
三、 常用方法
方法名称 | 描述 |
collapse() | 下拉选项收拢 |
collapse() | 下拉选项展开 |
getValue( ) | 获取ComboBox的值 |
四、 常用事件
事件名称 | 描述 |
change( Ext.form.field.Field this, Object newValue, Object oldValue, Object eOpts ) | 选择状态发生变化时 |
collapse( Ext.form.field.Picker field, Object eOpts ) | 收拢选项时 |
五、 事例代码
Ext.onReady(function () {
Ext.create('Ext.window.Window', {
title: 'ComboBox示例',
bodyPadding: 10,
height: 180,
width: 300,
plain: false,
items: [{
xtype: 'fieldcontainer',
fieldLabel: '你最爱语言',
defaultType: 'combo',
labelWidth: 70,
labelAlign: 'center',
items: [
{
id: "language",
store: Ext.create('Ext.data.Store', {
fields: ['PKID', 'Value'],
data: [
{ "PKID": "1", "Value": "C" },
{ "PKID": "2", "Value": "C++" },
{ "PKID": "3", "Value": "C#" },
{ "PKID": "4", "Value": "C/C++" }
]
}),
queryMode: 'local',
valueField: 'Value',
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="x-boundlist-item">{PKID}、{Value}</div>',
'</tpl>'
),
displayTpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'{PKID}、{Value}',
'</tpl>'
),
listeners: {
change: function (newValue, oldValue, eOpts) {
alert("change!");
},
collapse: function (field, eOpts)
{
alert("collapse!");
},
expand: function (field, eOpts) {
alert("expand!");
}
}
}
]
}],
buttonAlign: 'center',
buttons: [{
text: '登录',
handler: function () {
var checkbox = Ext.getCmp('language');//获取id为c1的Checkbox
alert(checkbox.getValue());//获取c1的值
}
}]
}).show();
})