What is the difference between anchor
and fit
layout in ExtJs 5
?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With