Ext_ComboBox

来源:互联网 发布:淘宝网婚礼妈妈装冬装 编辑:程序博客网 时间:2024/05/31 05:27

1、本地数据源的组合框

Ext.onReady(function(){//数据模型Ext.regModel('postInfo',{ fields:[{name:'province'},{name:'post'}]})//数据源var postStore=Ext.create('Ext.data.Store',{model:'postInfo',data:[{province:'北京',post:'1111'},{province:'上海',post:'2222'},{province:'广州',post:'3333'}]});Ext.create('Ext.form.Panel',{title:'comboBox测试',renderTo:Ext.getBody(),bodyPadding:5,frame:true,width:270,height:100,defaults:{ //设置表单字段的默认属性labelSeparator:':',labelWidth:70,width:200,labelAlign:'left'},items:[{xtype:'combo',listConfig:{emptyText:'没找到', //未匹配到值的提示maxHeight:60 //下拉列表的最大高度},name:'post',fieldLabel:'邮政编码',triggerAction:'all', //单击按钮显示全部数据store:postStore, //设置数据源displayField:'province', //显示的字段valueField:'post', //值字段queryMode:'local',  //本地模式forceSelection:true, //输入值必须为列表中的typeAhead:true,value:'1111'}]});});


2、远程数据源

Ext.onReady(function(){//数据模型Ext.regModel('BookInfo',{ fields:[{name:'bookName'}]})//数据源var bookStore=Ext.create('Ext.data.Store',{model:'BookInfo',proxy:{type:'ajax',url:'bookServer.jsp',reader:new Ext.data.reader.Array({model:'BookInfo'})}});Ext.create('Ext.form.Panel',{title:'comboBox测试',renderTo:Ext.getBody(),bodyPadding:5,frame:true,width:270,height:100,defaults:{ //设置表单字段的默认属性labelSeparator:':',labelWidth:70,width:200,labelAlign:'left'},items:[{xtype:'combo',fieldLabel:'书籍列表',listConfig:{loadingText:'loading...',emptyText:'没找到', //未匹配到值的提示maxHeight:60 //下拉列表的最大高度},allQuery:'allbook',minChars:3,queryDelay:300,queryParam:'searchBook',triggerAction:'all', //单击按钮显示全部数据store:bookStore, //设置数据源displayField:'bookName', //显示的字段valueField:'bookName', //值字段queryMode:'remote'  //本地模式}]});});


原创粉丝点击