dynamicinternet Wir machen Ihr Web dynamisch!

Tutorial: Einführung in die Ext Ajax Library

geschrieben von Micha am 18. März 2007 | 27 Kommentare

Wenn du noch nie etwas von der Ext Library gehört hast oder einfach nur mehr darüber erfahren möchtest, bist du hier an der richtigen Adresse. Dieses Tutorial geht auf die Grundaspekte der Ext ein und zeigt wie man damit eine dynamische Webseite schnell und einfach zum Laufen bekommt. Es wird vorausgesetzt, dass der Leser einige Erfahrung mit Javascript sowie ein Grundverständnis des HTML Document Object Model, auch DOM genannt, besitzt.

Dieses Tutorial wurde von Brian Moeskau geschrieben und von uns ins Deutsche übersetzt. Die Originalversion ist hier zu finden.

Download Ext

Zuerst solltest du dir die Ext Library herunterladen, wenn du das nicht schon getan hast. Das aktuelle Release befindet sich momentan nur im Forum, später unter http://www.extjs.com

Es gibt immer unterschiedliche Versionen, die man herunterladen kann, aber das Beste ist mit der aktuellen stabilen(stable) Version des Produktes loszulegen. Nach dem Herunterladen und Entpacken solltest du dir zuallerst den examples Ordner vornehmen.

Legen wir los

Wir gehen im Folgenden auf die wichtigsten Schritte ein, die mit Javascript zu bewältigen sind und danach wie man diese mit der Ext library umsetzt. Wenn du die Schritte selbst nachvollziehen möchtest, solltest du dir diese Datei herunterladen IntroToExt.zip. Das Zip enthält 3 Dateien: ExtStart.html, ExtStart.js und ExtStart.css. Entpacke die 3 Dateien in ein Verzeichnis direkt unter dem Verzeichnis, wo die Ext installiert ist (z.B. wenn die Ext in “c:\code\Ext\v1.0″ liegt, erstelle ein Verzeichnis unter “v1.0″, nenne es z.B. “tutorial”). Mit einem Doppelklick auf ExtStart.htm öffnet sich dein Web Browser und es sollte eine Nachricht erscheinen die dir sagt, dass alles richtig konfiguriert ist. Wenn du einen Javascript Fehler angezeigt bekommst, dann beachte bitte die Hinweise auf dieser Seite.

Jetzt sind wir startklar die ExtStart.js in einem Editor zu öffnen und sie uns mal genauer anzusehen:

	  

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

	

Ext.onReady ist wahrscheinlich die erste Methode, die du auf jeder Seite benutzen wirst. Sie wird automatisch aufgerufen, sobald das DOM fertig geladen wurde und garantiert, dass jedes Element des DOM mit dem man arbeiten möchte, auch zur Verfügung steht, wenn das Skript abgearbeitet wird. Die alert() Zeile kann jetzt von uns gelöscht und mit sinnvollem Code ersetzt werden!

Element: Das Herz der Ext

Fast alles was du mit Javascript machst betrifft das Referenzieren von bestimmten Elementen auf deiner Seite, um interessante Dinge mit ihnen zu machen. Normalerweise holt man sich in Javscript ein DOM Node by ID folgendermaßen:

  

var myDiv = document.getElementById('myDiv');  

Das Ganze funktioniert auch super, aber das Objekt das als DOM Node zurückgegeben wird besitzt nicht viel Funktionalität. Damit man jetzt etwas Sinnvolles mit dieser Node anstellen kann, muss man immer noch viel eigenen Code schreiben. Ein anderer Nachteil ist, dass wir die Verantwortung übernehmen, wie mit dem Node Objekt, das von jedem Browser anders zurückgegeben wird, umzugehen ist. Diese Tatsache wirkt auf die meisten Anfänger sehr abschreckend.

Schauen wir uns einmal das Ext.Element Objekt an. Element ist das eigentliche Herzstück der Ext, da die meisten Aktionen darauf abzielen, Zugriff auf bestimmte Elemente zu bekommen und irgendwelche Aktionen mit diesen Elementen auszuführen. Die Element API ist fundamental in der ganzen Ext und wenn man sich die Zeit nimmt eine Klasse wirklich zu verstehen, dann sollte es Element sein!

