Как выровнять сетку Панель в центре

Question

Я размещаю Ext JS Grid Panel в iFrame. Кто-нибудь знает, как я могу разместить его в центре iFrame.

В настоящее время это выглядит так -

Я хочу, чтобы это было так -

Answer 1

Содержимое вашего IFrame может использовать макет границы, как выше или без макета, например:

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

Что-то вроде

grid: 
    region: center; 

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

Answer 3

В примере examples site приведен пример, на который вы можете посмотреть.

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

Answer 4

Другой способ, не так элегантно, является cludge из VBox и HBOX макетов, но чисто ExtJS и не полагаться на 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

просто использовать:

this.center() 

где «это» - объект, который вы хотите поместить в центр (скажем, сетку).