在面板的中心对齐组件：EXT JS答案

【问题标题】：Align components in the center in a Panel: EXT JS在面板的中心对齐组件：EXT JS
【发布时间】：2013-06-11 05:36:30
【问题描述】：

我是 ext JS 的新手，我正在尝试在 FormPanel 中放置 3 个组件，但我不知道如何将它们对齐在中心。

这是我的代码

var durationForm = new Ext.FormPanel({
        border      : false,
        labelAlign  : 'top',
        frame       : true,
        bodyStyle   : 'padding-left:475px;',
        items: [{
          items: [{
            rowWidth    : .5,
            layout      :'column',
                items:[{
                    columnWidth     : .13,
                    layout          : 'form',
                    items           : [getNewLabel('<br/><font size="3">Duration: </font>')]
                },{
                    columnWidth     : .20,
                    layout          : 'form',
                    items           : [fromDate()]
                },{
                    columnWidth     : .17,
                    layout          : 'form',
                    items           : [toDate()]
                }]
          }]
        }]
    });

    durationForm.render(Ext.getBody());

这显示这样的输出

但我希望组件在面板的中心对齐。有人知道怎么做吗？

【问题讨论】：

标签： extjs formpanel

【解决方案1】：

我已经通过使用“表格”布局解决了这个问题：

{
    layout : 'fit', // parent panel should have 'fit' layout 
    items : [ // and only one item
        {
            xtype : 'panel',
            border : false, // optional
            layout : {
                type : 'table',
                columns : 1, 
                tableAttrs : {
                    style : {
                        width : '100%',
                        height : '100%'                                 
                    }
                },
                tdAttrs : {
                    align : 'center',
                    valign : 'middle',
                },
            },
            items : [ // a single container for nested components
                {
                    xtype : 'panel',
                    layout : 'fit',
                    cellId : 'cell_id', // this one will be placed as id for TD
                    items : [
                         {}, {}, {} // nested components
                    ]
                }
            ]
        }
    ]
}

【讨论】：

【解决方案2】：

以防万一有人像我一样寻找答案但在这里找不到，请像这样在每个项目之间使用 xtype:'splitter' -

items:[{
         xtype:'something'
       },
       {
         xtype:'splitter'
        },
       {
         xtype:'something-else'
       }
}]

【讨论】：

【解决方案3】：


{
//...
  layout:'hbox',
  layoutConfig: {
    padding:'5',
    pack:'center',
    align:'middle'
  },
  items:[{
       columnWidth     : .13,
       layout          : 'form',
       items           : [getNewLabel(...)]
     },{
       columnWidth     : .20,
       layout          : 'form',
       items           : [fromDate()]
     },{
       columnWidth     : .17,
       layout          : 'form',
       items           : [toDate()]
  }]
//...
}

见this

【讨论】：

感谢 Amol，它现在位于中间。但是现在“持续时间：”“从：”和“到：”之间没有空格。他们三个并排放置。你知道如何在它们之间留出一点空间吗？
现在我明白了，谢谢。我没有看到“看到这个”。
没有。对不起。但这似乎并不能解决我的问题。事实上，现在当我更改浏览器窗口大小时，它并没有显示在中间。这种布局不是自我调整的。你知道问题出在哪里吗？