如何将网格面板对齐在中心

时间:2011-07-04 10:52:50

标签: extjs gridpanel

我将Ext JS Grid Panel放在iFrame中。有谁知道如何将它放在iFrame的中心。

目前看起来像这样 - Currently It look like this

我希望它像这样 - I want it to be like this

5 个答案:

答案 0 :(得分:5)

您的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;'
    })]

});

答案 1 :(得分:3)

examples site中有一个例子可以帮助您查看。

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

答案 2 :(得分:1)

另一种方式,不是优雅,是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],

});

答案 3 :(得分:1)

只需使用:

this.center()

其中“this”是您要放在中心的对象(比如网格)。

答案 4 :(得分:0)

这样的东西
grid:
  region: center;

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