dynamicinternet Wir machen Ihr Web dynamisch!

Templates mit der Ext Library

geschrieben von Micha am 19. April 2007 | 1 Kommentar

Nicht immer will man Daten in einem Grid darstellen, oder man braucht für einen Datensatz einen Detailview. Um das zu realisieren, benutzt man Templates. In diesem Tutorial will ich euchzeigen, wie einfach diese Templates zu benutzen sind.

Voraussetzungen: Kenntnisse in HTML, CSS, Javascript, MySQL und PHP

Wir benötigen für dieses Tutorial einen lokalen Webserver (XAMPP oder WAMP) mit PHP 5.2 und natürlich die Ext Library, welche ihr hier downloaden könnt.

Es ist sinnvoll, sich ebenfalls unser Tutorial Paging Grid mit der Ext Library anzuschauen, da wir die selben Daten verwenden wollen.

Der HTML Teil

Wir legen eine leere Html Datei an und nennen sie template.html. In den Head Bereich binden wir die erforderlichen Ext Scripte 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-debug.js"></script>
<script type="text/javascript" src="template.js"></script>

Die Pfadangaben der Scripte müßt ihr natürlich euren Gegebenheiten anpassen. Neu ist jetzt auch, das die yui-utilities und die ext-yui-adapter in dem Verzeichnis adapter/yui/ liegen.

Wie immer brauchen wir einen Platzhalter für unser Template im Body der Html Seite:

<h1>Ext Template Tutorial</h1>
<div id="myTemplate"></div>

Ein paar Styleangaben fügen wir noch im Head Bereich ein, damit es ein bischen netter aussieht.

<style type="text/css">
#myTemplate{
	margin:20px;
	padding:5px;
	border:2px solid rgb(178, 208, 247);
	width:200px;
}
h1{margin:20px; color:rgb(8, 55, 114);}
p, a{ color:rgb(8, 55, 114); line-height: 25px;}
a:hover{color:rgb(223, 55, 55);}
ul{margin:5px; border-bottom:1px solid rgb(178, 208, 247);}
</style>

Damit ist unsere Html Seite fertig.

Das Javascript

Wir legen eine leere Datei an und nennen sie template.js. In die kommt wieder die Ext.onReady Funktion, die ja aus den anderen Tutorials bekannt sein sollte:

Ext.onReady(function(){
	alert('You have Ext configured correctly!');
});

Wenn du nun beim Aufruf deiner template.html ein Alert Fenster aufgeht, sind alle Pfadangaben zur den Ext Bibliotheken in Ordnung.

Jetzt wollen wir ein einfaches Template erstellen. Ersetze die alert Zeile mit folgendem Code:

var html = '<p><a href="{url}">{urltext}</a></p>';

var tpl = new Ext.Template(html);
tpl.compile();

tpl.append('myTemplate', {
	url: 'http://www.extjs.com',
	urltext: 'Ext Website'
});
tpl.append('myTemplate', {
	url: 'http://www.jackslocum.com',
	urltext: 'Jack Slocums Blog'
});	

Nun sollte eure Html Seite so aussehen:

In der Variable html haben wir die Html Struktur festgelegt und danach ein Template tpl erzeugt. tpl.append bindet die Daten an unser myTemplate Div. Nun wollen wir aber unser Template dynamisch füllen.

Die PHP Datei

Ich gehe davon aus, daß du das Tutorial Paging Grid mit der Ext Library durchgearbeitet hast, da wir die selben daten verwenden werden. Wenn nicht, schaue dir den Teil an, in dem beschrieben wird, wie wir an die Daten gelangen.

Wir erzeugen eine leere Datei, fügen nachfolgenden Code ein und nennen sie template.php.

<?php
$db = mysql_connect("localhost", "user", "password")
    or die("Connection Error: " . mysql_error());

mysql_select_db("someData") or die("bla bla ...");

$myfriends = array();
$result = mysql_query("SELECT name, zipcode, city, country
			FROM friends
			ORDER BY name
			LIMIT 0, 20");

while ($obj = mysql_fetch_object($result)) {
	$myFriends[] = $obj;
}
echo '{"myFriends":'.json_encode($myFriends).'}';
?>

Der Code sollte für jeden verständlich sein.

Template mit Json View

Da wir nun Daten im Json Format geliefert bekommen, müssen wir eine Komponente aus der Ext vewenden, mit der wir diese Daten verarbeiten können, den JsonView.

Das template müssen wir natürlich auch unseren neuen Daten anpassen:

Ext.onReady(function(){
	var html =
		'<ul>' +
		'<li><b>{name}</b></li>' +
		'<li>{zipcode} {city}</li>' +
		'<li>{country}</li>' +
		'</ul>';

	var tpl = new Ext.Template(html);
	tpl.compile();

	var myView = new Ext.JsonView("myTemplate", tpl, {
		jsonRoot: "myFriends"
	});

	myView.load({
		url: 'template.php',
		text: 'Loading Friends ...',
		timeout: 50
	});
});

So sollte nun euere Seite aussehen.
Diesmal wird der JsonView an unser Div gebunden. Er läd die template.php und verarbeitet die Json Daten.

Jetzt werdet ihr euch vielleicht fragen, wozu das Ganze? Das hätte ich ja auch mit PHP alleine geschafft.

Meistes werden Templates mit anderen Komponenten zusammen verwendet, zum Beispiel mit dem Grid. Ihr klickt eine Zeile im Grid an und es erscheint eine Detailansicht des Datensatzes.

Oder ihr baut ein Inputfeld über das Div und filtert die Datensätze beim Eintippen eines Buchstaben, ohne die Seite neu zu laden, da ja alle Datensätze im DOM vorhanden sind. Es ist lediglich euer Fantasie überlassen, was ihr damit anstellt.