Bố cục giữa các khoảng cách khác nhau: 'hbox' và bố cục: 'column'

Question

Sự khác nhau giữa các số layout:'hbox' và layout:'column' là gì? Nó chỉ là cú pháp?

Ví dụ 'cột ':

layout:'column', 
items: [{ 
    title: 'Width = 25%', 
    columnWidth: .25, 
    html: 'Content' 
},{ 
    title: 'Width = 75%', 
    columnWidth: .75, 
    html: 'Content' 
},{ 
    title: 'Width = 250px', 
    width: 250, 
    html: 'Content' 
}] 

Ví dụ' hbox':

layout: { 
    type: 'hbox', 
    pack: 'start', 
    align: 'stretch' 
}, 
items: [ 
    {html:'panel 1', flex:1}, 
    {html:'panel 2', width:150}, 
    {html:'panel 3', flex:2} 
] 

Answer 1

Có một vài lợi thế riêng biệt của column chưa được bảo hiểm. Nó nhẹ hơn nhiều so với hbox. Column chỉ cho phép trình duyệt bố trí nội dung của nó bằng phao thay vì thiết lập số left nó cũng có ít đánh dấu hơn hbox. Nó cũng xử lý tràn tốt hơn trong hầu hết các trường hợp.

Ví dụ trong một bố cục cột vs một hbox trên một cửa sổ

var win = Ext.create('Ext.Window', { 
    width: 700, 
    height: 400, 
    title: "Column", 
    defaults: { 
     height: 50, 
     width: 300 
    }, 
    layout: { 
     type: 'column' 
    }, 
    items: [{ 
     xtype: 'panel', 
     title: 'Inner Panel One' 
    },{ 
     xtype: 'panel', 
     title: 'Inner Panel Two' 
    },{ 
     xtype: 'panel', 
     title: 'Inner Panel Three' 
    }] 
}); 

win.show() 

var win2 = Ext.create('Ext.Window', { 
    width: 700, 
    height: 400, 
    title: "Hbox", 
    defaults: { 
     height: 50, 
     width: 300 
    }, 
    layout: { 
     type: 'hbox' 
    }, 
    items: [{ 
     xtype: 'panel', 
     title: 'Inner Panel One' 
    },{ 
     xtype: 'panel', 
     title: 'Inner Panel Two' 
    },{ 
     xtype: 'panel', 
     title: 'Inner Panel Three' 
    }] 
}); 

win2.show() 

Nói tóm lại suy nghĩ của column như một bố trí auto trôi nổi những thứ sang bên trái và hbox dưới dạng bố cục box bổ sung chức năng như stretch và pack. Cả hai đều có phiên bản của họ của flexing.

Answer 2

Column tồn tại trong một phiên bản trước của khuôn khổ này trước VBox và HBox. Nó chủ yếu được giữ vì lý do tương thích. HBox cung cấp thêm chức năng (pack và align), trong số những thứ khác.

Answer 3

Cột không có autoheight và HBox, tất cả khu vực đã đầy.

Hãy xem những ví dụ:

http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html