1 .valueField:"valuefield"//value值字段
2.displayField:"field" //显示文本字段
3.editable:false//false则不可编辑,默认为true
4.triggerAction:"all"//请设置为"all",否则默认为"query"的情况下,你选择某个值后,再此下拉时,只出现匹配选项,如果设为"all"的话,每次下拉均显示全部选项
5.hiddenName:string //真正提交时此combo的name,请一定要注意
6.typeAhead:true,//延时查询,与下面的参数配合
7.typeAheadDelay:3000,//默认250
<script type="text/javascript"> Ext.onReady(function(){ Ext.QuickTips.init(); var panel = new Ext.form.FormPanel({ renderTo:document.body, title:'formPanel', frame:true, //渲染背景颜色 labelWidth : 60, //显示的标签宽度为45 labelAlign : "right", //标签内容右对齐 bodyStyle:'padding:2px 10px 10px 2px', //使内部元素和边框 有一定距离 width:600, defaults: { autoFitErrors: "false", labelSeparator: ":", labelWidth: 50, width: 150, allowBlank: false, blankText: "必填", msgTarget: "qtip" }, items:[{ xtype : 'combo', id:'education', lazyRender:true, mode: 'local', store:new Ext.data.SimpleStore({ fields:['returnValue','displayText'], data:[[1,'小学'],[2,'中学'],[3, '高中']] }), valueField:'returnValue',//下拉框传到后台的值 displayField:'displayText' ,//下拉框显示的数据 hiddenName : 'education',// 大家要注意的是hiddenName和name属性,name只是下拉列表的名称,作用是可通过,而hiddenName才是提交到后台的input的name。如果没有设置hiddenName,在后台是接收不到数据的,这个大家一定要注意。 name: 'education',// 再次提醒,name只是下拉列表的名称 forceSelection:true , //必须选择一个选项 allowBlank : false,// 该选项值不允许为空 ,如果为空则提示 blankText blankText: '请选择学历' , // 提交form时,该项如果没有选择,则提示错误信息"请选择学历" emptyText : '选择学历',// 在没有选择值时显示为“选择学历” editable : false,// 不允许编辑 triggerAction : 'all',// 因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。 fieldLabel : '学历', // 控件的标题是学历 listener:{ 'select': function(combo, record, index){ //alert(Ext.get('month').dom.value);// 取出选中的对象 /* 如果需要级联则 在这里添加代码 , 1 取出当前对象的值 2 利用当前对象值 去加载需要级联对象 var genderStore = Ext.getCmp('gender').getStore(); genderStore.removeAll(false); Ext.apply( genderStore.baseParams,{ id :combo.getValue() }); genderStore.load(); */ } } },{ xtype:'combo', id:'gender', ref:'../gender', editable:false, fieldLabel:"性 别", triggerAction:"all", mode:"remote", allowBlank:false, enable:false, forceSelection:true, store:new Ext.data.Store({ id:'genderStore', //autoLoad:true, proxy:new Ext.data.HttpProxy({url:"/test/layout/combox-data.html"}), reader:new Ext.data.JsonReader({fields:[{name:"id"},{name:"name"}]}), baseParams:{state:'0'}, listeners:{ loadexception:function(proxy,type,action,options,response){ alert('异常'); }, 'beforeload':function( store , options ){ } } }), displayField:"name", valueField:"id", hiddenName: 'genderId', //传到后台的name name:'genderId', autoShow:true }], buttons:[{ text:'重新加载性别', handler:function(){ Ext.getCmp('gender').getStore().load(); } },{ text:'设置男', handler:function(){ Ext.getCmp('gender').setValue('1'); //提交的值 Ext.getCmp('gender').setRawValue('men'); //设置显示的值 } },{ text:'取值', handler:function(){ alert(Ext.getCmp('gender').getValue( )) } }] }); }); </script>
combox-data.html中 数据:
[{id:'1',name:'men'},{id:'2',name:'women'}]
相关推荐
在C#窗体中使用Combox图形组合框
适合初学者的代码,尽请关注
C#combox使用小李子,功能齐全,添加删除功能!
WPF之MVVM中DataGrid中嵌入Combox,改变Combox可回传至绑定的实体
combox下拉树combox下拉树combox下拉树combox下拉树combox下拉树combox下拉树combox下拉树
combox的栏数如何生成?
combox 实现搜寻功能combox 实现搜寻功能
增加了combox的默认选中值的读取和显示。
js 实现combox 树选择 js 实现combox 树选择
DataGrid中嵌入comBox,MVVM,
使用MFC的combox和editbox使用的小例子,很实用,一看就会,自己重新编译生成exe文件
可以实现vb的Combox自动下拉,用了别人的代码修改了一下。
listctrl中使用edit、combox、复选框等
android只有Spinnser控件 没有像其他语言的combox控件 故写了个自定义combox 控件
javafx combox内嵌checkbox
datagridview中绑定combox,有代码 通过代码实现,向DataGridView中绑定combox.
VC重绘 combox 小样例。分享学习
本文介绍通过特性和反射将枚举的中文注释绑定到winform界面的Combox控件上,当枚举类型的中文含义更改时,不需要更改界面代码也能实现界面文字的更改。...
控件使用实例程序combox,groupbox,radio,timer