passionjackychen 2012-09-05 12:32
浏览 308
已采纳

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 12: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();

    1. //机房名称
    2. var serverRoomId = Ext.getCmp("serverRoomId").getValue();
    3. var componentName = Ext.getCmp("componentName").getValue();
    4. store.baseParams["jmeComponent.serverRoomId"] = serverRoomId;
    5. store.baseParams["jmeComponent.componentName"] = componentName;
    6. var url = Ext.urlEncode(store.baseParams);
    7. store.load();
    8. }
    9. }
    10. }]
    11. }]
    12. }, {// 行2
    13. layout : "column",
    14. items : [{
    15. layout : "form",
    16. columnWidth : .2,
    17. items : [{
    18. xtype : "textfield",
    19. id : "branchA",
    20. labelStyle:'color: #396095;font-weight:bold',
    21. fieldLabel : "A路功率(KW)",
    22. width : 100
    23. }]
    24. }, {
    25. layout : "form",
    26. columnWidth : .2,
    27. items : [{
    28. xtype : "textfield",
    29. id : "branchB",
    30. labelStyle:'color: #396095;font-weight:bold',
    31. fieldLabel : "B路功率(KW)",
    32. width : 100
    33. }]
    34. }, {
    35. layout : "form",
    36. columnWidth : .2,
    37. items : [{
    38. xtype : "textfield",
    39. id : "branchC",
    40. labelStyle:'color: #396095;font-weight:bold',
    41. fieldLabel : "C路功率(KW)",
    42. width : 100
    43. }]
    44. }, {
    45. layout : "form",
    46. columnWidth : .2,
    47. items : [{
    48. xtype : "textfield",
    49. id : "branchD",
    50. labelStyle:'color: #396095;font-weight:bold',
    51. fieldLabel : "D路功率(KW)",
    52. width : 100
    53. }]
    54. },
    55. {
    56. layout : "form",
    57. columnWidth : .2,
    58. items : [{
    59. xtype : "textfield",
    60. id : "branchCount",
    61. labelStyle:'color: #396095;font-weight:bold',
    62. fieldLabel : "总功率(KW)",
    63. width : 100
    64. }]
    65. }]
    66. }, {// 行3
    67. layout : "column",
    68. items : [{
    69. layout : "form",
    70. columnWidth : .2,
    71. items : [{
    72. xtype : "textfield",
    73. id : "branchEnergyA",
    74. labelStyle:'color: #396095;font-weight:bold',
    75. fieldLabel : "A路电能(KWH)",
    76. width : 100
    77. }]
    78. }, {
    79. layout : "form",
    80. columnWidth : .2,
    81. items : [{
    82. xtype : "textfield",
    83. id : "branchEnergyB",
    84. labelStyle:'color: #396095;font-weight:bold',
    85. fieldLabel : "B路电能(KWH)",
    86. width : 100
    87. }]
    88. }, {
    89. layout : "form",
    90. columnWidth : .2,
    91. items : [{
    92. xtype : "textfield",
    93. id : "branchEnergyC",
    94. labelStyle:'color: #396095;font-weight:bold',
    95. fieldLabel : "C路电能(KWH)",
    96. width : 100
    97. }]
    98. }, {
    99. layout : "form",
    100. columnWidth : .2,
    101. items : [{
    102. xtype : "textfield",
    103. id : "branchEnergyD",
    104. labelStyle:'color: #396095;font-weight:bold',
    105. fieldLabel : "D路电能(KWH)",
    106. width : 100
    107. }]
    108. },
    109. {
    110. layout : "form",
    111. columnWidth : 0.2,
    112. items : [{
    113. xtype : "textfield",
    114. id : "branchEnergyCount",
    115. labelStyle:'color: #396095;font-weight:bold',
    116. fieldLabel : "总电能(KWH)",
    117. width : 100
    118. }]
    119. }]
    120. }]
    121. });[/code] 你测试下我的代码看看

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部