Ext JS: Wie erweitere ich die Basis?

17.03.2008

Ext JS LogoExt JS ist ein sehr umfangreiches und vor allem profesionelles clientseitiges JavaScript Framework zur Erstellung von ultramodernen Webapplikationen. Im Grundumfang sind bereits etliche Fensterelemente wie etwa Tabellen, Baumstrukturen, Tab-basierte Fenster oder Layouts enthalten. Die Umsetzung erfolgt dabei im Wesentlichen in objektorientierter Manier.

Eigene Namespaces definieren

Letzteres erlaubt in dem Zusammenhang vor allem das Erstellen von sauber strukturiertem Code. So lässt sich beispielsweise ein eigener Namespace deklarieren sowie die bestehende Funktionalität der Ext-Basisklasse auf schöne Art und Weise erweitern. Die Erstellung eines eigenen Namespaces kann bequem über eine Basisfunktion von Ext erfolgen:

Erstellung eines eigenen Namespaces in Ext JS
Ext.namespace('de', 'de.doubleSlash');

Erweiterung der Basisklasse

Popup mit der Adresse von doubleSlashInnerhalb des Namespaces lassen sich dann eigene Objekte deklarieren. So kann beispielsweise eine immer wiederkehrende Definition von Konfigurationsparametern eines von Ext JS definierten Objekts in einem neuen Objekt innerhalb des eigenen Namespaces abgelegt werden. Ein Beispiel hierfür könnte nebenstehendes simples Popupfenster darstellen. Hierbei wird neben dem individuellen Text und Buttonbeschriftung auch eine eigene CSS-Klasse für das Firmenlogo gesetzt.

Des Weiteren bietet Ext JS ebenfalls Ansätze zum bequemen Überschreiben respektive Erweitern der Basisklasse. Hierzu steht die Methode extend zur Verfügung. Nachfolgendes Beispiel zeigt exemplarisch die Definition eines abgeleiteten Window-Objekts. Hierbei wird neben der von Ext JS definierten Basisfunktion noch eigener Code ausgeführt.

Erweiterung der Basisfunktion von Ext JS
de.doubleSlash.Window = Ext.extend(Ext.Window,{
show : function(){
alert('Achtung, es kommt dann ein Fenster...');
de.doubleSlash.Window.superclass.show.apply(this, arguments);
},
modal: true,
onRender : function(){
de.doubleSlash.Window.superclass.onRender.apply(this, arguments);
alert('Jetzt ist das Rendering abgeschlossen!');
}
});

Fazit

Die Bibliothek Ext JS ist intern meiner Meinung nach sehr sauber strukturiert und aufgebaut, wenngleich das Lesen des Codes aufgrund des Umfangs und der Komplexität an manchen Stellen dennoch etwas schwer fällt. Mit den vorgestellten Mitteln und Wegen besteht aber die Möglichkeit den eigenen Code um Ext JS herum ebenso sauber zu strukturieren. Somit bleibt er für andere Entwickler und vor allem für die Zukunft immer beherrsch- und wartbar. Dieses gepaart mit einem Javascript-Kompressionsverfahren für den produktiven Betrieb stellt eine solide Basis für Businessanwendungen von Morgen dar.

Weitere Posts zu Ext JS:

  • Präsentationen Ex JS für bessere Weboberflächen
  • RIA-Entwicklung mit Silverlight, JavaFX, Adobe AIR und JavaScript/Ajax
  • Bessere Weboberflächen mit Ext JavaScript 2.0
Zurück zur Übersicht

6 Kommentare zu “Ext JS: Wie erweitere ich die Basis?

  1. Hallo Stephan,

    mir stellt sich die Frage, was du mit „speichert“ meinst. Aber nun Details zu Deinen Fragen:
    Frage 1)

    Im Grunde passiert an der Stelle nichts anderes, als dass die Methode „onRender“ der Basisklasse (hier also „Ext.Window“) aufgerufen wird. Über „apply“ können explizit Methoden aufgerufen werden mit optionaler Parameterweitergabe (hier „arguments“). Mit dem „arguments“ werden alle originalen Parameter an den weiteren Aufruf weitergegeben.

    Prinzipiell müsste nicht zwangsläufig dieser apply-Aufruf erfolgen. Das ist in dem konkreten Beispiel nur der Fall, um zu demonstrieren, wie man Methoden überschreiben kann und dabei aber doch noch die Original-Funktion der Basisklasse aufrufen kann. Es steht dir also frei, vor oder nach der Ausführung noch weitere Funktionalität einzubauen. Also in etwa so:

    onRender : function(){
    alert(„Das ist weitere Funktionalität vor der Originalmethode“);
    de.doubleSlash.Window.superclass.onRender.apply(this, arguments);
    },

    Frage 2)
    Die Referenz „superclass“ zeigt auf die Basisklasse, von der abgeleitet wurde. Die Ableitung findet über „Ext.extend…“ statt. Im konkreten Fall zeigt also „de.doubleSlash.Window.superclass“ quasi auf „Ext.Window“.

    Viele Grüße
    Klaus

  2. Hallo Klaus !

    Danke für das Skript.
    Mein ‚Klemmer‘ war, daß ich das icon mit einer Bilddatei gleichgesetzt habe.
    Bitte noch eine Frage. Ist es richtig, daß die Zeile
    de.doubleSlash.Window.superclass.onRender.apply(this, arguments);
    den Inhalt des ursprünglichen Window Objektes in ’superclass‘ speichert.
    Ist ’superclass‘ identisch mit dem public Teil der Klasse
    ‚de.doubleSlash.Window ‚ ?

    Mit freundlichen Grüßen

    Stephan

  3. Hallo Stephan,

    unter folgendem Link gibt es ein Paket mit dem gezeigten Beispiel: https://blog.doubleslash.de/wp-content/uploads/2009/12/doubleSlash_extjs.zip. Der Code basiert allerdings noch auf einer älteren Version von ExtJS. Damit es lauffähig ist, sollten noch die Ressourcen von ExtJS eingebunden werden.

    Kurze Anleitung zu den relevanten Dateien:

    index.html:
    In der HTML-Seite ist die CSS-Klasse „doubleSlash“ definiert. In der Klasse wird lediglich das background-image mit unserem Logo definiert.

    msg.box.js:
    In dieser Datei findet das Überschreiben der ExtJS-Klasse „MessagePopup“ statt. Unter anderem wird dort unter dem Attribut „icon“ auf die zuvor angelegte CSS-Klasse „doubleSlash“ referenziert.

    Im konkreten Beispiel wird die CSS-Definition lediglich innerhalb der HTML-Seite gemacht. Diese könnte durchaus aber auch über externe CSS-Dateien erfolgen.

    Ich hoffe, dass die Code-Schnipsel weiterhelfen!

  4. Hallo !

    Ein schöner Artikel.
    Könnte man das Skript haben. Mich interessiert die Einbindung der
    CSS Datei.

    Gruß Stephan

  5. Das stimmt natürlich. Gerade am Anfang, wenn man versucht mit Ext JS „warm“ zu werden,
    wären solche Codebeispiele mehr als nur hilfreich. Das würde so manchen „try and error“-Ansatz deutlich beschleunigen.
    Als kleines Trostpflaster kann an der Stelle aber auch das Forum von Ext JS (http://extjs.com/forum) dienen. Dort werden häufig Fragen und Problemstellungen behandelt, auf welche man auch selbst stößt.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*Pflichtfelder

*