cách căn chỉnh Bảng điều khiển lưới ở giữa

Question

Tôi đang đặt Ext JS Grid Panel trong iFrame. Không ai biết làm thế nào tôi có thể đặt nó ở trung tâm của iFrame.

Hiện nay Nó trông như thế này -

Tôi muốn nó được như thế này -

Answer 1

Nội dung IFrame bạn có thể sử dụng một cách bố trí biên giới như phía trên hoặc không có bố cục, như sau:

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

Something như

grid: 
    region: center; 

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

Answer 3

Trong examples site có một ví dụ thực hiện điều này bạn có thể muốn xem xét.

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

Answer 4

Một cách khác, không phải là thanh lịch, là một cludge của VBox và HBox bố trí nhưng là tinh khiết ExtJS và không dựa vào 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

chỉ cần sử dụng:

this.center() 

nơi "này" là đối tượng bạn muốn đặt ở giữa (giả sử lưới).