Der dementsprechende Code der ein Ext Element by ID holt, sieht folgendermaßen aus (Die Startseite ExtStart.htm enthält ein div mit der id “myDiv”, also fügen wir diesen Code zu ExtStart.js hinzu):

  

Ext.onReady(function() {
	var myDiv = Ext.get('myDiv');
});  

Was ist so toll an diesem Element Objekt?

• Element besitzt die häufigsten DOM Methoden und Eigenschaften und stellt uns ein bequemes, einheitliches Cross-Browser DOM Interface zur Verfügung (und trotzdem hat man Zugriff auf die grundlegende DOM Node mit Element.dom, wenn man es benötigt)
• Die Methode Element.get() stellt uns internes Caching zur Verfügung, so dass mehrmaliger Zugriff auf das selbe Objekt extrem schnell von statten geht
• Die häufigsten Aktionen, die auf DOM Nodes angewandt werden, sind direkt in cross-Browser Methoden umgesetzt (Hinzufügen/Löschen von CSS Klassen, Hinzufügen/Löschen von Event Handlern, Positionierung, Größenänderungen, Animation, Drag/Drop, usw.)

Mit sehr wenig Code kann man hier viel erreichen. Hier sind ein paar simple Beispiele (in der Element API Documentation findet man eine komplette Liste aller Dinge, die man machen kann). Probiere es ruhig aus, indem du einige dieser Zeilen direkt nach der Zeile, wo wir das “myDiv” Element geholt haben, in ExtStart.js hinzufügst:

  

myDiv.highlight();  // The element's background will highlight to yellow then fade back
myDiv.addClass('red');  // Add a custom CSS class (defined in ExtStart.css)
myDiv.center();  // Center the element in the viewport
myDiv.setOpacity(.25);  // Make the element partially-transparent  

DOM Nodes selektieren

Meist ist es leider unpraktisch oder sogar unmöglich eine DOM Node by ID auszuwählen. Möglicherweise ist die ID nicht gesetzt, nicht bekannt oder es gibt schlichtweg zuviele Elemente um diese direkt mit ihrer ID zu referenzieren. Manchmal möchte man aber auch ein Node von Hand auswählen anstatt durch die ID, ähnlich einem Attribut oder einem CSS Klassennamen. Aus diesen Gründen gibt es eine sehr mächtige DOM Selector Library namens DomQuery.

DomQuery kann man als eigenständige Bibliothek oder aber, mit der Ext im Zusammenhang, bei der Auswahl von Elementen verwenden, sodass man mit ihnen mit dem Element Interface arbeiten kann. Glücklicherweise unterstützt das Element Objekt das Auswählen durch eine Element.select Methode, welche intern DomQuery zur Abfrage von Elementen benutzt. Ein einfaches Beispiel, welches die Verwendung zeigt: Die ExtStart.html Datei enthält mehrere Paragraphen (<p>) Tags, die keine ID’s besitzen. Wenn man nun einfach alle Paragraphen auswählen und Aktionen durchführen möchte, könnte man es so bewerkstelligen:

  

Ext.select('p').highlight();  // Highlights every paragraph  

Dieses Beispiel demonstriert einen sehr praktischen Aspekt von Element.select. Dies gibt nämlich ein CompositeElement zurück, das uns den Zugriff auf das darunter liegende Element über das Element Interface ermöglicht. Dadurch kann man sehr leicht auf jeder Element Instanz arbeiten, die uns von Element.select zurückgeliefert wird, ohne dass man Schleifen bauen oder jedes Element einzeln anfassen muss.

DomQuery bietet eine Vielzahl von Selektionsmöglichkeiten, z.b. fast alle W3C CSS3 DOM Selektoren, einfachen XPath, HTML Attribute und noch viele weitere. Die vollständige Dokumentation findest du in der DomQuery API Documentation.

Auf Events reagieren

