extjs combobox column布局为什么折叠在一起

以下是代码:

extjs libriry 3.3.1

/**
 * 人员基本信息查询Form
 */

//--------------------------Combobox

 MyComboBox=Ext.extend(Ext.form.ComboBox,{
	     fieldLabel:null,
	     value:null,
	     triggerAction:"all",
	     displayField:"key",
	     editable:false,
	     name:null,
	     id:null,
	     url:null,
	     hiddenName:'value',
	     valueField:"value",
	     autoLoad:null,
	     mode:null,
	     store:null,
	     width:127,
    	 constructor:function(conf){
         //给以上参数赋值
         this.fieldLabel=conf.fieldLabel;
         this.value=conf.value;
         this.name=conf.name;
         this.id=conf.id;
         this.url=(typeof conf.url) !='undefined'? conf.url : null;
         this.mode=(typeof conf.mode) !='undefined'? conf.mode : 'remote';
         this.valueField=(typeof conf.valueField) !='undefined'? conf.valueField : this.valueField;
         this.displayField=(typeof conf.displayField) !='undefined'? conf.displayField : this.displayField;
         this.width=(typeof conf.width) !='undefined'? conf.width : this.width;
         this.autoLoad=conf.autoLoad;
         
         //store
         if(conf.flag!=0){//非0即真
         this.store=conf.store;	 
         }else{
        	 this.store=new Ext.data.JsonStore({
        		 idProperty: 'value',
    	    	 autoLoad:this.autoLoad,
    	    	 url:this.url,
    	    	 fields:[{name:'key'},{name:"value"}]
    	     });
         }
      
         
         
         //构造
         MyComboBox.superclass.constructor.call(this,{
        	    fieldLabel:this.fieldLabel,
				value:this.value,
				triggerAction:this.triggerAction,
			    displayField:this.displayField,
			    editable:this.editable,
			    valueField:this.valueField,
			    name:this.name,
			    id:this.id,
			    hiddenName:this.hiddenName,
			    store:this.store,
			    width:this.width,
			    mode:this.mode
		 });
         
	 }
 });
 
 


//--------------------------FORM
UserBasicInfoTopForm=Ext.extend(Ext.form.FormPanel,{
	yearCbo:null,//年份cbo
	medicalCompanyCbo:null,//医疗服务单位cbo
	//构造方法
	constructor:function(){
		//intialization year combobox 
		this.initYearCbo();
		//
		this.initMedicalCompanyCbo();
		
		UserBasicInfoTopForm.superclass.constructor.call(this,{
		     region:'north',//位于北边
		     collapsible:true,//是否可以最小
		     //collapsedTitle: true,
		     height:80,
		     title:'人员基本信息查询条件',
		     minSize:50,//最小只能拖到50
		     maxSize:120,//最大120
			 items: [{//a begin
		         xtype : "panel",
			     layout : "column",
			     border : false,
	        	 items:[
						{
					    xtype:"panel",
					    layout:'form',
					    border:false,
					    width:130,
					    labelWidth:55,
					    items:[this.yearCbo]
					    },
					    {
						    xtype:"panel",
						    layout:'form',
						    border:false,
						    width:200,
						    labelWidth:55,
						    items:[this.medicalCompanyCbo]
						}
	        	       ]
			 }]
		});
	},
	//---初始化年度的 Cbo you know
	initYearCbo:function(){
		 this.yearCbo=new MyComboBox({
			 fieldLabel:"报销类型",
			 value:"",
			 name:"dbyear",
			 id:"dbyear",
			 url:"/himp/user_basic_info!queryYearListAjax.action",
			 autoLoad:true,
			 flag:0,
			 width:70
			 });
	},
	//初始化医疗服务单位cbo orgCode
	initMedicalCompanyCbo:function(){
		 this.medicalCompanyCbo=new MyComboBox({
			 fieldLabel:"报销类型",
			 value:"",
			 name:"dbyear",
			 id:"dbyear",
			 url:"/himp/user_basic_info!queryMedicalUnitAjax.action",
			 autoLoad:true,
			 flag:0,
			 width:140
			 });	
	}
});

