我在用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 }] }] }] });