Wie man in Ext JS 5 ein Grid mit eigener Funktionalität erweitert

Eine der Standardkomponenten in Ext JS ist das Grid. Es stellt Daten in einer Tabellenform dar und bietet von Haus aus schon viele Funktionen, wie z.B. Filtern, Sortieren und Inline Editing. Manchmal sind diese Funktionen aber nicht genug und man möchte sein Grid um spezielle Features erweitern.

Möglichkeiten, eigene Funktionalität hinzuzufügen

Um dieses Ziel zu erreichen, gibt es mehrere Wege:

Das Grid erweitern

Der Klassiker unter den möglichen Lösungen: man schreibt ein eigenes Grid, welches das Ext JS Grid erweitert. Dieses Vorgehen stößt spätestens an seine Grenzen, wenn man mehr als eine eigene Funktionalität in seiner Applikation hinzufügt und Grids jeweils eine andere davon benötigen.

Mixins und Plugins

Mittlerweile bietet Ext JS zwei wunderbare Lösungen für dieses Problem: Mixins und Plugins. Auf den ersten Blick bieten sich beide an, um Funktionalität zu einer Komponente hinzuzufügen. Bei näherem Hinsehen kristallisieren sich jedoch einige Unterschiede heraus. Im Folgenden versuche ich diese kurz zusammenzufassen, für eine detailliertere Beschreibung von Mixins und Plugins empfehle ich diesen Blogbeitrag von Sencha.

Mixins

Mixins können auf jeder Klasse angewandt werden. Sie bieten die Möglichkeit, für jede Klassenmethode Hooks zu schreiben und dort eigene Funktionalität auszuführen. Diese Funktionalität wird direkt in den Prototyp der Klasse geschrieben. Daher ist die Verwendung von Mixins nur in der Klassendefinition erlaubt.

Plugins

Plugins dagegen sind eher als eigenständige Erweiterung einer Komponente zu sehen. Das ist auch schon der erste Unterschied zu Mixins. Plugins sind nur für Komponenten erlaubt und nicht für alle Klassen. Zusätzlich besitzen sie einen eigenen Lifecycle, der von der zugehörigen Komponente gemanagt wird.

Grid Features

Speziell für Grids bietet Ext JS noch eine weitere – und die wohl passendste – Möglichkeit: Grid Features. Features sind Plugins, die speziell für Grids entwickelt wurden. Man hat dort Zugriff auf grid-spezifische Funktionalität. So ist es in Features z.B. möglich, die Darstellung der Tabellenzeilen eines Grids zu ändern. Das macht das Feature zur perfekten Wahl, um ein Grid mit eigener Funktionalität zu erweitern.

Implementierung eines Grid Features

Im Prinzip macht Ext JS das Implementieren eines Features sehr einfach. Jedes Feature muss von ‚Ext.grid.feature.Feature‘ ableiten. Für die einfachste Version gibt es dann nur noch zwei Methoden, die zu beachten sind: init() und destroy().

Ext.define('Mayflower.grid.feature.CellTooltip', {
    extend: 'Ext.grid.feature.Feature',
    alias: 'feature.celltooltip',

    //private
    tooltip: null,

    init: function (grid) {
        this.callParent(arguments);
        this.grid = grid;
        this.grid.on('afterrender', this.addTooltip, this);
    },

    /**
    * Destroys the created tooltip
    *
    * @private
    */
    destroy: function () {
        var tooltip = this.tooltip;

        if (tooltip) {
            tooltip.destroy();
        }

        this.tooltip = null;
        this.callParent();
    },

    addTooltip: function () {
        //do stuff
    }
});

Die init() Methode bekommt als Parameter das zugehörige Grid. Sie wird aufgerufen, nachdem das Grid initialisiert worden ist. Hier kann man nun die weitere Funktionalität hinzufügen. In diesem Beispiel handelt es sich um ein Feature, welches über jeder Zelle im Grid einen Tooltip anzeigt, sodass lange Inhalte, die aufgrund der Darstellung im Grid abgeschnitten sind, trotzdem vollständig gelesen werden können.

Die destroy() Methode wird aufgerufen, wenn das zugehörige Grid zerstört wird. Es ist wichtig, alle selbst gebauten Komponenten ebenfalls zu zerstören und alle in diesem Feature aufgebauten Verknüpfungen zwischen dem Grid und etwaigen anderen Komponenten zu löschen. Im Beispiel wird nur die selbstgebaute Tooltip-Komponente zerstört, da diese ohne das Grid nicht weiter existieren soll.

Verwendung des eigenen Grid Features

Die Verwendung eines Features in einem Grid ist denkbar einfach. In der Konfiguration des Grids muss lediglich die Features Option benutzt und dort das Alias des Features angegeben werden:

features: [{ftype:'celltooltip'}]

Weitere Beispiele

Um die fertige Implementierung des obigen Beispiels zu sehen, empfiehlt sich ein Blick auf unser GitHub Repository. Dort haben wir eine kleine Auswahl an Grid Features in Form von Ext JS Packages bereitgestellt, die nicht nur einfach in Ihre Applikationen eingebunden werden können, sondern auch für eigene Erweiterungen zur Verfügung stehen. Wir freuen uns selbstverständlich über jeden Pull Request.