The anchor is similar to the vbox layout, but it allows you to determine the width and height of the children.
Fit layout, just makes the children of the component with this layout 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 500x500 panel with two child panels, one of which will be 50x100, and the other, the first one, will be 150x250. Both are aligned to the left. The rest of the parent panel will be blank. Here is the fiddle: https://fiddle.sencha.com/#fiddle/i4r
When fitting:
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’s panel will be the same size as its 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 this is understandable. The fact is that these two layouts are intended for use in different cases.