combox 使用

 

 

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'}]