how to align grid Panel in center

Question

I am placing Ext JS Grid Panel in a iFrame. Do anybody know how can I place it in the center of the iFrame.

Currently It look like this -

I want it to be like this -

Answer 1

The contents of your IFrame can use a border layout as above or no layout, like this:

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

});

Answer 2

In the examples site there is an example that does this you may want to look at.

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