Sencha ExtJs 5中锚定布局和拟合布局之间的差异

ExtJs 5

中的

anchor

和

fit

布局有什么区别？

anchor类似于vbox布局，但它允许您决定子项的宽度和高度

调整布局，只需使具有此布局的组件的子组件与其父组件具有相同的大小

因此：

在本例中，您将有一个尺寸为500x500的配电盘，带有两个子配电盘，其中一个为50x100，另一个为150x250。两者都向左对齐。父面板的其余部分将为空。 这是小提琴：

适合：

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'
}]
});

在本例中，子面板的大小将与其父面板的大小相同，即500x500。 这是小提琴：

根据评论编辑：请注意，“Fit”可以有一个子项，并且只能有一个子项

---

希望这是清楚的。问题是，这两种布局适用于不同的情况。

非常好的示例Kanor。遗憾的是，我没有足够的声誉来支持你的答案。干杯请记住，“适合”布局可以有一个，并且只有一个子级。在本例中，您将有一个尺寸为150x150的面板，您是指500X500吗？@NabinKhadka是的，这是一个拼写错误，谢谢，我现在将更新它。

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'
}]
});