Sencha ExtJ中的锚定布局和拟合布局之间的差异5 [英] Difference between anchor layout and fit layout in Sencha ExtJs 5

问题描述

锚定和适合布局在 ExtJs 5 ？

推荐答案

锚点类似于vbox布局，但它可以让您决定孩子的宽度和高度项目。

Anchor is similar to vbox layout, but it allows you to decide the width and height of the children items.

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

Fit layout, just makes that the children of the component with this layout will have the same size as their 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大小的面板，有两个子面板，其中一个面板是50x100，另一个，在这第一，将是150x250。两者对齐左。父面板的其余部分将为空。
这是小提琴： https://fiddle.sencha.com/#fiddle/ i4r

In this example you will have a panel with size 500x500, with two children panels, one of them will be 50x100 and the other one, under this first, will be 150x250. Both aligned to left. The rest of the parent panel, will be empty. Here it is the 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'
}]
});

在这种情况下，儿童面板的大小与父母500x500的大小相同。
这是小提琴： https://fiddle.sencha.com/#fiddle/i4s

In this case, the children panel, will have the same size as his parent, 500x500. Here is the fiddle: https://fiddle.sencha.com/#fiddle/i4s

根据评论编辑：请注意，适合可以有一个，只有一个孩子

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

Hope that it is clear. The thing is that those two layouts are intended to be used in different cases.

这篇关于Sencha ExtJ中的锚定布局和拟合布局之间的差异5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！