每天都看点,相信我的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 });