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 }); } });
修改之后的效果: