Tutorial: ExtJS 3.x einrichten
Erstellt von Patrick Matsumura am 12.12.2009
| Keine KommentareUpdate: Dieses Tutorial funktioniert mit allen Versionen von ExtJS 3.x.
ExtJS ist ein in Javascript programmiertes Ajax-Framework, das zum Erzeugen von “echten” Webanwendungen verwendet werden kann. Es bietet nette Features wie Windows, Grids, schöne MessageBoxes und vieles mehr an. In diesem Artikel möchte ich zeigen, wie einfach das Framework zu installieren und zu nutzen ist.
Vorbereitungen
Damit eine erste kleine “Hallo Welt” Applikation mit ExtJS geschrieben werden kann, sind einige Voraussetzungen zu erfüllen. Zunächst muss die ExtJS Bibliothek heruntergeladen und in ein Verzeichnis entpackt werden. Ich schlage eine Verzeichnisstruktur wie auf dem Bild vor:
Ausserdem empfehle ich dringend Firebug. Ein Webentwickler sollte heutzutage ohne Firebug Plugin nicht mehr arbeiten. Es erleichtert das Finden von Fehlern, das direkte Anpassen von CSS und HTML und das Analysieren vom Datenverkehr zwischen Server und Browser. Jetzt wird noch ein Webserver zum Hosten und ein FTP-Zugang zum Speichern der HTML-Dateien benötigt.
Aufbau der HTML Seite
Ich gehe ab hier davon aus, dass grundlegende HTML-Kenntnisse vorhanden sind. Damit ExtJS überhaupt funktionieren kann, braucht man natürlich eine HTML-Seite, die das Framework lädt. Nachfolgend ein kleines Grundgerüst, das ExtJS nutzbar macht.
<html>
<head>
<link rel="stylesheet" type="text/css" href="/js/ext-3.0.3/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="/js/ext-3.0.3/resources/css/xtheme-blue.css" />
<script src="/js/ext-3.0.3/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="/js/ext-3.0.3/ext-all-debug.js" type="text/javascript"></script>
<title>Tutorial: ExtJS HTMl-Grundgerüst</title>
</head>
<body>
Willkommen beim ExtJS Tutorial: Wie richtet man ExtJS 3.0 ein.
</body>
</html>
Zunächst müssen wir die CSS-Dateien laden, damit die ExtJS-Elemente auch so aussehen, wie sie sollen. Ich habe mich für das blaue Theme entschieden und daher mit
<link rel="stylesheet" type="text/css" href="/js/ext-3.0.3/resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="/js/ext-3.0.3/resources/css/xtheme-blue.css" />
erst das “Grund-CSS” geladen und danach aufbauend das XTheme-Blue geladen. Evtl. werde ich ein Tutorial verfassen, wie man seine eigenen Themes erstellt und in ExtJS einbindet.
Die Zeilen
<script src="/js/ext-3.0.3/adapter/ext/ext-base.js" type="text/javascript"></script> <script src="/js/ext-3.0.3/ext-all-debug.js" type="text/javascript"></script>
laden zunächst den ExtJS Basisadapter und danach die gesamte ExtJS Bibliothek in der Debugversion. Während der Entwicklung sollte die Debugversion verwendet werden, da sie in Firebug (oder jeder anderen Javascriptkonsole) “schönere” Fehlermeldungen anzeigt. Sobald das Projekt in einer Produktivumgebung laufen soll, ist es ratsam ext-all.js zu verwenden. Diese Version ist kompakter und enthält nur sehr stark verkürzte Fehlermeldungen. Ausserdem wurden die Variablennamen häufig auf einen Buchstaben verkürzt und unnötige Zeichen wie Leerzeichen entfernt. Diesen Vorgang des “Komprimierens” nennt man auch minifying. Es verringert die Ladezeit erheblich und die Geschwindigkeit beim Ausführen von ExtJS wird um einiges höher. Eine weitere Optimierung bringt es, die Daten mit Gzip zu übertragen.
Nachdem das HTML-Grundgerüst steht und es auf einen Webserver gespeichert wurde, wird die Seite aufgerufen. Ich habe sie in das Rootverzeichnis (oberhalb vom js-Verzeichnis) als index.html gespeichert. Wenn in Firebug unter dem Reiter “Netzwerk” das Resultat in etwa so aussieht, wie auf dem Screenshot, dann ist ExtJS installiert und bereit genutzt zu werden.
Damit das versprochene “Hallo Welt”-Fenster im Browser erscheint, werde ich den body-Bereich der Webseite etwas erweitern. Und zwar so:
<script type="text/javascript">
Ext.onReady(function () {
Ext.MessageBox.show({
title: 'Willkommen zu ExtJS',
msg: 'Hallo Welt!',
buttons: Ext.MessageBox.OK,
minWidth: 250,
modal: false
});
});
</script>
Das Ergebnis diese kleinen Code-Schnipsels sieht dann so aus:
Was dieser Code genau macht, werde ich in einem weiteren Tutorial erläutern, da dieses hier ausschliesslich dem Einrichten von ExtJS gewidmet ist.
Verbesserungsvorschläge, Kritik oder Lob bitte als Kommentar hinterlassen. Um immer auf dem Laufenden zu bleiben, einfach kostenlos und unverbindlich den RSS-Feed abbonieren. Danke für die Mithilfe,
Patrick