您的位置:首页 > Web前端 > JavaScript

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

2012-05-08 08:55 246 查看
以下是代码:

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
});
}
});


修改之后的效果:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: