Question

anchor中的fit和ExtJs 5布局有何区别？

Answer 1

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

适合布局，只需使具有此布局的组件的子项与其父项具有相同的大小。

所以：

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的面板，带有两个儿童面板，其中一个将是50x100，另一个是第一个，将是150x250。两者都对齐到左边。父面板的其余部分将为空。这是小提琴：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'
}]
});

在这种情况下，子面板将与其父级500x500具有相同的大小。这是小提琴：https://fiddle.sencha.com/#fiddle/i4s

根据评论进行编辑：请注意，“Fit”可以有一个，只有一个孩子

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

Sencha ExtJs 5中锚点布局和拟合布局之间的区别

1 个答案: