dynamicinternet Wir machen Ihr Web dynamisch!

Layouts mit der Ext Library Teil 2

geschrieben von Micha am 01. Mai 2007 | 5 Kommentare

Im ersten Teil haben wir die Grundlagen des Layoutmanagers und der Panels kennengelernt und ein nacktes Borderlayout erstellt. In diesem Teil lernen wir verschiedene Methoden kennen, das Layout mit Inhalten zu füllen und die Funktionalität zu erweitern.

Solltest du den ersten 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.

Vorbereitungen

Als erstes öffnen wir unsere layout.html und löschen den kompletten Stylebereich. Jetzt legen uns ein separates Stylesheet an, welches wir borderlayout.css nennen. Danach fügen wir in die layout.html nur noch den Link zu unserem Stylesheet ein:

<link rel="stylesheet" type="text/css" href="borderlayout.css" />

Den Code in unserer layout.js verbessern wir auch etwas. Der Einfachheit halber füge ich hier den ganzen Code ein:

Layout = function(){
	var CP = Ext.ContentPanel;
	var northPanel, eastPanel, westPanel, southPanel, centerPanel;
	return{
		init: function(){
			var myLayout = new Ext.BorderLayout(document.body,{
				north: {
					split: true,
					initialSize: 100
				},
				south: {
					split: false,
					initialSize: 30
				},
				east: {
					split: true,
					initialSize: 150
				},
				west: {
					split:true,
					initialSize: 100
				},
				center: {
				}
			});
			myLayout.beginUpdate();
			myLayout.add('north', northPanel = new CP('oben', {
				fitToFrame: true, closable: false
			}));
			myLayout.add('south', southPanel = new CP('unten', {
				fitToFrame: true, closable: false
			}));
			myLayout.add('east', eastPanel = new CP('rechts', {
				fitToFrame: true, closable: false
			}));
			myLayout.add('west', westPanel = new CP('links', {
				fitToFrame: true, closable: false
			}));
			myLayout.add('center', centerPanel = new CP('mitte', {
				fitToFrame: true, closable: false
			}));
			myLayout.endUpdate();
		}
	};
}();
Ext.EventManager.onDocumentReady(Layout.init, Layout, true);

Statischer Inhalt

Um Inhalte in ein Panel zu laden, gibt es viele Möglichkeiten. Wir können den Inhalt direkt in die HTML Seite schreiben. Das werden wir nun mit der North Region tun. Dazu ändern wir den Code etwas ab, damit sie wie ein Header aussieht. Die Höhe wird auf 50 Pixel gesetzt und wir brauchen keinen Splitter.

north: {
	split: false,
	initialSize: 50
},

Wir brauchen eine Header Überschrift. Die fügen wir das “oben” Div ein:

<div id="oben"><h1>Layout mit der Ext Library</h1></div>

Damit es auch wirklich wie ein Header aussieht, fügen wir unserer borderlayout.css ein paar Styles hinzu:

#oben{
	background: #00459F;
}
h1{
	color: #fff;
	text-align: center;
	font: normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif ;
	padding-top: 10px;
}

Es ist ja nicht sonderlich spannend, statischen Inhalt aus dem Quelltext zu laden. Dafür brauchen wir eigentlich keine Ajax Anwendung. Sehen wir uns nun ein paar Funktionen an, um dynamischen Inhalt zu laden.

Dynamischer Inhalt

Die beiden Funktionen, die wir benutzen, sind setContent() und setUrl(). Mit setContent() kann der Inhalt einer Variablen ausgegeben werden, auch Text oder ein Bild. setUrl() läd eine Webseite in das jeweilige Panel. Danach muß das Panel allerdings refreshed werden.

...
myLayout.endUpdate();
westPanel.setContent('Hallo, ich bin das West Panel');
eastPanel.setUrl('<img src="irgendeinBild.jpg" alt="Ein Bild" />');
centerPanel.setUrl('euerPfadzu/ext-1.0/docs/output/ContentPanels.jss.html');
centerPanel.refresh();

Wir haben nun das Problem, daß der Inhalt im CenterPanel abgeschnitten wird. Um das zu beheben, setzen wir in der Center Region autoScroll auf true:

center: {
	autoScroll: true
}

Damit haben wir das Problem gelöst. Solltet ihr eine Webseite laden, die selbst externe Stylesheets läd, kann es je nach Browser passieren, daß das CSS nicht richtig dargestellt wird. In solchen Fällen ist es besser, innerhalb des center Divs ein iframe anzulegen und mit Ext.get(‘euer_iframe’).dom.src = ‘eureSeite.html’ den Inhalt in das iframe zu laden.

