dynamicinternet Wir machen Ihr Web dynamisch!

Borderlayouts mit der Ext Library Teil 1

geschrieben von Micha am 30. April 2007 | 3 Kommentare

Die Ext Layouts sind sehr hilfreich zum Erstellen von Rich Internet Applications (RIA). Unser Blogarchiv zum Beispiel ist ein Boderlayout mit Nord, West und Center Region. In diesem Tutorial wollen wir uns anschauen, wie einfach solche Layouts zusammengefügt werden.

Voraussetzungen: Grundkenntnisse in HTML, CSS und Javascript.

Dieses Tutorial basiert auf der Version Ext-1.0, welche hier heruntergeladen werden kann.

Ein Überblick

Das Layout besitzt 5 vordefinierte Regionen: North, Center, South, West und East, mindestens eine (Center) muß genutzt werden. Diese sind im Bild unten schwarz dargestellt.

Diese Regionen besitzen Panels. Panels sind Container, in denen beliebige Inhalte, wie zB. HTML Seiten, iFrames oder andere Ext Widgets, eingebunden werden können. Diese sind im Bild unten rot dargestellt.
Jede Region kann ausserdem weitere Regionen/Panels besitzen (NestedPanels), im Bild unten die blauen Container. Somit lassen sich je nach Anforderung die Layouts ineinander verschachteln.

Ein einfaches Borderlayout

Nun wollen wir ein BorderLayout bauen. Wir benötigen eine leere HTML Seite “layout.html” und eine Javascript Datei “layout.js” im selben Verzeichnis. In den Head Bereich der HTML Seite binden wir nun die Bibliotheken der Ext ein:

<link rel="stylesheet" type="text/css" href="../ext-1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-1.0/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../ext-1.0/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../ext-1.0/ext-all.js"></script>
<script type="text/javascript" src="layout.js"></script>

Bitte passt den Pfad zu eurer Ext entsprechend an und achtet auf die richtige Reihenfolge der Dateien. In die layout.js fügen wir folgende Zeilen ein:

Ext.onReady(function(){
	Ext.MessageBox.alert('Hallo', 'Ext is now ready!');
});

Wenn ihr nun die layout.html in euerem Browser aufruft, sollte eine Messagebox erscheinen.

Löscht die Messagebox Zeile und fügt den Code ein:

var myLayout = new Ext.BorderLayout(document.body,{
	north: {
		split: true,
		initialSize: 100
	},
	south: {
		split: true,
		initialSize: 100
	},
	east: {
		split: true,
		initialSize: 150
	},
	west: {
		split: true,
		initialSize: 150
	},
	center: {
	}
});

Wir haben 5 Regionen angelegt, mit initialSize die Größe der einzelnen Regionen festgelegt und mit split: true erlauben wir, die Höhe/Breite dereinzelnen Bereiche zu verändern. Die Center Region hat keine Angaben, ihre Größe errechnet sich automatisch. Nun müssen wir für jede Region ein ContentPanel erstellen. Dazu legen wir in der HTML Seite Divs als Platzhalter für die einzelnen Panels an.

<div id="oben"></div>
<div id="unten"></div>
<div id="rechts"></div>
<div id="links"></div>
<div id="mitte"></div>

In der layout.js ergänzen wir folgenden Code:

	myLayout.beginUpdate();
	myLayout.add('north', new Ext.ContentPanel('oben', {
		fitToFrame: true, closable: false
	}));
	myLayout.add('south', new Ext.ContentPanel('unten', {
		fitToFrame: true, closable: false
	}));
	myLayout.add('east', new Ext.ContentPanel('rechts', {
		fitToFrame: true, closable: false
	}));
	myLayout.add('west', new Ext.ContentPanel('links', {
		fitToFrame: true, closable: false
	}));
	myLayout.add('center', new Ext.ContentPanel('mitte', {
		fitToFrame: true
	}));
	myLayout.endUpdate();

myLayout.add fügt dem LayoutManager eine Instanz der ContentPanel Klasse hinzu, in der wir angeben, in welchen Platzhalter das Panel gerendert wird. Es stehen viele zusätzliche Parameter zur Verfügung, die wir uns in den nächsten Teilen genauer ansehen werden. Die hier verwendeten Parammeter: fitToFrame: true bedeutet, daß das Panel die Größe des Elternelements annimmt und closable: false, das das Panel nicht geschlossen werden kann.

Diese Regionen können auch mit CSS verändert werden. Fügt in den Head Bereich der layout.html noch ein paar Styleangaben ein.

<style type="text/css">
#oben{background: red;}
#unten{background: blue;}
#rechts{background: green;}
#links{background: yellow;}
#mitte{background: white;}
</style>

Wenn wir nun unsere layout.html Seite im Browser öffnen, haben wir ein schönes Layout mit 5 Regionen. Hier ist das fertige Layout.
Wir können die einzelnen Regionen mit der Maus verändern. Wenn sich die Fenstergöße des Browsers oder die Bildschirmauflösung ändert, passt sich das Layout automatisch an.

Im nächsten Teil werden wir uns weitere Paramter ansehen und unser Layout mit Inhalt füllen.