How to align the grid in the center

Question

I place an Ext JS Grid Panel in an iFrame. Does anyone know how I can put it in the center of an iFrame.

Currently it looks like this:

I want it to be like this:

Answer 1

The contents of your IFrame may use a border layout, as described above, or without a layout, for example:

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

The website provides an example that you can see.

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

Answer 3

Another way, and not so elegant, is the variety of VBox and HBox layouts, but is pure ExtJS and does not 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], }); 

Answer 4

just use:

 this.center() 

where "this" is the object that you want to put in the center (let the grid).

Answer 5

Sort of

 grid: region: center; panel: layout: border; css: "padding: 40px"