Les layouts (suite)

Layout anchor

Ce layout permet de dimensionner les panneaux en fonction d'un pourcentage de la hauteur et/ou de la largeur de la page.

Ext.onReady(function() {
  var viewport = new Ext.Viewport({   
    items: [{
      anchor: "50%",
      html: "Panneau qui prend la moitié de la largeur de la page",
    },{
      anchor: "25% -50",
      html: "Panneau qui prend 1/4 de la largeur de la page et la hauteur de la page - 50px",
    }],
    layout: "anchor"
  });
});

Layout border

Ce layout permet de découper le container en un maximum de 5 régions : center, east, north, south et west .

Ext.onReady(function() {
  var viewport = new Ext.Viewport({   
    items: [{
      region: "center",
      html: "center",
    }, {
      region: "east",
      html: "east",
    }, {
      region: "north",
      html: "north",
    }, {
      region: "south",
      html: "south",
    }, {
      region: "west",
      html: "west",
    }],
    layout: "border"
  });
});

Layout column

Ce layout permet de répartir le contenu sur plusieurs colonnes. La propriété columnWidth permet de définir la largeur de la colonne en fraction de la largeur du container.

Ext.onReady(function() {
  var viewport = new Ext.Viewport({   
    items: [{
      columnWidth: 0.5,
      html: "Colonne 1"      
    }, {
      columnWidth: 0.5,
      html: "Colonne 2",
    }],
    layout: "column"
  });
});

Vous pouvez utiliser conjointement la propriété width et la propriété columnWidth. Il faut cependant que la somme des columnWidth soit toujours égale à 1.

Par exemple, pour ajouter une colonne large de 75 pixels :

Ext.onReady(function() {
  var viewport = new Ext.Viewport({   
    items: [{
      columnWidth: 0.5,
      html: "Colonne 1"      
    }, {
      columnWidth: 0.5,
      html: "Colonne 2",
    }, {
      html: "Colonne largeur 75px",
      width: 75
    }],
    layout: "column"
  });
});

Autres layout

Il existe encore d'autre types de layout :

• Le layout form : utilisé par Ext.form.FormPanel, il gère la disposition des champs des formulaires et de leurs étiquettes. Il est dérivé de Ext.layout.AnchorLayout, ce qui permet d'utiliser la propriété anchor pour par exemple étirer les champs pour qu'ils prennent toute la largeur disponible.
• Le layout card permet de superposer plusieurs panneaux à la manière d'un jeu de carte. Il peut être utilisé pour créer des assistants où chaque panneau est activé par un clic sur une paire de boutons Précédent/Suivant. Il est également utilisé par le composant Ext.TabPanel qui permet de répartir un contenu sur plusieurs onglets.
• Le layout table permet de disposer ses panneaux à l'aide d'un tableau HTML.