In dem CenterPanel könnte man auch ein Template erstellen und JSON Daten in das Template zu laden. Dazu braucht ihr nur mein Template Tutorial durcharbeiten und mit diesem Tutorial kombinieren. Probiert es aus!

Mehr Optionen

Jetzt verbessern wir noch einiges an dem Layout. Wir brauchen eigentlich das East Panel nicht. Dafür wollen wir eine HTML Seite aus den Doc’s der Ext in ein iFrame laden und wir möchten eine Toolbar im Center Panel haben, mit der wir das West Panel ein- und ausblenden können. Ausserdem soll das West Panel ein- und auszufahren gehen. Los gehts!

Zuerst löschen wir alles aus dem layout.js, was mit eastPanel zu tun hat. Das BorderLayout sollte dann so aussehen:

var myLayout = new Ext.BorderLayout(document.body,{
	north: {
		split: false,
		initialSize: 50
	},
	south: {
		split: false,
		initialSize: 30
	},
	west: {
		split:true,
		initialSize: 300,
		minSize: 200,
		maxSize: 400,
		titlebar: true,
		animate: true,
		collapsible: true
	},
	center: {
	}
});

Unsere West Region hat eine Menge Optionen bekommen. initialSize gibt die eingestellte Breite in Pixeln an, minSize und maxSize bestimmen, in welchem Bereich sich der Splitter verschieben läßt. titlebar: true blendet die Titlebar ein, animate: true läßt das East Panel animiert auf- und zuklappen. Diese Option ist aber mit Vorsicht zu genießen. Sollten sich viele Elemente in diesem Panel befinden, ist es besser, animate auf false zu setzen, da es sonst zu Rucklern kommt. collapsible: true ist die Option, die das Panel auf- und zuklappen läßt.

Wir müssen noch einige Änderungen an unserer layout.html vornehmen, da wir ein iframe brauchen und einen Platzhalter für die Toolbar.

<div id="mitte">
	<div id="toolbardiv"></div>
	<iframe id="inhalt" frameborder="0" scrolling="auto"></iframe>
</div>

Der Code unterhalb von myLayout sieht nun so aus:

myLayout.beginUpdate();
myLayout.add('north', northPanel = new CP('oben', {
	fitToFrame: true, closable: false
}));
myLayout.add('south', southPanel = new CP('unten', {
	fitToFrame: true, closable: false
}));
myLayout.add('west', westPanel = new CP('links', {
	fitToFrame: true, closable: false, title: 'West'
}));
myLayout.add('center', centerPanel = new CP('mitte', {
	fitToFrame: true, closable: false, toolbar: tb, resizeEl:'inhalt'
}));
myLayout.endUpdate();
westPanel.setContent('Hallo, ich bin das West Panel');
southPanel.setContent('Ich bin eine Statusbar.');
Ext.get('inhalt').dom.src= '../euerPfadzu/ext-1.0/docs/output/ContentPanels.jss.html';

Es funktioniert noch nicht, weil wir keine Toolbar erstellt haben. Das wollen wir jetzt tun.

var tb = new Ext.Toolbar('toolbardiv');
tb.add({
	id: 'show',
	text:'Show West',
	cls:'x-btn-text-icon show',
	disabled: true,
	handler: showWest
},'-', {
	id: 'hide',
	text:'Hide West',
	cls:'x-btn-text-icon hide',
	handler: hideWest
});
var btns = tb.items.map;

Wir weisen der Tollbar tb unseren Platzhalter zu. Danach erstellen wir zu der Toolbar 2 Button. In der Config der Buttons geben wir die CSS Klasse an (cls), die das Aussehen der Buttons bestimmt, handler ist der Eventhandler, der eine Funktion aufruft, die ausgeführt wird, wenn der Button gedückt wird. Diese müssen wir noch programmieren. Wir definieren eine Variable btns, damit wir in unseren Funktionen auf die Buttons zugreifen können. Nun zu den beiden Funktionen:

var west = myLayout.getRegion('west');
function showWest(){
	west.show();
	btns.show.disable();
	btns.hide.enable();
}
function hideWest(){
	west.hide();
	btns.show.enable();
	btns.hide.disable();
}

Das sollte nicht schwer zu verstehen sein. Was jetzt noch fehlt, sind die CSS Styles für die Button:

.show .x-btn-text {
	background-image:url(../euerPfadzu/ext-1.0/examples/shared/icons/fam/add.gif);
}
.hide .x-btn-text {
	background-image:url(../euerPfadzu/ext-1.0/examples/shared/icons/fam/delete.gif);
}

Damit sind wir fertig. Wenn wir unsere layout.html Seite im Browser öffnen sollte das Resultat so aussehen: Hier ist das fertige Layout.