EXTJS4-----ComboBox控件使用

一、  定义

（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();
        })