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 -

score 5 · Accepted Answer · answered Jul 04 '11 at 12:10

5

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

});

answered Jul 04 '11 at 12:10

Skym

760
1
7
17

Thanks Skym. one more question: http://stackoverflow.com/questions/6594067/align-components-in-the-center-in-a-panel-ext-js – Ajan Jul 06 '11 at 09:16

score 3 · Answer 2 · answered Jul 04 '11 at 12:15

3

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'
}

answered Jul 04 '11 at 12:15

hpavc

1,294
7
7

apparently this has side-effects http://www.sencha.com/forum/showthread.php?65064-SOLVED-!!!-ux.center-not-work – jenson-button-event Aug 02 '12 at 18:37

score 1 · Answer 3 · answered Sep 03 '12 at 12:26

Another way, not as elegant, is a cludge of VBox and HBox layouts but is pure ExtJS and doesn't rely on 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],

});

score 1 · Answer 4 · answered Dec 31 '13 at 14:00

1

simply use:

this.center()

where as "this" is the object you want to put in the center (let's say grid).

answered Dec 31 '13 at 14:00

LeoSarena

189
2
8

score 0 · Answer 5 · answered Jul 04 '11 at 11:47

0

Something like

grid:
  region: center;

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

answered Jul 04 '11 at 11:47

TheHorse

2,687
1
20
32

how to align grid Panel in center

5 Answers5