Qual è la differenza tra il layout anchor
e fit
in ExtJs 5
?Differenza tra layout di ancoraggio e layout di adattamento in Sencha ExtJs 5
risposta
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.
Ottimo esempio Kanor. Triste che non ho abbastanza reputazioni per votare la tua risposta. Saluti! –
Ricorda che un layout "Adatta" può avere uno e un solo bambino. – mangotang
sì, tenete a mente il layout Fit dovrebbe avere un figlio –