Les layouts

L'élément de base pour construire une interface avec ExtJS est le panneau (composant Ext.Panel). Chaque container peut recevoir un ou plusieurs panneaux et la disposition de ces panneaux est contrôlée par le layout du container.

Layout par défaut (Ext.layout.ContainerLayout)

Si on ne spécifie pas de layout, les panneaux sont simplement empilés les uns sur les autres. Si on reprend l'exemple précédent avec 2 panneaux :

Ext.onReady(function() {
  var viewport = new Ext.Viewport({   
    items: [{
      html: "Panneau 1"
    }, {
      html: "Panneau 2"
    }] 
  });
});

On obtient le résultat suivant :

Layout fit

Si on n'a qu'un seul panneau et qu'on veut qu'il occupe toute la place disponible dans le container, on utilise le layout fit.

Ext.onReady(function() {
  var viewport = new Ext.Viewport({   
    items: {
      html: "Panneau 1"
    },
    layout: "fit"
  });
});

Le résultat :

La différence est subtile avec le premier exemple, mais si vous regardez bien, la bordure bleu du panneau suit bien les contours de la fenêtre.

Layout absolute

Le layout absolute permet de positionner les panneaux à une position précise avec les paramètres de configuration x et y.

Ext.onReady(function() {
  var viewport = new Ext.Viewport({   
    items: {
      html: "Panneau 1",
      x: 50,
      y: 20
    },
    layout: "absolute"
  });
});

Le résultat :

Layout accordion

Le layout accordion permet d'empiler les panneaux de façon à ce qu'il n'y en ait qu'un seul de visible. C'est une disposition qui est notamment utilisée dans la barre latérale de l'application MS Outlook. Elle nécessite que le titre des panneaux soit défini avec la propriété title.

Ext.onReady(function() {
  var viewport = new Ext.Viewport({   
    items: [{
      html: "Panneau 1",
      title: "Titre panneau 1"
    }, {
      html: "Panneau 2",
      title: "Titre panneau 2"
    }],
    layout: "accordion"
  });
});

Le résultat :