Unterschied zwischen Anker Layout und Fit Layout in Sencha ExtJs 5

Question

Was ist der Unterschied zwischen anchor und fit Layout in ExtJs 5?

Answer 1

Anker ähnelt dem vbox-Layout, ermöglicht jedoch die Festlegung der Breite und Höhe der untergeordneten Elemente.

Fit-Layout, macht nur, dass die Kinder der Komponente mit diesem Layout die gleiche Größe wie ihre Eltern haben werden.

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 diesem Beispiel werden Sie ein Panel mit Größe haben 500x500, mit zwei Kindern Platten, einer von ihnen wird 50x100 sein und die anderen, unter diesem ersten werden 150x250 sein. Beide sind nach links ausgerichtet. Der Rest des übergeordneten Bereichs ist leer. Hier ist die Geige: https://fiddle.sencha.com/#fiddle/i4r

Mit Sitz:

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 diesem Fall wird die Platte Kinder, wird die gleiche Größe wie seine Eltern haben, 500x500. Hier ist die Geige: https://fiddle.sencha.com/#fiddle/i4s

Edited basierend auf Kommentare: Beachten Sie, dass „Fit“ die man haben kann, und nur ein Kind

Hoffnung, dass es klar ist. Die beiden Layouts sollen in verschiedenen Fällen verwendet werden.