ExtJS et Panel : le layout « absolute »
Après plusieurs heures de recherches, j’ai enfin compris comment fonctionnait le layout « absolute ».
L’utilité de la disposition "absolute"
, est qu’on peut positionner les éléments dans le conteneur à un endroit bien précis, au pixel près.
Voici l’astuce qui m’a fait perdre tellement de temps, et qui, je l’espère, vous en fera gagner :
D’habitude, sur tous les « layout » existants, lorsqu’on les définit, ils s’appliquent sur les éléments contenus. Et non pas sur le conteneur.
La seule exception se trouve avec le layout « absolute » : je le mets en gros et gras, parce que j’ai passé énormément de temps à trouver cette astuce :
Lorsqu’on utilise le layout « absolute », il faut toujours préciser aussi la largeur et la hauteur du conteneur, sinon ce dernier ne sera jamais affiché
Exemple concret :
Voici ce qui ne fonctionnait pas :
MonPanel = function(tab) {
this.layout = 'absolute';
this.border = false;
MonPanel.superclass.constructor.call(this, {
items: [{
x: 0,
y: 5,
xtype: 'label',
text: 'To:',
}]
});
};
Le panneau n’était pas affiché. Voici ce qui ne fonctionne :
MonPanel = function(tab) {
this.layout = 'absolute';
this.border = false;
this.width = '100%';
this.height = 150;
MonPanel.superclass.constructor.call(this, {
items: [{
x: 0,
y: 5,
xtype: 'label',
text: 'To:',
}]
});
};