Bis jetzt haben wir jeden Code in unserem Beispiel direkt in die onReady Funktion geschrieben, was soviel heißt wie, dass der Code sofort nach dem Laden der Seite ausgeführt wird. Viel besser wäre es jedoch unseren Code aufgrund gewisser Aktionen oder Events auszuführen. Diese Freiheit wollen wir uns im Folgenden nehmen. Dazu benötigen wir Event Handler, die auf bestimmte Events reagieren und Funktionen ausführen, die wir ihnen zuweisen werden.

Beginnen wir mit einem simplen Beispiel. Öffne die ExtStart.js und verändere sie so, dass der Code wie folgt aussieht:

  

Ext.onReady(function() {
	Ext.get('myButton').on('click', function(){
		alert("You clicked the button");
	});
});  

Der Code wird zwar immer noch ausgeführt sobald die Seite geladen ist, aber es gibt einen signifikanten Unterschied. Die Funktion, die das alert() beinhaltet, wird zwar definiert, jedoch noch nicht ausgeführt. Sie wird als “Handler” für das Click Event des Buttons zugewiesen. Wörtlich gesprochen bedeutet es soviel wie: “Hole dir eine Referenz von dem Element mit der ID ‘myButton’ und nenne ihr die Funktion, die aufgerufen werden soll, wenn jemand auf das Element klickt.”

Es ist ganz offensichtlich, dass Element.select uns gestattet das Gleiche mit einer ganzen Gruppe von Elementen zu tun. Wenn wir beispielsweise wollen, dass jedesmal eine Nachricht ausgegeben wird, wenn irgendein Paragraph auf unserer Seite angeklickt wird, könnten wir das so tun:

  

Ext.onReady(function() {
	Ext.select('p').on('click', function() {
		alert("You clicked a paragraph");
	});
});  

In diesen zwei Beispielen wurde die Handling Funktion einfachheitshalber inline deklariert, also ohne ihr einen Namen zuzuweisen. Eine Methode solchen Typs wird auch als “anonyme Funktion” bezeichnet, da sie ganz ohne Funktionsnamen deklariert wird. Natürlich ist es auch möglich ein Event mit einer Funktion mit Namen zu behandeln, was besonders bei immer wiederkehrenden Funktionen, die mehrere Events behandeln, ein sinnvolles Äquivalent zu dem Code oben ist:

  

Ext.onReady(function() {
	var paragraphClicked = function() {
		alert("You clicked a paragraph");
	}
	Ext.select('p').on('click', paragraphClicked);
});  

Bis jetzt haben wir immer nur allgemeine Aktionen ausgeführt, wenn unser Event geworfen wurde, aber wie greifen wir auf das spezifische Element zu, das das Event ausgelöst hat? Das Ganze ist jedoch leichter als man annimmt. Die Methode Element.on gibt drei extrem hilfreiche Parameter an die Event Handling Funktion weiter (Wir schauen uns hier nur den Ersten an, aber du solltest dir die API Dokumentation unbedingt ansehen um mehr über Event Handling zu erfahren). In unserem letzten Beispiel ignoriert unsere Handling Funktion diese Parameter, aber mit nur einer kleinen Änderung verschaffen wir uns zusätzliche Funktionalität. Der erste und auch wichtigste Parameter ist das Event, welches aufgetreten ist. Dieser Parameter ist ein Ext event object, welcher zum Einen zwischen unterschiedlichen Browsern immer gleich ist, und zum Anderen mehr Informationen als das Standard Browser Event zur Verfügung stellt. Zum Beispiel können wir die Ziel DOM Node des Events mit diesem kleinen Zusatz erfragen:

  

Ext.onReady(function() {
	var paragraphClicked = function(e) {
		Ext.get(e.target).highlight();
	}
	Ext.select('p').on('click', paragraphClicked);
});  

Beachten muss man hier, dass target ein DOM Node ist, also rufen wir erst das betreffende Element ab und führen dann die Aktionen aus, die wir wollen. In diesem Fall heben wir den Paragraph visuell hervor.

Wie benutzt man Widgets?

Als Zusatz zu dem Hersztück der Ext Library, das wir besprochen haben, beinhaltet die Ext außerdem eine der besten Sammlungen von UI Widgets, die es heutzutage gibt. Das sind natürlich viel zu viele, als dass man sie sie alle in dieser Einführung ansprechen könnte, aber wir schauen uns die am häufigsten benutzten an und zeigen wie einfach es ist mit ihnen zu arbeiten.

