Sencha ExtJs 5 中锚布局和适合布局的区别

Question

anchor 和 fit 布局在 ExtJs 5 中有什么区别？

Answer 1

Anchor 类似于 vbox 布局，但它允许您决定 children 项目的宽度和高度。

Fit layout，只是让这个布局的组件的 children 和它们的 parent.

一样大

所以：

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

在此示例中，您将有一个尺寸为 500x500 的面板，其中有两个 children 面板，其中一个为 50x100，另一个为 150x250。两者都左对齐。 parent 面板的其余部分将为空。这是fiddle：https://fiddle.sencha.com/#fiddle/i4r

合身：

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

在这种情况下，children 面板的尺寸将与他的 parent 相同，均为 500x500。这是fiddle：https://fiddle.sencha.com/#fiddle/i4s

根据评论编辑：注意"Fit"可以有一个，而且只有一个child

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

Sencha ExtJs 5 中锚布局和适合布局的区别

Difference between anchor layout and fit layout in Sencha ExtJs 5

anchor

layout

extjs