Sự khác biệt giữa bố cục neo và bố cục vừa trong Sencha ExtJs 5

Question

Sự khác nhau giữa bố cục anchor và fit trong ExtJs 5 là gì?

Answer 1

Neo tương tự như bố cục vbox, nhưng nó cho phép bạn quyết định chiều rộng và chiều cao của các mục con.

Bố cục phù hợp, chỉ khiến trẻ em của thành phần có bố cục này sẽ có cùng kích thước với bố cục của chúng.

Vì vậy:

Ext.create('Ext.Panel', { 
width: 500, 
height: 500, 
layout: 'anchor', 
items: [ 
    { 
     xtype: 'panel', 
     title: '10% height and 20% width', 
     anchor: '10% 20%' 
    }, 
    { 
     xtype: 'panel', 
     title: '30% height and 50% width', 
     anchor: '30% 50%' 
    } 
] 
}); 

Trong ví dụ này bạn sẽ có một bảng điều khiển với kích thước 500x500, với hai tấm trẻ em, một trong số họ sẽ là 50x100 và một trong những khác, dưới đầu tiên này, sẽ là 150x250. Cả hai liên kết sang trái. Phần còn lại của bảng điều khiển chính sẽ trống. Ở đây nó là fiddle: https://fiddle.sencha.com/#fiddle/i4r

Với phù hợp:

Ext.create('Ext.Panel', { 
width: 500, 
height: 500, 
layout: 'fit', 
renderTo: Ext.getBody(), 
title: 'Fit Layout', 
items: [{ 
    xtype: 'panel', 
    border:true, 
    title: 'Children of fit layout' 
}] 
}); 

Trong trường hợp này, những đứa trẻ bảng điều khiển, sẽ có kích thước giống như mẹ của mình, 500x500. Đây là fiddle: https://fiddle.sencha.com/#fiddle/i4s

Edited dựa trên nhận xét: Lưu ý rằng "Fit" có thể có một, và chỉ có một con

Hy vọng rằng nó là rõ ràng. Vấn đề là hai bố trí này được dự định sẽ được sử dụng trong các trường hợp khác nhau.