dynamicinternet Wir machen Ihr Web dynamisch!

Ein XML Grid mit der Ext Library

geschrieben von Micha am 26. März 2007 | 12 Kommentare

In diesem kleinen Tutorial wollen wir uns das Grid Widget aus Jack Slocums Ext Ajax Library einmal etwas näher anschauen.

Vorraussetzungen: Grundkenntnisse in HTML, CSS und Javascript.

Das Grid ist für mich die Killerkomponente in der Ext. Wir wollen euch in diesem Tutorial zeigen, wie einfach man ein voll funktionierendes Grid bauen kann.

Wir benötigen für dieses Tutorial zunächst die Ext Library, welche ihr momentan nur im Forum downloaden könnt, ab Erscheinen der 1. Betaversion dann auch von der Ext-Webseite. Wir erstellen uns nun ein Verzeichnis “ext-tutorial” auf der Festplatte. In dieses Verzeichnis entpackt ihr das heruntergeladene Zipfile. Jetzt habt ihr einen Ordner “ext-1.0-alpha4″, in dem alle erforderlichen Bibliotheken sind, sowie im Verzeichnis “docs” die Dokumentation und in “examples” ein paar Beispiele. Nun brauchen wir noch einen Ordner “xmlgrid” unterhalb von “ext-tutorial” für die Tutorial Dateien. Jetzt kanns losgehen.

Die HTML Seite

Wir erzeugen eine leere HTML Seite und speichern sie in Verzeichnis “xmlgrid” als xmlgrid.html ab. Dann erzeugen wir eine Javascript Datei und nennen sie xmlgrid.js. Wir öffnen nun mit unsereem favorisierten Editor die xmlgrid.html und fügen im head Bereich folgenden Code ein:

   

<link rel="stylesheet" type="text/css" href="../ext-1.0-alpha3/resources/css/ext-all.css" mce_href="../ext-1.0-alpha3/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-1.0-alpha3/yui-utilities.js" mce_src="../ext-1.0-alpha3/yui-utilities.js"></script>
<script type="text/javascript" src="../.ext-1.0-alpha3/ext-yui-adapter.js" mce_src="../.ext-1.0-alpha3/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../ext-1.0-alpha3/ext-all.js" mce_src="../ext-1.0-alpha3/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../ext-1.0-alpha/resources/css/ytheme-aero.css" mce_href="../ext-1.0-alpha/resources/css/ytheme-aero.css" />
<script type="text/javascript" src="xmlgrid.js" mce_src="xmlgrid.js"></script>   

Damit haben wir alle nötigen Dateien eingebunden. Das ytheme-aero.css ist nicht unbedingt erforderlich, das Grid sieht damit einfach besser aus. Ihr könnt auch mal mit ytheme-gray.css oder ytheme-vista.css probieren. Nun noch ein paar style Angaben im head Bereich anlegen:

   

<style>
	body { margin: 40px 0 0 40px; }
	h1 { margin-bottom: 20px; }
</style>   

Jetzt brauchen wir noch einen Platzhalter für das Grid und fügen ein div Element in den body ein:

   

<div id="tutorial-grid" style="border:1px solid #99bbe8;overflow: hidden; width: 650px; height: 250px; "></div>   

Damit sind wir mit der HTML Seite fertig und können sie nun speichern.

Das Javascript

Wir öffen die xmlgrid.js und fügen untenstehenden Code ein. Wenn du nun die xmlgrid.html in deinem Browser öffnest, sollte eine Alertbox erscheinen.

   

Ext.onReady(function() {
	alert("You have Ext configured correctly! We are now ready to do some Ext Grid Magic!");
});   

Wir brauchen eine XML Datei

Dazu besuchen wir die Webseite http://www.benjaminkeen.com/software/data_generator/. Ihr klickt bei Result type XML an, bei Number of results geben wir 10 ein, Root node name nennen wir friends und Record node name friend. Die Optionen der Datensätze so wie im Bild beschrieben. Dann klick Generate! und speichere die Datei als friends.xml im Verzeichnis xmlgrid ab.

Wir öffnen nun die friens.xml mit einem normalen Editor und fügen ein Node “count” hinzu, welches wir später für das Grid brauchen. Eure XML Datei sollte nun so aussehen:

   

