EXTJS - 浮动 2 个面板并将它们居中答案

【问题标题】：EXTJS - float 2 panels and center themEXTJS - 浮动 2 个面板并将它们居中
【发布时间】：2012-03-07 23:54:11
【问题描述】：

我被一些我认为会很简单的事情困住了:)

浮动两个相邻的面板并保持居中。我得到的最接近的方法是将面板居中但彼此重叠。

像这样：

我正在努力

         _   _
        |_| |_|

这是我目前的文件

Ext.define("App.view.MyWindow", {
extend:'Ext.panel.Panel',
alias:'widget.mywindow',
requires:[
      //this is just a simply panel with html:'abcde"
         'App.view.Portal1'

      ],
items:[{
    xtype:'portal1',
    height:400,
    width:400,
    style:{
        margin: '0 auto',
    }
},{
    xtype:'portal1',
    height:400,
    width:400,
    style:{
        margin: '0 auto',
    }
}]
});

有什么想法吗？欢迎大家:) ...提前感谢

更新： 我最接近的“解决方案”如下：（但是它需要设置宽度）

Ext.define("App.view.MyWindow", {
    extend:'Ext.panel.Panel',
    alias:'widget.mywindow',
    requires:[
             //this is just a simply panel with html:'abcde" with width & height 400
             'App.view.Portal1'

          ],
          layout:'fit',
    items:[{
        layout:{
            type:'vbox',
            align:'center'
        },
        items:[{
            layout:{
                type:'hbox',
            },
            //Set width :(
            width:800,
            items:[{
                xtype:'portal1',
            },{
                xtype:'portal1',
            }]
        }]

    }]
});

解决方案

感谢评论的人。这是一个有效的解决方案。不要在包装面板上使用layout:fit

Ext.define("App.view.MyWindow", {
    extend:'Ext.panel.Panel',
    alias:'widget.mywindow',
    requires:[
             //this is just a simply panel with html:'abcde" with width & height 400
             'App.view.Portal1'

          ],
    style:{
        textAlign:'center'
    },
    items:[{
        xtype:'portal1',
        style:{
            display:'inline-block'
        }
    },{
        xtype:'portal1',
        style:{
            display:'inline-block'
        }
    }]
});

【问题讨论】：

标签： css extjs css-float center

【解决方案1】：

只有 CSS 的解决方案，因为我不知道 extjs：

为每个面板设置适当的水平边距，以免它们一起运行。正常设置它们的宽度和高度。然后在面板上设置display: inline。最后，将包含元素设置为使用text-align: center。为此，您可能需要引入一个新的容器元素。

【讨论】：

似乎随心所欲.. extjs 似乎不喜欢它。谢谢你
回过头来再次给您的评论。实际上...看起来它可以工作:) 但是使用 display:inline-block;

【解决方案2】：

给“myWindow”一个hbox布局。包含在里面的项目将被水平布局。

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.HBox

【讨论】：

你实际上并不遥远.. 给了我一个想法......通过使用带有对齐设置中间和中心的 vBox 和 hBox
啊，是的，我应该提到看看配置选项以及居中。但如果你让它工作，那就太好了:)