下拉框comboxBox本地数据源示例

每天都看点,相信我的extjs4运用的越来越熟悉...
 1 //下拉框comboxBox本地数据源示例
 2     Ext.onReady(function(){
 3         
 4         //第一步,创建数据模型
 5         Ext.define('PostInfo',{
 6                 extend:'Ext.data.Model',    
 7                 fields:[{name:'provice'},{name:'post'}]
 8         });
 9         
10         //第二步,定义组合框中显示的数据源
11         var postStore=Ext.create('Ext.data.Store',{
12             model:'PostInfo',
13             data:[
14                 {provice:'北京',post:'100000'},
15                 {provice:'大兴',post:'102600'},
16                 {provice:'重庆',post:'104000'}//....很多数据
17             ]
18         });
19         
20         //第三步,创建表单
21         Ext.create('Ext.form.Panel',{
22             title:'下拉框本地数据源示例',
23             300,
24             height:150,
25             frame : true, 
26             bodyPadding:10,
27             defaults:{
28                 labelSeparator:':',//分隔符
29                 labelWidth:70,//标签的宽度
30                 200,//字段的宽度
31                 labelAlgin:'left'//标签的对齐方式
32             },
33             items:[{
34                 xtype:'combo',
35                 listConfig:{
36                         emptyText:'没有找到匹配值',
37                         maxHeight:60//设置下拉框的最大高度为60像素    
38                 },
39                 name:'post',
40                 autoSelect:true,
41                 fieldLabel:'邮政编码',
42                 triggerAction:'all',//单击触发按钮显示全部数据
43                 store:postStore,//设置数据源
44                 displayField:'provice',//定义要显示的字段
45                 valueField:'post',//定义的值字段
46                 queryMode:'local',//本地模式
47                 value:'102600'//默认选中大兴
48             }],
49             renderTo:document.body
50         });
51         
52         //假如数据本身就少,就不需要专门定义数据源了,比如下拉框中只是选择性别
53         Ext.create('Ext.form.Panel',{
54             title:'下拉框数据少的情况',
55             '300',
56             bodyPadding:10,
57             items:{
58                 xtype:'combobox',
59                 name:'sex',
60                 
61                 fieldLabel:'性别'    ,
62                 store:new Ext.data.SimpleStore({
63                     fields:['name','value'],
64                     data:[['男','男'],['女','女']],    
65                 }),
66                 displayField:'name',
67                 valueField:'value',
68                 queryMode:'local',
69                 value:'男'
70             },
71             renderTo:Ext.getBody()
72         });
73         
74     });