In diesem Tutorial zeigen wir Ihnen, wie Sie per Plugin ein Grid-Panel in Ihr Shopware 5 Backend integrieren – einfach und verständlich. Das Grid-Panel (z. Dt. Rasterfeld) ist die wohl am häufigsten verwendete ExtJS-Komponente. Sie dient hauptsächlich zur Darstellung großer Mengen tabellarischer Daten, vor allem Daten einer „1:n“- oder „n:m“-Beziehung. Ein simples Beispiel ist das Anlegen von Links/Verweisen innerhalb des Ressourcen-Tabs eines Artikels (s. Abbildung). Im folgenden Tutorial wird schrittweise erklärt, wie Sie ein ExtJS Grid-Panel für das Shopware 5 Backend erstellen und an Ihre Bedürfnisse anpassen können – inklusive kostenfreier Code-Snippets.
Der erste und wichtigste Schritt zur Erstellung eines eigenen ExtJS Grid-Panels ist die korrekte Instanziierung eines neuen Objekts vom Typ „Grid-Panel“. Dabei ist besonders wichtig, dass die Basiskonfigurationen des Grid-Panels mit übergeben werden.
me.gridPanel = Ext.create('Ext.grid.Panel', {
title: 'Titel des Grid-Panels',
store: me.gridStore,
columns: [
{ text: Spalte 1, dataIndex: 'spalte1' },
{ text: Spalte 2, dataIndex: 'spalte2' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
Das obige Code-Snippet erzeugt ein ExtJS Grid-Panel mit einer einfachen Grundkonfiguration. In diesem Beispiel wird nicht weiter auf die Parameter wie „height“ oder „title“ eingegangen, weil diese selbsterklärend sind. Vielmehr liegt der Fokus im weiteren Tutorial auf den beiden Parametern „columns“ und „store“, da sie für die Hauptfunktionalität des Grids essenziell sind.
Im vorangegangenen Code-Beispiel wurden dem Grid zwei Spalten – namentlich „Spalte 1“ und „Spalte 2“ – hinzugefügt. Dafür müssen Sie dem Parameter „columns“ ein Array übergeben, das alle benötigten Spalten in Objekt-Notation enthält. Eine Spalte besteht dabei jeweils mindestens aus „text“ (dem angezeigten Spaltenname) und „dataIndex“ (der gemappte Schlüssel aus dem Store – dazu später mehr). Auf diese Weise lassen sich beliebig viele Spalten anlegen und Daten, die innerhalb des Stores liegen, werden zudem schon richtig innerhalb des Panels angezeigt. ExtJS bringt bereits einige Standardfunktionen wie auf- und absteigend Sortieren mit. Essenzielle Funktionen wie das Bearbeiten einer bestimmten Zelle oder das Verschieben ganzer Zeilen fehlen aber und müssen erst konfiguriert bzw. initialisiert werden. Im weiteren Tutorial zeigen wir Ihnen Schritt für Schritt, wie das funktioniert.
Um die Bearbeitung der Zelle zu ermöglichen, muss dem Grid-Panel ein Plugin übergeben werden, das diese Funktionalität ermöglicht:
me.cellEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
});
Mit diesem Code wird das Shopware Plugin instanziiert und kann anschließend dem Parameter „plugins“ innerhalb eines Arrays übergeben werden. Dabei bestimmt der Parameter „clicksToEdit“, wie viele Mausklicks notwendig sind, damit die Zelle bearbeitet werden kann.
plugins: [me.cellEditing],
Damit haben Sie die Funktion der Zellbearbeitung aktiviert und können jetzt die zuvor angelegten Spalten dahingehend konfigurieren. Dazu ist es nötig, dass Sie dem Spalten-Objekt einen Editor mit Ihrer gewünschten Konfiguration übergeben.
editor: {
xtype: 'textfield',
completeOnEnter: true,
},
Mit diesem Code erstellen Sie einen Editor innerhalb der Spalte, der es Ihnen erlaubt, Zellen mit einem einfachen Textfeld zu editieren. Der Parameter „xtype“ ist notwendig und bestimmt, welche Art von Editor Sie initialisieren. So erzeugt „xtype: numberfield“ beispielsweise ein einfaches Nummernfeld.
Der weitere Parameter ist optional und dient nur zur Demonstration der Erweiterbarkeit des Editors. „completeOnEnter“ ermöglicht beispielweise, dass das Editieren mit der Enter-Taste bestätigt und beendet wird. Weitere Konfigurationsmöglichkeiten finden Sie in der offizielle Dokumentation des „CellEditing“-Plugins.
In diesem Abschnitt wird Ihnen erläutert, wie Sie das nützliche Plugin „DragDrop“ in Ihrem Shopware Grid-Panel initialisieren können. Es erlaubt Ihnen, wie der Name schon sagt, Zeilen innerhalb Ihres Grids zu verschieben, um somit Daten beispielsweise neu zu organisieren. Wie bereits beim „CellEditing“-Plugin müssen Sie auch hier im ersten Schritt eine Instanz des Plugins erzeugen:
me.ddGridPlugin = Ext.create('Ext.grid.plugin.DragDrop');
Natürlich können Sie dem Plugin auch wieder Parameter zur Konfiguration übergeben, um es so an Ihre Bedürfnisse anzupassen. Mehr zu den Konfigurationsmöglichkeiten finden Sie in der offiziellen ExtJS Dokumentation. Um das soeben instanziierte Plugin dem Grid zuzuweisen, müssen Sie es dem Parameter „viewConfig“ übergeben, der die View des Grid-Panels konfiguriert und damit das UI um die Drag & Drop Funktionalität erweitert.
viewConfig: {
plugins: [me.ddGridPlugin],
},
Unser Grid-Panel hat nun bereits einige Funktionen. Es fehlt jedoch nach wie vor eine der wichtigsten Operationen: das Löschen von Daten. Hier gibt es je nach Anwendungsfall unterschiedliche Ansätze und Lösungswege. Im Folgenden wird eine Möglichkeit zum Löschen per „Aktions“-Spalte kurz angerissen.
Sie können Ihrem Grid-Panel eine weitere Spalte hinzufügen, die es ermöglicht, gewisse Actions anzulegen und mit Events zu versehen. Im folgenden Code-Beispiel wird die Spalte angelegt und das typische Shopware-Symbol zum Löschen eines Eintrags angezeigt (s. Abbildung).
{
xtype: 'actioncolumn',
items: [{
iconCls: 'sprite-minus-circle-frame',
action: 'delete-xyz',
tooltip: 'Löschen',
scope: me,
handler: me.myDeleteFunction
}]
}
Nun müssen Sie nur noch die Funktion implementieren, die den jeweiligen Eintrag aus dem Store und somit auch aus dem Shopware Grid entfernt. Das Gerüst dieser Funktion sieht wie folgt aus:
myDeleteFunction: function (grid, rowIndex, colIndex, item, eOpts, record) {
//Hier Logik implementieren
},
Zum Schluss fehlt nur noch der mehrfach angesprochene Store, um das einfache ExtJS Grid-Panel inklusive aller wichtigen Grundfunktionen zu vervollständigen. Wie der Name „Store“ bereits impliziert, wird dieser benötigt, um die Daten, die innerhalb des Grids angezeigt werden sollen, zu speichern. Dabei fungiert der Store innerhalb von ExtJS wie eine Art Cache für alle Objekte eines bestimmten Data-Models. Somit muss beim Einfügen in das Grid jeweils ein Objekt des zugehörigen Data-Models in den Store geschrieben werden. Im folgenden Code-Beispiel sehen Sie, wie ein grundlegender Data-Store aussehen kann.
me.gridStore = Ext.create('Ext.data.Store', {
fields: ['spalte1', 'spalte2'],
});
Die einzelnen Felder innerhalb von „fields“ beziehen sich in diesem Code-Snippet auf die einzelnen Felder aus dem zugehörigen Data-Model. Dementsprechend müssen diese äquivalent benannt sein, damit die Interoperabilität von Store und Data-Model ermöglicht wird.
An dieser Stelle greifen wir noch einmal das Thema der Spaltenkonfiguration auf. Grund dafür ist der Parameter „dataIndex“, der jetzt näher erläutert werden kann bzw. der einen konkreten Bezug innerhalb des gesamten Codes erhält. Daher sind die Feldnamen innerhalb dieses Beispiel-Stores auch bewusst so gewählt. Wie bereits angesprochen, handelt es sich beim „dataIndex“ um den gemappten Schlüssel bzw. das gemappte Feld innerhalb des Stores (wobei der Store dieses Feld wiederum auf das jeweilige Data-Model bezieht). Eine Spalte mit „dataIndex = spalte1“ wird also jeweils immer die gespeicherten Informationen innerhalb des Feldes „spalte1“ aus dem Store anzeigen. So verknüpfen Sie die einzelnen Spalten mit dem Store, sodass alle Objekte innerhalb des Stores beim Initialisieren des Grid-Panels automatisch geladen und angezeigt werden.
Daraus folgt, dass alle CRUD-Operationen (Create, Read, Update und Delete) jeweils immer den Store in einer bestimmten Art und Weise aktualisieren müssen. Wird also beispielsweise ein neuer Eintrag zum Grid hinzugefügt, muss ein Objekt des Models mit den jeweiligen Informationen erstellt und anschließend dem Store hinzugefügt werden.
Anhand unserer Schritt-für-Schritt-Anleitung können Sie jetzt selbst Ihr Shopware 5 Backend übersichtlich gestalten, indem Sie per Plugin ein eigenes Shopware Grid-Panel einrichten und anpassen.
Sie benötigen Support für Ihren bestehenden E-Commerce Shop oder planen einen Relaunch? Sprechen Sie uns an. Unsere zertifizierten Shopware-Entwickler unterstützen Sie bei Ihren Vorhaben!
BGH Urteil: Einwilligung in die Speicherung von Cookies Die Internetbranche lebt von einer „gewissen Dynamik“, somit haben Unternehmen aktuell nicht nur dafür zu sorgen, dass die Warenwirtschafts- und/oder Shopsysteme ab kommenden Juli die richtigen Mehrwertsteuersätze berechnen, sondern mit dem BGH Cookie-Urteil I ZR 7/16 (Einwilligung in die Speicherung von Cookies) vom 28. Mai 2020, kommt […]
Weiterlesen
Die Absprungrate ist ein viel diskutiertes Thema, gilt sie nicht nur als eine schmerzliche Verlustquote möglicher treuer neuer Leser sondern mittlerweile unlängst auch als nicht zu vernachlässigender Rankingfaktor im Rahmen der Suchmaschinenoptimierung.
Weiterlesen
Sie möchten einen Onlineshop erstellen lassen und wollen sich vorab zu Shopware Alternativen informieren? Aus Erfahrung wissen wir, dass die Frage nach dem passenden Shopsystem nicht unbedingt die einfachste ist, jedoch eine sehr wichtige, wenn Sie mit dem Verkauf von Produkten in Ihrem Unternehmen beginnen wollen. Wir als zertifizierte Shopware Agentur, Partner und Entwickler von […]
Weiterlesen
