教程集 www.jiaochengji.com
教程集 >  jQuery  >  jquery 教程  >  正文 Extjs4实例:Form下拉列表combobox的使用

Extjs4实例:Form下拉列表combobox的使用

发布时间:2015-11-24   编辑:jiaochengji.com
分享一段Extjs4的实例代码,学习下Form下拉列表combobox的使用方法,感兴趣的朋友可以参考下。

本节内容:
Extjs4 Form下拉列表combobox应用实例。

例子:
 

复制代码 代码示例:
Ext.onReady(function(){ 
    Ext.QuickTips.init(); 
    //部门类 
    Ext.define("department",{ 
        extend:'Ext.data.Model', 
        fields:[ 
            {name:'name'}, 
            {name:'id'} 
        ] 
    }); 
    var st = Ext.create("Ext.data.Store",{ 
        model:'department', 
        data:[ 
            {name:'销售部',id:'001'}, 
            {name:'人事部',id:'002'}, 
            {name:'研发部',id:'003'}, 
            {name:'产品部',id:'004'}, 
            {name:'实施部',id:'0`05'}, 
            {name:'法务部',id:'006'} 
        ] 
    }); 
    Ext.create("Ext.form.Panel",{ 
        title:'本地combobox实例', 
        renderTo:'formDemo', 
        bodyPadding:'5 5 5 5', 
        height:100, 
        width:270, 
        frame:true, 
        defaults:{ 
            labelSeparator :": ", 
            labelWidth : 70, 
            width : 200, 
            allowBlank: false, 
            msgTarget : 'side', 
            labelAlign:'left' 
        }, 
        items:[{  // www.jbxue.com
            xtype:'combobox', 
            listConfig:{//控制下拉列表的样式 
                emptyText:'没有找到匹配的数值', 
                maxHeight:200 
            }, 
            fieldLabel:'选择部门', 
            name:'post', 
            queryMode:'local',//[local|remot] 
            store:st, 
            valueField:"id", 
            displayField :'name',//展示的部门名称 
            forceSelection:true,//不允许输入数据集合中没有的数值 
            typeAhead : true,//自动补全,默认为false 
            value:'001'//默认显示的部门的id 
        }] 
    }); 
}); 

您可能感兴趣的文章:
Extjs4实例:Form下拉列表combobox的使用
Extjs4实例:Form下拉列表combobox remot模式
jQuery.combobox
Extjs4实例:Form日期选择器datefield
jquery easyui自定义下拉框列表
net winform ComboBox数据绑定显示问题
ComboBox控件绑定数据方法
Magic Grid Combobox
c# 下拉颜色框(自定义控件)的实现代码(图文)
jquery.combobox中文api和例子,修复了上面的小bug

关键词: combobox  extjs  下拉列表   
[关闭]
~ ~