<?xml version="1.0" encoding="UTF-8"?>
<friends>
	<count>10</count>
	<friend>
		<name>Timon Browning</name>
		<email>pretium@maurisidsapien.org</email>
		<zipcode>OJ4 8IK</zipcode>
		<country>Eritrea</country>
		<birthday>04/16/1992</birthday>
	</friend>
	<friend>
		....
	</friend>
</friends>   

Das XML Grid

Jetzt kommen wir endlich zu unserem Grid. Wir löschen die alert() Zeile aus unserem xmlgrid.js und ersetzen sie mit folgendem Code:

   

var ds = new Ext.data.Store({
	proxy: new Ext.data.HttpProxy({url: 'friends.xml'}),
	reader: new Ext.data.XmlReader({
		record: 'friend',
		id: 'name',
		totalRecords: '@count'
	}, [
		'name', 'email', 'zipcode','country', 'birthday'
	])
});   

var cm = new Ext.grid.ColumnModel([
	{header: "Name", width: 120, dataIndex: 'name'},
	{header: "Email", width: 220, dataIndex: 'email'},
	{header: "ZipCode", width: 70, dataIndex: 'zipcode'},
	{header: "Country", width: 130, dataIndex: 'country'},
	{header: "Birthday", width: 100, dataIndex: 'birthday', type: 'date'}
]);   

cm.defaultSortable = true;   

var grid = new Ext.grid.Grid('tutorial-grid', {
	ds: ds,
	cm: cm
});
grid.render();   

ds.load();   

Ok, das war eine Menge Code. Aber was genau haben wir gemacht? Schauen wir uns das einmal näher an:

Datastore

Zuerst haben wir einen Datastore erzeugt. Die config des Datastores enthält die Parameter proxy, der läd uns die XML Datei. Im reader wird definiert, was wir als Daten aus unserer XML Datei einlesen möchten. Das record definiert den Namen der Data Nodes, in unserem Fall “friends”. Bitte nicht mit dem Rootelement “friends” verwechseln. Als id haben wir das Node “name” benutzt und totalRecords holt sich die Anzahl der Datensätze aus dem Node “count”, welches wir zusätzlich eingefügt haben. Anschließend werden zwischen den eckigen Klammern noch die Elemente definiert, die wir in unserem Grid darstellen möchten.

Column Model

Das ColumnModel macht nichts weiter, als uns die Spalten unseres Grid zu definieren. Wie der Datastore besitzt das ColumnModel auch eine config. Im header benennt man die Tabellenüberschrift der jeweiligen Spalte, width ist die Breite der Spalte in Pixeln und dataIndex ist der Zeiger auf das jeweilige Element der XML Datei. Mit der Syntax “cm.defaultSortable = true;” definieren wir, daß die Spalten sortiert werden können.

Grid

Das Grid erwartet die Angabe des HTML Elements, in welchem es dargestellt wir. In unserem Beispiel haben wir ja das div “tutorial-grid” erzeugt. In der config wir noch der dataStore “ds: ds” und das columnModel “cm: cm” angegeben. Dann wird das Grid gerendert und zum Schluß die XML Datei geladen “ds.load();” .

Der ganze Spass hat nun 5 Minuten gedauert und unser Grid sollte nun so aussehen:

Ihr könnt nun die Spalten auf- und absteigend sortiern, ohne die Seite neu zu laden, ihr könnt die Breite der Spalten mit der Maus verändern. Zieht mal bei gedrückter Maustaste die Birthday Spalte vor die Zipcode Spalte. Das Alles geht, ohne eine einzige Zeile Code dafür geschrieben zu haben. Bei Rechtsklick auf einen Tabellenheader bekommt ihr ein Menü angezeigt, wo ihr zB. Spalten ausblenden könnt. Selbstverständlich kann man diese Optionen auch im Code verändern.

So, das waren leider nur die Basics, es gibt unzählige Parameter, mit dem man das Grid anpassen kann. Das fertige Grid ist hier zu sehen.

Wenn dieses Tutorial nützlich für euch war (oder auch nicht), schreibt bitte einen Kommentar.