smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

ExtJS 4: Grid-Status speichern und wiederherstellen

28. Oktober 2013
Stephan
ExtJS 4: Grid-Status speichern und wiederherstellen

Mit dem JavaScript-Framework ExtJS lassen sich komplexe Tabellen, sogenannte Grids, sehr komfortabel und mit wenig Code erstellen. „Out of the box“ lassen sich so Grids erstellen, bei denen Benutzer z.B. individuell die Spalten ein-/ausblenden oder verschieben können.

Oftmals werden in einem solchen Grid sehr viele Daten angezeigt. Je nach Benutzer oder Aufgabe kann es aber sinnvoll sein, verschiedene Statusansichten für ein und dasselbe Grid bereitzustellen, so dass die Benutzer jederzeit die für sie gerade passende Ansicht auswählen können.

Wie ihr bei einem ExtJS-Grid den aktuellen Grid-Status speichern und wiederherstellen könnt, zeige ich euch nun in diesem Artikel.

Für diesen Artikel wurde ExtJS in der Version 4.2.1 verwendet.

Beispiel-Grid erstellen

Als erstes wollen wir uns ein einfaches Grid erstellen. In unserem Beispiel soll es sich dabei um eine Personen-Übersicht handeln.

Dazu definieren wir uns als erstes ein Model und einen dazugehörigen Store:

Ext.define('MyApp.model.Person', {
    extend: 'Ext.data.Model',
    fields: [
        'forename', 'surname', 'birthday', 'gender', 'phone', 'email', 'pid'
    ]
});

Ext.define('MyApp.store.Persons', {
    model: 'MyApp.model.Person',
    data: [] // auf die Daten verzichte ich hier mal
});

Als nächstes widmen wir uns der Erstellung des eigentlichen Grids:

function createMyGrid()
{
    myGrid = Ext.create('Ext.grid.Panel', {
        title: 'Übersicht: Personen',
        renderTo: Ext.get('myGrid'),
        store: persons,
        width: 592,
        columnLines: true,
        columns: [
            {
                id: 'colHeadPersonal',
                header: 'Persönliches',
                columns: [
                    {
                        id: 'colSurname',
                        header: 'Nachname',
                        dataIndex: 'surname',
                        sortable: true
                    }, 
                    [...]
               ]
            } // hier folgt die Defintion der anderen Spalten
        ],
        tbar: [
            {
                xtype: 'button',
                text: 'Grid-Status speichern',
                handler: function()
                {
                    // hier werden wir den Grid-Status speichern
                }
            },
            {
                xtype: 'button',
                text: 'Grid-Status wiederherstellen',
                handler: function()
                {
                    // hier werden wir den Grid-Status wiederherstellen
                }
            }
        ]
    });
}

Wir haben nun ein Grid mit den benötigten Spalten und einer Toolbar angelegt. In der Toolbar haben wir zwei Schaltflächen, wobei uns eine zum Speichern und die andere zum Wiederherstellen den Grid-Status dienen soll.

Damit unser Grid angezeigt wird, sobald die Webseite fertig geladen ist, nutzen wir die onReady-Funktion von ExtJS wie folgt:

var persons;
var myGrid;
var myGridStatus;

Ext.onReady(function()
{
    persons = Ext.create('MyApp.store.Persons');
    createMyGrid();
});

Als Resultat sollte beim Aufruf eurer Webseite nun ein Grid erscheinen, dass wie folgt aussieht:

ExtJS 4: Beispiel-Grid

Grid-Status speichern

Die Grid-Klasse von ExtJS bietet bereits eine Methode namens getState. Diese Methode gibt ein Objekt zurück, in dem für alle Spalten die durch den Benutzer durchgeführten Änderungen gespeichert sind.

Insofern müssen wir unseren Code nur um eine Zeile ergänzen, so dass wie den Grid-Status speichern können:

{
    xtype: 'button',
    text: 'Grid-Status speichern',
    handler: function()
    {
        myGridStatus = myGrid.getStatus();
    }
}

Grid-Status wiederherstellen

Wie ihr euch vielleicht denken könnt, gibt es analog zu getState auch eine Methode zum Setzen bzw. Wiederherstellen des Status. Im konkreten Fall ist das die applyState-Methode der Grid-Klasse.

Da die getState-Methode allerdings immer nur ein Objekt mit den getätigten Änderungen der Spalten zurückliefert, reicht uns die applyState-Methode allein nicht aus.

Unser Code zum Wiederherstellen eines Status sieht deshalb wie folgt aus:

{
    xtype: 'button',
    text: 'Grid-Status wiederherstellen',
    handler: function()
    {
        myGrid.reconfigure(persons, myGrid.initialConfig.columns);
        myGrid.applyState(Object.create(myGridStatus));
        myGrid.getView().refresh();
    }
}

Mit der reconfigure-Methode wird das Grid mit den initalen Einstellungen neu konfiguriert. Das bedeutet, dass alle Grid-Änderunegn verworfen werden und das Grid wieder so aussieht, wie am Anfang als die Webseite aufgerufen und geladen wurde.

Anschließend rufen wir die applyState-Methode auf und setzen nun die gespeicherten Änderungen. Dabei verwenden wir Object.create, um eine Kopie von unseren gespeicherten Status-Objekt zu erhalten.

Zuguterletzt müssen wir das Grid bzw. die entsprechende View noch aktualisieren.

Fazit

ExtJS ermöglich es relativ leicht, den Status eines Grids zu speichern und wiederherstellen.

Bei Webapplikationen mit vielen Daten und komplexen Grids könnt ihr euren Benutzern so die Möglichkeit geben, mehrere individuelle Grid-Ansichten zu speichern.

Je nach dem, was eure Benutzer dann von den Daten eigentlich sehen möchten, können sie zwischen den verschiedenen Ansichten wechseln, in dem der jeweils ausgewählte Status einfach wiederhergestellt wird.

Kommentare  
3 Kommentare vorhanden
1 sebi schrieb am 28. Oktober 2013 um 17:31 Uhr

Toller Bericht und super Erklärungen. Danke dafür

2 Christopher schrieb am 28. Oktober 2013 um 22:45 Uhr

Super Sache das ganze. Wird glatt mal abgespeichert und im Hinterkopf behalten. Das kann ich bestimmt in Zukunft mal gebrauchen. Danke dafür!

3 Michael schrieb am 24. März 2014 um 20:30 Uhr

Danke super Anleitung, konnte es sofort umsetzen.

0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!