passionjackychen 2012-09-05 20:32
浏览 307
已采纳

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
                    }]
                }]
            }]
        });
  • 写回答

2条回答 默认 最新

  • works001 2012-09-05 20:46
    关注

    [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条)

报告相同问题?

悬赏问题

  • ¥15 求解 yolo算法问题
  • ¥15 虚拟机打包apk出现错误
  • ¥30 最小化遗憾贪心算法上界
  • ¥15 用visual studi code完成html页面
  • ¥15 聚类分析或者python进行数据分析
  • ¥15 三菱伺服电机按启动按钮有使能但不动作
  • ¥15 js,页面2返回页面1时定位进入的设备
  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 (希望可以解决问题)ma和mb文件无法正常打开,打开后是空白,但是有正常内存占用,但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