Eine viel schönere MessageBox

Um unsere Seite ein bisschen aufzupeppen, ersetzen wir nun diese langweilige “Hello World” Nachricht. Wir haben ja schon den Code aus der vorherigen Sektion, der jeden Paragrahp hervorhebt, wenn man auf ihn klickt. Wir modifizieren den Code so, dass er zusätzlich noch den Text des Paragraphs in einer MessageBox ausgibt. In der paragraphClicked Funktion von oben ersetzen wir folgende Zeile:

	  

	Ext.get(e.target).highlight();  

	

…mit diesem Code:

	  

	var paragraph = Ext.get(e.target);
	paragraph.highlight();  

	Ext.MessageBox.show({
		title: 'Paragraph Clicked',
		msg: paragraph.dom.innerHTML,
		width:400,
		buttons: Ext.MessageBox.OK,
		animEl: paragraph
	});  

	

In diesem Zusammenhang werden viele neue Konzepte erwähnt, die wir hier detailliert betrachten werden. In der ersten Zeile haben wir eine lokale Variable mit dem Namen paragraph, die eine Referenz auf das Element der DOM Node speichert, auf die geklickt wurde (In diesem Fall wissen wir, dass es immer ein Paragraph ist, da unser Click Event nur den <p> Tags zugewiesen ist). Warum tun wir das? Nun, vorausschauend betracht benötigen wir eine Referenz auf ein Element um es dann hervorheben zu können und genauso benötigen wir das selbe Element als ein Parameter für die MessageBox. Es ist eine schlechte Angewohnheit dieselbe Funktion mehrfach aufzurufen um ein und dasselben Wert oder Objekt Referenz zu bekommen. Dadurch dass wir es einer lokalen Variablen zuweisen und danach diese Variable wiederverwenden, programmieren wir objektorientiert!

Nun kommen wir zum MessageBox Aufruf. Auf den ersten Blick sieht es wie eine simple Liste von Parametern aus, die an eine Methode übergeben werden, aber wenn man mal genauer hinschaut erkennt man eine gewisse Syntax. In diesem Fall übergeben wir an MessageBox.show() einen Parameter: ein Objekt Literal, welches eine Liste (genauergesagt ein Set) von Eigenschaften und Werten enthält. In Javascript ist ein Objekt Literal ein dynamisches, generisches Objekt das bei jeder Verwendung von { und }, die eine Liste von Name/Wert Eigenschaften einschließen, erstellt wird. Es hat die Form [Eigenschaftsname] : [Eigenschaftswert]. Dieses Muster zieht sich fast einheitlich durch die ganze Ext, du solltest es dir also gut einprägen!

Warum sollte ich Objekt Literale verwenden? Der Hauptgrund ist die Flexibilität. Man kann jederzeit neue Eigenschaften hinzufügen oder andere entfernen. Auch die Reihenfolde der Eigenschaften spielt keine Rolle, was sonst für gewöhnliche Funktionsparameter unvorstellbar ist. Weiterhin ist es viel bequemer für den Anwendungsentwickler, wenn man z.B. viele optionale Funktionsparameter hat (wie in MessageBox.show). Lasst uns mal annehmen wir haben eine fiktive Methode foo.action, die vier optionale Parameter hat von denen man aber nur einen übergeben muss. In diesem Fall könnte der Code so aussehen: foo.action(null, null, null, ‘hello’). Wenn man sich hingegen den Code unter Verwendung von einem Objekt Literal anschaut: foo.action({ param4: ‘hello’ }). Das Ganze ist viel einfacher zu verwenden und auch lesbarer.

Das Grid

Das Grid stellt eines der bekanntesten Widgets in der Ext dar. Normalerweise ist es auch das Erste, welches die Leute sehen wollen, also schauen wir uns an wie leicht es ist das Grid zum Laufen zu bekommen. Ersetze bitte jeden Code in der ExtStart.js mit dem Folgenden:

	  

