dynamicinternet Wir machen Ihr Web dynamisch!

Layouts mit der Ext Library Teil 3

geschrieben von Micha am 04. Mai 2007 | 16 Kommentare

Im zweiten Teil dieses Tutorials haben wir verschieden Methoden kennengelernt, das Borderlayout mit Inhalten zu füllen und haben eine Toolbar hinzugefügt. In diesem Teil wollen wir uns die Nested Layouts anschauen.

Solltest du den ersten und zweiten Teil noch nicht gelesen haben, hole dies bitte schnell nach.

Voraussetzungen: Grundkenntnisse in HTML, CSS und Javascript.

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

Nested Layouts

Wie der Name Nested Layouts schon sagt, werden die Nested Layouts einfach in das normale Borderlayout eingebettet. Jedes Panel kann ein Nested Layout haben, welches ebenfalls Nested Layouts haben kann. Somit sind selbst komplexe Verschachtelungen realisierbar. Wir werden ein Nested Layout mit einer Center und einer South Region in unser West Panel einbauen. Dazu müssen wir zuerst aus der layout.js die Zeile

westPanel.setContent('Hallo, ich bin das West Panel');

löschen, da das West Panel der Container für unser Nested Layout wird und daher keinen Inhalt haben darf (Das Nested Layout ist dann der Inhalt). Dann brauchen wir noch 2 Platzhalter für die beiden neuen Panels und legen in der layout.html 2 Div’s an:

<div id="inhalt1"></div>
<div id="inhalt2"></div>

Das Layout wird wieder genau so definiert, wie wir es von dem Borderlayout her kennen, nur das wir es in einer eigenen Variable anlegen:

...
myLayout.add('center', centerPanel = new CP('mitte', {
	fitToFrame: true, closable: false, toolbar: tb, resizeEl:'inhalt'
}));

/***** ab hier gehts los *****/

var innerLayout = new Ext.BorderLayout('links', {
	center: {
		split:true,
		initialSize: 100,
		minSize: 100,
		maxSize: 400,
		autoScroll:true,
		titlebar: true
	},
	south: {
		split:true,
		initialSize: 300,
		minSize: 100,
		maxSize: 500,
		autoScroll:true,
		collapsible:true,
		titlebar: true
	}
});

Nun müssen wir dem innerLayout die ContentPanels zuweisen:

var nCenter = innerLayout.add('center', new CP('inner1', {
	title:'Inner Layout 1',
	fitToFrame:true,
	autoScroll:true
}));
var nSouth = innerLayout.add('south', new CP('inner2', {
	title:'Inner Layout 2',
	fitToFrame:true,
	autoScroll:true
}));

Hier noch einmal zur Erklärung: Wir haben das innerLayout in unserem ‘links’ Div angelegt. Das innerLayout besitzt 2 Regionen, ‘center’ und ‘south’. ‘center’ bekommt das ‘inner1′ Div als ContentPanel zugewiesen und ‘south’ das ‘inner2′ Div. Also nicht verwirren lassen. Die Namen north, south, east, west und center dürfen nicht geändert werden, daran erkennt der LayoutManager die Regionen. Wir haben die beiden ContentPanels gleich als Variablen angelegt, damit haben wir auch sofort Zugriff darauf.

Jetzt müssen wir nur noch das innerLayout zu unserem Layout hinzufügen:

myLayout.add('west', new Ext.NestedLayoutPanel(innerLayout,{title: 'Mein Nested Layout'}));

Nun noch ein bischen Inhalt:

nCenter.setContent('<p class="test">Nested Panel Center</p>');
nSouth.setContent('<p class="test">Nested Panel South</p>');

Wie wir gesehen haben, kann man ganz normalen HTML Code einfügen und mit Stylesheets beeinflussen. In unserem borderlayout.css fehlt jetzt noch die Klasse ‘test’.

.test{
	margin:10px;
	font-size:12px;
	color: red;
}

Eine Bemerkung noch: Wenn man ein Panel zugeklappt hat, ist nur der blaue Balken und das Aufklapp-Icon zu sehen. Das liegt daran, daß es in HTML keine Möglichkeit gibt, Buchstaben zu drehen und somit bei horizontaler Teilung der Panels eh nichts zu sehen wäre. Wir können uns aber mit Bildern behelfen. Wir brauchen nur den Namen der jeweiligen Klasse herausfinden und können dann dieser Klasse das dementsprechende Bild zuweisen. Dazu einfach im Firebug auf ‘Inspect’ drücken und auf das entsprechene Element fahren. Dann legen wir die beiden Klassen im borderlayout.css an und definieren unsere Bilder als Hintergrund. Ich habe einfach die Bilder aus meinem Blogarchiv genommen.

.x-layout-collapsed-south{
	background:url(../PfadzuDeinemBild/south.png) center no-repeat;
}
.x-layout-collapsed-west{
	background:url(../PfadzuDeinemBild/west.png) center no-repeat;
}

Damit sind wir fertig. Das Resultat so aussehen: Hier ist das fertige Layout.