1、 定义javascript
(ComboBox)下拉控件,下拉选择某选顶。html
2、 经常使用属性java
属性名称post |
描述this |
data:objectspa |
初始化数据code |
displayField : Stringorm |
显示的字段htm |
displayTpl:Ext.XTemplate/Ext.Template/String/String[]blog |
选中后显示模版 |
loader: Ext.ComponentLoader/Object |
加载远程数据 |
queryMode : String |
'remote远程数据; 'local'本地数据; |
tpl: Ext.XTemplate/Ext.Template/String/String[] |
下拉显示模版 |
value : Object |
提示表单时的值 |
valueField : String |
值的字段 |
3、 经常使用方法
方法名称 |
描述 |
collapse() |
下拉选项收拢 |
collapse() |
下拉选项展开 |
getValue( ) |
获取ComboBox的值 |
4、 经常使用事件
事件名称 |
描述 |
change( Ext.form.field.Field this, Object newValue, Object oldValue, Object eOpts ) |
选择状态发生变化时 |
collapse( Ext.form.field.Picker field, Object eOpts ) |
收拢选项时 |
5、 事例代码
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(); })