Difference between anchor layout and fit layout in Sencha ExtJs 5

问题

What is the difference between anchor and fit layout in ExtJs 5?

回答1:

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.

So:

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

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

With fit:

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

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

Edited based on comments: Note that "Fit" can have one, and only one child

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

来源：https://stackoverflow.com/questions/28471715/difference-between-anchor-layout-and-fit-layout-in-sencha-extjs-5

标签

extjs

layout

anchor