Differenza tra layout di ancoraggio e layout di adattamento in Sencha ExtJs 5

Question

Qual è la differenza tra il layout anchor e fit in ExtJs 5?

Answer 1

L'ancoraggio è simile al layout di vbox, ma consente di decidere la larghezza e l'altezza degli elementi figli.

Adatta layout, fa solo in modo che i figli del componente con questo layout abbiano le stesse dimensioni del loro genitore.

Quindi:

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 questo esempio si avrà un pannello con dimensioni 500x500, con due pannelli per bambini, uno di loro sarà 50x100 e l'altro, in questa prima, sarà 150x250. Entrambi allineati a sinistra. Il resto del pannello genitore sarà vuoto. Qui è il violino: https://fiddle.sencha.com/#fiddle/i4r

Con 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 questo caso, il pannello dei bambini, avrà la stessa dimensione come il suo genitore, 500x500. Ecco il violino: https://fiddle.sencha.com/#fiddle/i4s

cura sulla base di commenti: nota che "Fit" può avere uno, e un solo bambino

speranza che sia chiaro. Il fatto è che quei due layout sono pensati per essere usati in diversi casi.