下拉框comboxBox本地数据源示例

每天都看点,相信我的extjs4运用的越来越熟悉...

//下拉框comboxBox本地数据源示例
    Ext.onReady(function(){
        
        //第一步,创建数据模型
        Ext.define('PostInfo',{
                extend:'Ext.data.Model',    
                fields:[{name:'provice'},{name:'post'}]
        });
        
        //第二步,定义组合框中显示的数据源
        var postStore=Ext.create('Ext.data.Store',{
            model:'PostInfo',
            data:[
                {provice:'北京',post:'100000'},
                {provice:'大兴',post:'102600'},
                {provice:'重庆',post:'104000'}//....很多数据
            ]
        });
        
        //第三步,创建表单
        Ext.create('Ext.form.Panel',{
            title:'下拉框本地数据源示例',
            300,
            height:150,
            frame : true, 
            bodyPadding:10,
            defaults:{
                labelSeparator:':',//分隔符
                labelWidth:70,//标签的宽度
                200,//字段的宽度
                labelAlgin:'left'//标签的对齐方式
            },
            items:[{
                xtype:'combo',
                listConfig:{
                        emptyText:'没有找到匹配值',
                        maxHeight:60//设置下拉框的最大高度为60像素    
                },
                name:'post',
                autoSelect:true,
                fieldLabel:'邮政编码',
                triggerAction:'all',//单击触发按钮显示全部数据
                store:postStore,//设置数据源
                displayField:'provice',//定义要显示的字段
                valueField:'post',//定义的值字段
                queryMode:'local',//本地模式
                value:'102600'//默认选中大兴
            }],
            renderTo:document.body
        });
        
        //假如数据本身就少,就不需要专门定义数据源了,比如下拉框中只是选择性别
        Ext.create('Ext.form.Panel',{
            title:'下拉框数据少的情况',
            '300',
            bodyPadding:10,
            items:{
                xtype:'combobox',
                name:'sex',
                
                fieldLabel:'性别'    ,
                store:new Ext.data.SimpleStore({
                    fields:['name','value'],
                    data:[['男','男'],['女','女']],    
                }),
                displayField:'name',
                valueField:'value',
                queryMode:'local',
                value:'男'
            },
            renderTo:Ext.getBody()
        });
        
    });