cómo alinear el panel de la cuadrícula en el centro

Question

Estoy colocando Ext JS Grid Panel en un iFrame. ¿Alguien sabe cómo puedo colocarlo en el centro del iFrame?

Actualmente se vea como esto -

quiero que sea como esto -

Answer 1

El contenido de su marco flotante puede utilizar un diseño de frontera como arriba o sin diseño, como este:

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

Algo así como

grid: 
    region: center; 

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

Answer 3

En el examples site hay un ejemplo que hace esto es posible que desee mirar.

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

Answer 4

Otra manera, no tan elegante, es un cludge de VBox y HBox diseños, pero es pura ExtJS y no se basa en 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 5

sólo tiene que utilizar:

this.center() 

donde como "este" es el objeto que desea colocar en el centro (digamos cuadrícula).