为什么在使用多列布局时(layout:"column")总是出现上下行对应不齐,前后控件分布间距很难控制的局面?
先把代码放上来,见下所示:
+++++++++++++++++++++++++++++++++++++++++++++
function test_Ja_Initi(){
Ext.QuickTips.init();
var c_Panel_1=new Ext.Panel({
id:"c_Panel_1",layout:"form",labelWidth:75,
items:[
{id:"ddl_C_Type",name:"ddl_C_Type",xtype:"combo",fieldLabel:"客户类型",store:["例一","例一","例一"],emptyText:"请选择适合你的客户类型",anchor:"90%"},
{id:"txt_C_Date",name:"txt_C_Date",xtype:"textfield",fieldLabel:"咨询日期",anchor:"90%"},
{id:"ddl_C_AskType",name:"ddl_C_AskType",xtype:"combo",fieldLabel:"咨询类别", store:["例一","例一","例一"],emptyText:"请选择适合你的咨询类别 ",anchor:"90%"},
{id:"txt_C_View_Date",name:"txt_C_View_Date",xtype:"textfield",fieldLabel:"面询时间",anchor:"90%"},
{
id:"c_Panel_2",layout:"column",labelWidth:75,isFormField:true,fieldLabel:"咨询方案",
items:[
{columnWidth:.5,layout:"form",
items:[
{id:"ddl_C_Coutry1",name:"ddl_C_Coutry1",xtype:"combo",store:["例一","例一","例一"],emptyText:"首选方案 ",anchor:"90%"}
]
},{columnWidth:.5,layout:"form",
items:[
{id:"ddl_C_Coutry2",name:"ddl_C_Coutry2",xtype:"combo",store:["例一","例一","例一"],emptyText:"次选方案 ",anchor:"85%"}
]
},{columnWidth:.3,layout:"form",
items:[
{id:"ddl_C_Coutry3",name:"ddl_C_Coutry3",xtype:"combo",store:["例一","例一","例一"],emptyText:"次选方案 ",anchor:"85%"}
]
}
]
}
]
});
//Form_Win
var form=new Ext.FormPanel({
frame:true,
width:500,
monitorValid:true,//把有formBind:true的按钮和验证绑定
layout:"form",
labelWidth:55,
title:"添加个人信息",
labelAlign:"right",
renderTo:Ext.getBody(),
items:[
c_Panel_1
]
});
}//function
Ext.onReady(test_Ja_Initi);++++++++++++++++++++++++++++++++++上述代码中的:“咨询方案”一行中的三个下拉项使用了多列布局,其中:下拉项控件始终不能左对齐,各个下拉项之间的间距也不易控制。
(注:这段代码在IE6,Firefox中运行效果一致。)
先把代码放上来,见下所示:
+++++++++++++++++++++++++++++++++++++++++++++
function test_Ja_Initi(){
Ext.QuickTips.init();
var c_Panel_1=new Ext.Panel({
id:"c_Panel_1",layout:"form",labelWidth:75,
items:[
{id:"ddl_C_Type",name:"ddl_C_Type",xtype:"combo",fieldLabel:"客户类型",store:["例一","例一","例一"],emptyText:"请选择适合你的客户类型",anchor:"90%"},
{id:"txt_C_Date",name:"txt_C_Date",xtype:"textfield",fieldLabel:"咨询日期",anchor:"90%"},
{id:"ddl_C_AskType",name:"ddl_C_AskType",xtype:"combo",fieldLabel:"咨询类别", store:["例一","例一","例一"],emptyText:"请选择适合你的咨询类别 ",anchor:"90%"},
{id:"txt_C_View_Date",name:"txt_C_View_Date",xtype:"textfield",fieldLabel:"面询时间",anchor:"90%"},
{
id:"c_Panel_2",layout:"column",labelWidth:75,isFormField:true,fieldLabel:"咨询方案",
items:[
{columnWidth:.5,layout:"form",
items:[
{id:"ddl_C_Coutry1",name:"ddl_C_Coutry1",xtype:"combo",store:["例一","例一","例一"],emptyText:"首选方案 ",anchor:"90%"}
]
},{columnWidth:.5,layout:"form",
items:[
{id:"ddl_C_Coutry2",name:"ddl_C_Coutry2",xtype:"combo",store:["例一","例一","例一"],emptyText:"次选方案 ",anchor:"85%"}
]
},{columnWidth:.3,layout:"form",
items:[
{id:"ddl_C_Coutry3",name:"ddl_C_Coutry3",xtype:"combo",store:["例一","例一","例一"],emptyText:"次选方案 ",anchor:"85%"}
]
}
]
}
]
});
//Form_Win
var form=new Ext.FormPanel({
frame:true,
width:500,
monitorValid:true,//把有formBind:true的按钮和验证绑定
layout:"form",
labelWidth:55,
title:"添加个人信息",
labelAlign:"right",
renderTo:Ext.getBody(),
items:[
c_Panel_1
]
});
}//function
Ext.onReady(test_Ja_Initi);++++++++++++++++++++++++++++++++++上述代码中的:“咨询方案”一行中的三个下拉项使用了多列布局,其中:下拉项控件始终不能左对齐,各个下拉项之间的间距也不易控制。
(注:这段代码在IE6,Firefox中运行效果一致。)
解决方案 »
- cookie读取问题
- 如何自动获取页面上的对象的属性(new)
- 关于window.showModalDialog的问题
- 是不是safari不支持position: absolute属性? 或者支持的与ff不一样
- 一段奇怪的JS代码
- 按一定的概率显示图片
- 求一款网页编辑器,只要能提供SQL语法加亮
- 请问实现像CSDN论坛的树型菜单的效果?????????????????????????
- 请问:我想在ACTION="里指向不同的网址,如何办到?
- 求一段JS代码!
- 求助,初学ext,遇到一个ext.form.combobox的填充问题,大虾们帮我看看喽!!!
- 自己做了导航菜单时遇到个问题请教一下各位高手
列布局不对齐可能是宽度没有设置好。
给个例子:
var win = new Ext.Window({
title: "", layout: "fit", width: 490, height: 280, constrain: true, resizable: false, border: false, modal: true, closeAction: "hide", buttonAlign: "center",
items: {
xtype: "form", width: 470, height: 250, border: false, autoScroll: true, bodyStyle: "padding-left:10px",
items: [
{
xtype: "fieldset", title: "", collapsible: false, width: 430,
items: [
{
layout: "form", border: false,
items: [
{
layout: "column", border: false,
items: [
{ layout: "form", defaultType: "textfield", border: false, labelWidth: 60, items: { name: "1", fieldLabel: "工号", width: 130 }, columnWidth: .5 },
{ layout: "form", defaultType: "textfield", border: false, labelWidth: 60, items: { name: "2", fieldLabel: "姓名", width: 130 }, columnWidth: .5 }
]
},
{
layout: "column", border: false,
items: [
{ layout: "form", defaultType: "textfield", border: false, labelWidth: 60, items: { name: "3", fieldLabel: "地址", width: 130 }, columnWidth: .5 },
{ layout: "form", defaultType: "textfield", border: false, labelWidth: 60, items: { name: "4", fieldLabel: "地址1", width: 130 }, columnWidth: .5 }
]
}
]
}
]
}
]
},
buttons: [{ text: "", handler: function() {
}
}, { text: "", handler: function() {
}
}
]
});
win.show();
这个你就要好好的控制下colunm的宽度了,也可以用像素控制的
columnWidth:200,