Vielen Dank für Ihre Anfrage!
Kontakt /
Offene Fragen?
schließen
05251 / 69 410 - 00
  • Kostenlose Erstberatung anfordern
  • Unverbindliches Angebot einholen
  • Ihr Wegbereiter für Umsatzwachstum
  • Nachhaltig mehr Bekanntheit erzielen
  • Rentabel und messbar zum Web-Erfolg

* bei diesen Eingaben handelt es sich um Pflichtfelder

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Poste den ersten Kommentar

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.

Beispiel für ein Grid Panel in Shopware

1. Grundlegendes Grid-Panel als Plugin erstellen

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.

2. Die Spalten im ExtJS Grid-Panel konfigurieren

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.

Eine Zelle bearbeiten

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.

Reihenfolge der Daten anpassen: Bequem per Drag & Drop

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],
},

Einträge im Grid-Panel löschen

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
 }]
}

Grid Panel: Löschen-Funktion integrieren

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
},

3. Grid-Store anlegen

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!

Können wir Ihnen helfen?Wir beantworten gerne Ihre Fragen!

* bei diesen Eingaben handelt es sich um Pflichtfelder, unsere Webseite ist durch reCAPTCHA geschützt und es gelten die Google Datenschutzbedingungen und Nutzungsbedingungen

Jetzt Online-Marketing Newsletter abonnierenZukünftig kostenlose Newsletter unserer Experten erhalten!

  • Wir teilen unser Know-how mit Ihnen
  • Kostenlose Inhalte
  • Tipps & Tricks zu Marketing, Design & E-Commerce

Meinungen zum Artikel

Hinterlassen Sie einen Kommentar

Unsere Kunden-Referenzen Mehr als 15 Jahre Expertise in unterschiedlichen Branchen

Naturstein Risse Logo
DieboldNixdorf Logo
Uni-Paderborn Logo
Zecher Logo
StadtwerkeBielefeld Logo
Stadt Paderborn Logo
testsiegertarife Logo
H&M Logo
Krenz Autohaus und Werkstatt Logo

Wir verwenden Cookies und andere Tracking-Technologien, um Ihr Browsererlebnis auf unserer Website zu verbessern, personalisierte Inhalte und gezielte Anzeigen anzuzeigen, den Website-Traffic zu analysieren und zu verstehen, woher unser Publikum kommt. Um mehr zu erfahren oder sich abzumelden, lesen Sie bitte unsere Datenschutzerklärung.

Mit der Wahl von "Ich akzeptiere" stimmen Sie der Verwendung von Cookies und anderen Tracking-Technologien zu. Alternativ können Sie auch nur wesentliche oder funktionale Cookies akzeptieren.

Impressum