Ext.onReady(function() {
	var myData = [
		['Apple',29.89,0.24,0.81,'9/1 12:00am'],
		['Ext',83.81,0.28,0.34,'9/12 12:00am'],
		['Google',71.72,0.02,0.03,'10/1 12:00am'],
		['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
		['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
	];  

	var ds = new Ext.data.Store({
		proxy: new Ext.data.MemoryProxy(myData),
		reader: new Ext.data.ArrayReader({id: 0}, [
			{name: 'company'},
			{name: 'price', type: 'float'},
			{name: 'change', type: 'float'},
			{name: 'pctChange', type: 'float'},
			{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
		])
	});
	ds.load();  

	var colModel = new Ext.grid.ColumnModel([
		{header: "Company", width: 120, sortable: true, dataIndex: 'company'},
		{header: "Price", width: 90, sortable: true, dataIndex: 'price'},
		{header: "Change", width: 90, sortable: true, dataIndex: 'change'},
		{header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},
		{header: "Last Updated", width: 120, sortable: true,
			renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
	]);  

	var grid = new Ext.grid.Grid('grid-example', {ds: ds, cm: colModel});
	grid.render();
	grid.getSelectionModel().selectFirstRow();
});  

	

Das sieht jetzt noch ganz schön viel Code aus, es sind aber in Wirklichkeit nur 7 Zeilen! Die erste Zeile erstellt in Array von Daten, die in dem Grid dargestellt werden sollen. In wirklichen Projekten sind das natürlich meist Daten von einer dynamischen Quelle, z.b. eine Datenbank oder ein Web Service. Als Nächstes erstellen und laden wir einen data.Store, der der Ext Library sagt, wie die Daten zu lesen und zu formartieren sind. Mit dem danach definierten ColumnModel sind wir in der Lage jede Spalte einzeln nach unseren Bedürfnissen anzupassen. Zum Schluß erstellen wir dann noch das Grid Widget, weisen ihm das data.Store und das ColumnModel zu, rendern es und selektieren die erste Zeile. Na wenn das nicht einfach war!? Wenn alles gut gegangen ist, sollte das Resultat nun so aussehen:

Verständlicherweise sind da noch Unklarheiten zu dem gerade geschriebenen Code (wie z.B. was verflixt nochmal ist bitte ein MemoryProxy?). Der Punkt ist aber, dass wir demonstrieren wollten, wie einfach es ist, eine sehr ansprechende User Interface Komponente mit ein paar Zeilen Code zu erzeugen.

Und viele viele mehr…

Das was wir bis jetzt gesehen haben war natürlich nur die Spitze des Eisberges. Es gibt buchstäblich Dutzende von UI Widgets in der Ext (z.B. automatische Seitenlayouts, Tabs, Menüs, Toolbars, Dialoge, Tree View und viele viele mehr.

Ajax verwenden

Wenn du die Seite einmal erstellt hast und nun weißt, wie man mit ihr mit Hilfe von Javascript interagiert, möchtest du vielleicht auch wissen wie man Daten auf und von einem Remote Server bekommt. Gewöhnlicherweise benutzt man das um Daten von einer Datenbank zu laden oder diese zu speichern. Wenn man das asnychron mit Javascript ohne Nachladen der Seite bewerkstelligt, nennt man das für gewöhnlich Ajax. Und wie man es nicht anders erwartet hat, bietet Ext exzellente eingebaute Ajax Unterstützung. Ein gewöhnlicher Anwendungsfall ist das Behandeln von Interaktionen des Benutzers. Daraufhin sendet man etwas asynchron an den Server und passt ein Element der UI als Antwort auf die Interaktion an. Wir schauen uns nun ein Beispiel mit einem sehr simplen HTML Form an, die ein Texteingabefeld, einen Knopf und ein Div zum Anzeigen einer Nachricht enthält (Hinweis: Du kannst diesen Code zur ExtStart.html hinzufügen, wenn du das selbst ausprobieren willst, aber du musst auch auf einen Webserver (zB. XAMPP oder WAMP für lokales Arbeiten) zugreifen können, damit der untere Server Code ausgeführt wird):

	
<div id="msg" style="visibility: hidden"></div>
Name: <input type="text" id="name" /><br />
<input type="button" id="oKButton" value="OK">
	

Als nächstes fügen wir den Javascript Teil hinzu, der benötigt wird, um unsere Daten zu holen und an einen serverbasierten Prozess zu senden (Ersetze einfach jeden schon existierenden Code mit diesem hier):

	  

Ext.onReady(function(){
	Ext.get('oKButton').on('click', function(){
		var msg = Ext.get("msg");
		msg.load({
			url: [server url], //  replace with your url
			params: "name=" + Ext.get('name').dom.value,
			text: "Updating..."
		});
		msg.show();
	});
});  

	

So langsam gewöhnt man sich an das Muster! Der Code umschließt die Eingaben des okButton mit einem Element Objekt und verknüpft eine anonyme Funktion mit dem Event, dass einen Klick auf diesen Button behandelt. In dem Click Handler benutzen wir eine spezielle Klasse der Ext, die sich UpdateManager nennt. Diese Klasse kümmert sich idealerweise um das Senden eines Ajax Requests, Empfangen der Antwort und das Aktualisieren eines anderen Elements. Der UpdateManager kann direkt genutzt werden oder, so wie wir es hier tun, kann der Zugriff auch über das Element selbst erfolgen (in unserem Fall das ‘msg’ Div), indem wir die Element.load Methode aufrufen. Zur Erklärung, mit Element.load wird das innerHTML des Elements automatisch durch die Antwort des Server ersetzt. Man übergibt einfach die URL zu dem Serverbasierten Prozess, der den Request behandelt, die Querystring Parameter (in unserem Fall der Wert von dem Feld ‘name’) und der Text der als innerHTML in dem Element angezeigt werden soll, während der Request weitergeleitet wird. Außerdem zeigen wir das ‘msg’ Div an, da es standardmäßig versteckt ist. Natürlich gibt es, wie mit allen Teilen der Ext, viel viel mehr Optionen, die der UpdateManager unterstützt, ebenso wie unterschiedliche Wege Ajax Requests je nach Situation zu behandeln. Das Beispiel zeiget, wie einfach und schnell es ist, die Grundelemente zum Laufen zu bekommen.

Der letzte Teil unseres Ajax Puzzles ist der Prozess auf dem Web Server, der den Request behandelt und die Antwort an die Seite zurückschickt. Dieser Prozess könnte beispielsweise eine Server Seite, ein Servlet, ein HTTP Handler, ein Web Server oder sogar ein Perl bzw. CGI Script sein. Wir brauchen einfach irgendetwas, was auf dem Web Server läuft und HTTP Requests behandelt. Aufgrund der vielen Unterschiede gibt es leider kein Standardbeispiel, das alle Möglichkeiten abdeckt. Hier sind aber einige Beispiele in den am häufgisten verwendeten Sprachen (der Code gibt einfach das aus, was mit ‘From Server: ‘ zurück an den Client ausgehend von dem Feld ‘name’ gesendet wurde und schreibt es in das ‘msg’ Div:

	  

/* PHP */
<? if(isset($_GET['name'])) {
		echo 'From Server: '.$_GET['name'];
	}
?>  

	

	  

/* ASP */
protected void Page_Load(object sender, EventArgs e)
{
	if (Request["name"] != null)
	{
		Response.Write("From Server: " + Request["name"]);
		Response.End();
	}
}  

	

	  

/* COLDFUSION */
<cfif StructKeyExists(url, "name")>
	<cfoutput>From Server: #url.name#</cfoutput>
</cfif>  

	

Die Community benutzt dabei unterschiedliche Formate, meistens jedoch JSON oder XML. Außerdem existieren viele sprachabhängige Libraries, die sich um Ajax Processing kümmern und die ohne Probleme mit der Ext Library zusammenarbeiten. Die Ext Library ist sprachneutral gehalten, in Hinblick auf den Server. Solange das Ergebnis im richtigen Format an die Seite gesendet wird, ist es der Ext egal, was auf dem Server passiert! Eine komplette Diskussion über Ajax Processing würde natürlich wieder einmal den Rahmen dieses Tutorials sprengen.

Wir wünschen euch viel Spass beim Durcharbeiten des Tutorials!