sposób wyrównania panelu siatki w środku

Question

Umieszczam panel siatki Ext JS w ramce iFrame. Czy ktoś wie, jak mogę umieścić go na środku ramki iFrame.

Obecnie to wyglądać tak -

chcę być jak ten -

Answer 1

Zawartość iframe może wykorzystać układ graniczny jako powyżej lub bez układu, na przykład:

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

Coś

grid: 
    region: center; 

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

Answer 3

W przykładzie jest to przykład, na który można spojrzeć.

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

Answer 4

Innym sposobem, nie tak eleganckie, to cludge z vbox i hbox układy ale to czysta ExtJS i nie opiera się na 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

prostu użyć:

this.center() 

gdzie jako "to" jest obiektem, który chcesz umieścić w środku (powiedzmy siatkę).