看出来错误没有,其实是在我copy的时候犯的错误,因为这两个combobox的id是一样的,更改不同的id就好了,

之前的图

修改代码:

/**
 * 人员基本信息查询Form
 */

//--------------------------Combobox

 MyComboBox=Ext.extend(Ext.form.ComboBox,{
	     fieldLabel:null,
	     value:null,
	     triggerAction:"all",
	     displayField:"key",
	     editable:false,
	     name:null,
	     id:null,
	     url:null,
	     hiddenName:'value',
	     valueField:"value",
	     autoLoad:null,
	     mode:null,
	     store:null,
	     width:127,
    	 constructor:function(conf){
         //给以上参数赋值
         this.fieldLabel=conf.fieldLabel;
         this.value=conf.value;
         this.name=conf.name;
         this.id=conf.id;
         this.url=(typeof conf.url) !='undefined'? conf.url : null;
         this.mode=(typeof conf.mode) !='undefined'? conf.mode : 'remote';
         this.valueField=(typeof conf.valueField) !='undefined'? conf.valueField : this.valueField;
         this.displayField=(typeof conf.displayField) !='undefined'? conf.displayField : this.displayField;
         this.width=(typeof conf.width) !='undefined'? conf.width : this.width;
         this.autoLoad=conf.autoLoad;
         
         //store
         if(conf.flag!=0){//非0即真
         this.store=conf.store;	 
         }else{
        	 this.store=new Ext.data.JsonStore({
        		 idProperty: 'value',
    	    	 autoLoad:this.autoLoad,
    	    	 url:this.url,
    	    	 fields:[{name:'key'},{name:"value"}]
    	     });
         }
      
         
         
         //构造
         MyComboBox.superclass.constructor.call(this,{
        	    fieldLabel:this.fieldLabel,
				value:this.value,
				triggerAction:this.triggerAction,
			    displayField:this.displayField,
			    editable:this.editable,
			    valueField:this.valueField,
			    name:this.name,
			    id:this.id,
			    hiddenName:this.hiddenName,
			    store:this.store,
			    width:this.width,
			    mode:this.mode
		 });
         
	 }
 });
 
 


//--------------------------FORM
UserBasicInfoTopForm=Ext.extend(Ext.form.FormPanel,{
	yearCbo:null,//年份cbo
	medicalCompanyCbo:null,//医疗服务单位cbo
	//构造方法
	constructor:function(){
		//intialization year combobox 
		this.initYearCbo();
		//
		this.initMedicalCompanyCbo();
		
		UserBasicInfoTopForm.superclass.constructor.call(this,{
		     region:'north',//位于北边
		     collapsible:true,//是否可以最小
		     //collapsedTitle: true,
		     height:80,
		     title:'人员基本信息查询条件',
		     minSize:50,//最小只能拖到50
		     maxSize:120,//最大120
			 items: [{//a begin
		         xtype : "panel",
			     layout : "column",
			     border : false,
	        	 items:[
						{
					    xtype:"panel",
					    layout:'form',
					    border:false,
					    width:130,
					    labelWidth:55,
					    items:[this.yearCbo]
					    },
					    {
						    xtype:"panel",
						    layout:'form',
						    border:false,
						    width:200,
						    labelWidth:55,
						    items:[this.medicalCompanyCbo]
						}
	        	       ]
			 }]
		});
	},
	//---初始化年度的 Cbo you know
	initYearCbo:function(){
		 this.yearCbo=new MyComboBox({
			 fieldLabel:"报销类型",
			 value:"",
			 name:"dbyear",
			 id:"dbyear",
			 url:"/himp/user_basic_info!queryYearListAjax.action",
			 autoLoad:true,
			 flag:0,
			 width:70
			 });
	},
	//初始化医疗服务单位cbo orgCode
	initMedicalCompanyCbo:function(){
		 this.medicalCompanyCbo=new MyComboBox({
			 fieldLabel:"报销类型",
			 value:"",
			 name:"orgCode",
			 id:"orgCode",
			 url:"/himp/user_basic_info!queryMedicalUnitAjax.action",
			 autoLoad:true,
			 flag:0,
			 width:140
			 });	
	}
});

修改之后的效果: