如何将网格面板居中对齐

Posted 2023-02-26

【中文标题】如何将网格面板居中对齐

【英文标题】：how to align grid Panel in center

【发布时间】：2011-07-04 10:52:49

【问题描述】：

我将 Ext JS 网格面板放置在 iFrame 中。有谁知道我怎样才能把它放在 iFrame 的中心。

目前它看起来像这样 -

我希望它是这样的——

【参考方案1】：

您的 IFrame 的内容可以使用如上的边框布局或不使用布局，如下所示：

var viewPort = new Ext.Viewport(
    renderTo:'body',
    width: 400,
    height: 400,
    items:[new Ext.Panel(
        title: 'hi',
        width: 200,
        height: 200,
        style: 'margin:0 auto;margin-top:100px;'
    )]

);

【讨论】：

感谢斯凯姆。还有一个问题：***.com/questions/6594067/…

【参考方案2】：

在examples site 中有一个您可能想查看的示例。

layout:'ux.center',
items: 
    title: 'Centered Panel',
    widthRatio: 0.75,
    html: 'Some content'

【讨论】：

显然这有副作用sencha.com/forum/…

【参考方案3】：

另一种不那么优雅的方式是 VBox 和 HBox 布局的组合，但它是纯 ExtJS 并且不依赖于 UX：

Ext.create('Ext.container.Viewport',
    style: 'background-color: white;',

    layout: 
        type: 'vbox',
        align : 'stretch',
        pack  : 'start',
    ,
    items: [
        flex: 1,
        border: false
    ,
        height: 200,
        border: false,
        layout: 
            type: 'hbox',
            pack: 'start',
            align: 'stretch'
        ,
        items: [
            flex: 1,
            border: false
        ,
            html:'Centered Panel',
            width: 400
        ,
            flex: 1,
            border: false
        ]
    ,
        flex: 1,
        border: false
    ]

    //items: [login_panel],

);

【参考方案4】：

简单地使用：

this.center()

其中“this”是您要放置在中心的对象（比如说网格）。

【参考方案5】：

有点像

grid:
  region: center;

panel:
  layout: border;
  css: "padding: 40px"