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:',
        }]
    });
};

2 comments

    • Olivier Pons

      Oui. Mais en JavaScript, dans tout un framework qui explique une manière de fonctionner et là, le truc qui fait perdre du temps, c’est que c’est une exception… disons donc que c’est l’exception qui confirme la règle 😉

Poster un commentaire

Vous devriez utiliser le HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>