Ce layout permet de dimensionner les panneaux en fonction d'un pourcentage de la hauteur et/ou de la largeur de la page.
index.jsExt.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" }); });
Ce layout permet de découper le container en un maximum de 5 régions : center, east, north, south et west .
index.jsExt.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" }); });
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.
index.jsExt.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 :
index.jsExt.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" }); });
Il existe encore d'autre types de layout :
Comments
fenetre (not verified)
Wed, 28/07/2010 - 18:52
Permalink
merci pour ce résumé très
merci pour ce résumé très bien fait
Add new comment