EXT 列布局 各列不在同一行上
我在用EXT做一个查询的页面时，整体采用的form布局，然后各行采用列布局，但是显示出来后，各行不在同一行上，不能对齐，如下图，这个应该怎么来调整呢？麻烦大家帮帮忙，谢谢啦
代码如下：
var _search = new Ext.form.FormPanel({
title : "查询",
columnWidth : 1,
collapsible:true,
autoHeight : true,
frame : true,
renderTo : 'panelSearch',
layout : "form", // 整个大的表单是form布局
//labelWidth : 65,
labelAlign : "right",
titleCollapse: true,
items : [{ // 行1
layout : "column", // 从左往右的布局
items : [{
columnWidth : .25, // 该列有整行中所占百分比
layout : "form", // 从上往下的布局
items : [
kind
]
}, {
columnWidth : .2,
layout : "form",
items : [{
xtype:'textfield',
//labelWidth: 125,
//width: 120,
labelStyle:'color: #396095;font-weight:bold',
fieldLabel: '<s:property value="%{getText('componentName')}"/>',
name: 'jmeComponents.componentName',
id: 'componentName',
value:'<s:property value="jmeComponent.componentName"/>',
readOnly: false,
allowBlank:true,
maxLength : 32
}]
}, {
columnWidth : .4,
layout : "form",
items : [{
buttons:[{
text: '<s:property value="%{getText('select')}"/>',
id:'queryId',
type: 'submit',
handler: function(){
if(_search.getForm().isValid()){//验证合法后使用加载进度条
var grid = Ext.getCmp("gridPowerCount");
var store = grid.getStore();
//机房名称
var serverRoomId = Ext.getCmp("serverRoomId").getValue();
var componentName = Ext.getCmp("componentName").getValue();
store.baseParams["jmeComponent.serverRoomId"] = serverRoomId;
store.baseParams["jmeComponent.componentName"] = componentName;
var url = Ext.urlEncode(store.baseParams);
store.load();
}
}
}]
}]
}]
}, {// 行2
layout : "column",
items : [{
layout : "form",
columnWidth : .2,
items : [{
xtype : "textfield",
id : "branchA",
labelStyle:'color: #396095;font-weight:bold',
fieldLabel : "A路功率(KW)",
width : 100
}]
}, {
layout : "form",
columnWidth : .2,
items : [{
xtype : "textfield",
id : "branchB",
labelStyle:'color: #396095;font-weight:bold',
fieldLabel : "B路功率(KW)",
width : 100
}]
}, {
layout : "form",
columnWidth : .2,
items : [{
xtype : "textfield",
id : "branchC",
labelStyle:'color: #396095;font-weight:bold',
fieldLabel : "C路功率(KW)",
width : 100
}]
}, {
layout : "form",
columnWidth : .2,
items : [{
xtype : "textfield",
id : "branchD",
labelStyle:'color: #396095;font-weight:bold',
fieldLabel : "D路功率(KW)",
width : 100
}]
},
{
layout : "form",
columnWidth : .2,
items : [{
xtype : "textfield",
id : "branchCount",
labelStyle:'color: #396095;font-weight:bold',
fieldLabel : "总功率(KW)",
width : 100
}]
}]
}, {// 行3
layout : "column",
items : [{
layout : "form",
columnWidth : .2,
items : [{
xtype : "textfield",
id : "branchEnergyA",
labelStyle:'color: #396095;font-weight:bold',
fieldLabel : "A路电能(KWH)",
width : 100
}]
}, {
layout : "form",
columnWidth : .2,
items : [{
xtype : "textfield",
id : "branchEnergyB",
labelStyle:'color: #396095;font-weight:bold',
fieldLabel : "B路电能(KWH)",
width : 100
}]
}, {
layout : "form",
columnWidth : .2,
items : [{
xtype : "textfield",
id : "branchEnergyC",
labelStyle:'color: #396095;font-weight:bold',
fieldLabel : "C路电能(KWH)",
width : 100
}]
}, {
layout : "form",
columnWidth : .2,
items : [{
xtype : "textfield",
id : "branchEnergyD",
labelStyle:'color: #396095;font-weight:bold',
fieldLabel : "D路电能(KWH)",
width : 100
}]
},
{
layout : "form",
columnWidth : 0.2,
items : [{
xtype : "textfield",
id : "branchEnergyCount",
labelStyle:'color: #396095;font-weight:bold',
fieldLabel : "总电能(KWH)",
width : 100
}]
}]
}]
});[code="java"]var form = new Ext.form.FormPanel({
title : "查询",
//columnWidth : 1,
collapsible:true,
autoHeight : true,
frame : true,
layout : "form", // 整个大的表单是form布局
//labelWidth : 65,
labelAlign : "right",
renderTo : 'panelSearch',
titleCollapse: true,
items : [{ // 行1
layout : "column", // 从左往右的布局
items : [{
columnWidth : .2, // 该列有整行中所占百分比
layout : "form", // 从上往下的布局
items : [{
xtype:'textfield',
anchor:"98%",
//labelWidth: 125,
//width: 120,
//labelStyle:'color: #396095;font-weight:bold',
fieldLabel: 'xxx',
name: 'jmeComponents.componentName',
//id: 'componentName',
value:'xxx2',
readOnly: false,
allowBlank:true,
maxLength : 32
}]
}, {
columnWidth : .2,
layout : "form",
items : [{
xtype:'textfield',
anchor:"98%",
//labelWidth: 125,
//width: 120,
labelStyle:'color: #396095;font-weight:bold',
fieldLabel: 'xxx',
name: 'jmeComponents.componentName',
// id: 'componentName',
value:'xxx2',
readOnly: false,
allowBlank:true,
maxLength : 32
}]
}, {
columnWidth : .3,
layout : "form",
items : [{
xtype:"button",
text: '323232',
id:'queryId',
type: 'submit',
handler: function(){
if(_search.getForm().isValid()){//验证合法后使用加载进度条
var grid = Ext.getCmp("gridPowerCount");
var store = grid.getStore();
//机房名称
var serverRoomId = Ext.getCmp("serverRoomId").getValue();
var componentName = Ext.getCmp("componentName").getValue();
store.baseParams["jmeComponent.serverRoomId"] = serverRoomId;
store.baseParams["jmeComponent.componentName"] = componentName;
var url = Ext.urlEncode(store.baseParams);
store.load();
}
}
}]
}]
}, {// 行2
layout : "column",
items : [{
layout : "form",
columnWidth : .2,
items : [{
xtype : "textfield",
id : "branchA",
labelStyle:'color: #396095;font-weight:bold',
fieldLabel : "A路功率(KW)",
width : 100
}]
}, {
layout : "form",
columnWidth : .2,
items : [{
xtype : "textfield",
id : "branchB",
labelStyle:'color: #396095;font-weight:bold',
fieldLabel : "B路功率(KW)",
width : 100
}]
}, {
layout : "form",
columnWidth : .2,
items : [{
xtype : "textfield",
id : "branchC",
labelStyle:'color: #396095;font-weight:bold',
fieldLabel : "C路功率(KW)",
width : 100
}]
}, {
layout : "form",
columnWidth : .2,
items : [{
xtype : "textfield",
id : "branchD",
labelStyle:'color: #396095;font-weight:bold',
fieldLabel : "D路功率(KW)",
width : 100
}]
},
{
layout : "form",
columnWidth : .2,
items : [{
xtype : "textfield",
id : "branchCount",
labelStyle:'color: #396095;font-weight:bold',
fieldLabel : "总功率(KW)",
width : 100
}]
}]
}, {// 行3
layout : "column",
items : [{
layout : "form",
columnWidth : .2,
items : [{
xtype : "textfield",
id : "branchEnergyA",
labelStyle:'color: #396095;font-weight:bold',
fieldLabel : "A路电能(KWH)",
width : 100
}]
}, {
layout : "form",
columnWidth : .2,
items : [{
xtype : "textfield",
id : "branchEnergyB",
labelStyle:'color: #396095;font-weight:bold',
fieldLabel : "B路电能(KWH)",
width : 100
}]
}, {
layout : "form",
columnWidth : .2,
items : [{
xtype : "textfield",
id : "branchEnergyC",
labelStyle:'color: #396095;font-weight:bold',
fieldLabel : "C路电能(KWH)",
width : 100
}]
}, {
layout : "form",
columnWidth : .2,
items : [{
xtype : "textfield",
id : "branchEnergyD",
labelStyle:'color: #396095;font-weight:bold',
fieldLabel : "D路电能(KWH)",
width : 100
}]
},
{
layout : "form",
columnWidth : 0.2,
items : [{
xtype : "textfield",
id : "branchEnergyCount",
labelStyle:'color: #396095;font-weight:bold',
fieldLabel : "总电能(KWH)",
width : 100
}]
}]
}]
});[/code] 你测试下我的代码看看
1:你的图片没打开 破了
2：说明下你的ext版本