From Learn About the Ext JavaScript Library

Contents 1 Einführung 1.1 Szenario 1 - Anfänger 1.2 Szenario 2 - Profi 2 Zeig's mir

Einführung

Szenario 1 - Anfänger

Du hast von Ext gehört, du hast die Online-Beispiele ausprobiert, vielleicht hast du auch schon einen Blick in die API-Dokumentation riskiert. Wie dem auch sei, es juckt dich enorm in den Fingern, deine ersten Gehversuche mit Ext zu machen, dir fehlt lediglich ein Testserver!

Szenario 2 - Profi

Du wühlst dich durch die API-Dokumentation, und du stolperst über eine interessant aussehende Methode, die du hier und jetzt ausprobieren willst, aber du hast nicht die Zeit, erst eine passende HTML-Seite zu bauen, die all die erforderlichen Ressourcen enthält, nur um die Funktion dieser einen Methode zu testen.

Wie deine Motivation auch immer sein mag, hier ist ein schneller Weg zu einer Ext-Spielwiese, ohne dass du unbedingt einen Webserver benötigst. Was du brauchst, ist Firefox mit installiertem Firebug-Add-On, und falls du diesen noch nicht benutzt haben solltest, tu dir selbst den Gefallen und mach es!

Zeig's mir

• Lade die Ext API-Dokumentation. Aller Wahrscheinlichkeit nach kennst du diese Seite bereits.
• Drücke F12 um die Firebug-Konsole zu öffnen (du benutzt doch Firebug, oder?)
• Wenn dein Firebug-Eingabefeld einzeilig sein sollte, etwa so: '>>>', dann klicke auf den kleinen roten aufwärts weisenden Pfeil in der rechten unteren Ecke, um das Eingabefeld mehrzeilig zu machen.
• Tippe dein erstes Kommando ein und betätige anschließend Strg+Enter zum Ausführen:

Ext.get(document.body).update('<div id="test"></div>');

Diese Eingabe ersetzt das komplette DOM des Seiten-Body durch ein einzelnes DIV (mit der ID test). Der Seiteninhalt ist weg, aber die Ext-Bibliothek ist nach wie vor geladen und spielbereit.

Nun nehmen wir an, du hattest im Ext.Panel-API gestöbert und willst mit deinen eigenen Augen sehen, wie einfach ein Panel-Objekt zu erzeugen sei. Füge die folgenden Zeilen dem Code in der Konsole hinzu:

Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
	renderTo: 'test',
	width: '200px',
	title: 'My Title',
	html: 'My HTML content'
});

Betätige wiederum Strg+Enter, und voilà, dein neues Panel erscheint in der Seite.

Ok, nun möchtest du vielleicht wissen, was passiert, wenn du einen Konfigurations-Parameter hinzufügst, z.B. um die Eigenschaft collapsible zu aktivieren. Dein Code ist nach wie vor in der Firebug-Konsole, so kannst du einfach die entsprechende Zeile hinzufügen:

Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
	renderTo: 'test',
	width: '200px',
	title: 'My Title',
	html: 'My HTML content',
	collapsible: true
});

Betätige Strg+Enter, und augenblicklich siehst du das entsprechende Tool-Icon in der oberen rechten Ecke des Panels erscheinen.

Jedesmal wenn du Strg+Enter betätigst, entfernt die erste Befehlszeile alles, was bei der vorherigen Code-Ausführung zum DOM hinzugefügt wurde, und du behältst sozusagen immer eine abgewischte Tafel zum Arbeiten. Ein vergleichsweise simpler Trick, aber nichtsdestotrotz extrem praktisch, um das riesige Arsenal an Konfigurations-Parametern schnell zu erkunden.

Du kannst der update()-Methode in der esten Zeile so viel HTML hinzufügen wie du brauchst, und ebenso kannst du erforderlichenfalls ellenlange Javascripts direkt in der Konsole schreiben, um das Ext-API zu erforschen.

Und nun geh spielen :)