Ext JS: Data Store um Spalte erweitern

Eine der komfortablesten Funktionen, die die Homepage der heco gmbh dem Kunden bietet, ist die Möglichkeit, aktuelle Bestände und Preise online einzusehen. Hier werden Daten direkt aus dem ERP- System per Webservice übertragen und im Web angezeigt.
Eine der Anforderungen, die mir in letzter Zeit gestellt wurden, bestand darin, diese Anzeige umzustrukturieren.

Bisher erfolgte die tabellarische Anzeige nach der Abmessung des Artikels. Diese sollte auf den Werkstoff geändert werden. Für die Anzeige auf der Homepage wird das Javascript  Framework Ext JS verwendet. Mittels Ext JS ist es komfortabel möglich, diverse Data Stores zu erstellen und diese per Proxy mit Daten zu füllen. Daher bestand auch mein erster Ansatz darin, den bisherigen Data Store zu einem Grouping Store umzuschreiben, der nach der Werkstoff Spalte gruppiert:

var myStore = new Ext.data.GroupingStore({
groupField: 'Material'
})

Leider genügte diese Implementierung den Anforderungen der Fachabteilung nicht, da durch diese Lösung zwar die Anzeige nach Werkstoff gebündelt wurde, dieser jedoch nur auf- oder absteigend sortiert werden konnte. Gewünscht wurde jedoch eine feste Sortierung nach Wichtigkeit des Werkstoffes.

Um dies gewährleisten zu können, musste nach einer zusätzlichen Spalte sortiert werden können, die die gewünschte Reihenfolge enthält. Diese Spalte existiert in der ursprünglichen Spaltendefintion jedoch nicht, da diese wie erwähnt per Webservice dynamisch erzeugt wird. Das Anpassen des Webservice stellte auch keine Option dar. Daher musste der Data Store zur Laufzeit erweitert werden können; eine Funktion, die Ext JS (in Version 3.4) nicht von Hause aus mitliefert.
Was es jedoch liefert, ist die Funktionalität bestehende Klassen von Hand zu erweitern, und genau dies wurde hier angewandt:


Ext.override(Ext.grid.GridPanel,{
addColumn: function(field, column, colIndex){
if(!column){
if(field.dataIndex){
column = field;
field = field.dataIndex;
}else{
column = field.name || field;
}
}
this.store.addField(field);
return this.colModel.addColumn(column, colIndex);
})

Die vollständige Implementierung dieser Funktionalität findet sich hier.

Nun war es möglich, die Bestands- und Preistabelle zur Laufzeit um diese Spalte zu erweitern und dieser je nach Werkstoff einen Sortierwert zuzuordnen. Anschließend wird die Tabelle anhand dieser Spalte sortiert, und schon sind die Anforderungen der Fachabteilung erfüllt:


myGrid.addColumn({header: 'Sorting', hidden: true, dataIndex: 'Sorting', sortable: true,  width:"0"});
Ext.each(records, function(record){
record.data.Sorting = orderArrayForStocksAndPrices[record.data.Material];
if(!record.data.Sorting){
record.data.Sorting = 10000;
}
});
myStore.sort([{field: 'Sorting',direction: 'ASC'}]);

Die Umsetzung dieser Implementierung (mit sichtbarerer Sortierspalte) findet sich in folgendem Screenshot.

Preistabelle

Der Einsatz dieser Implementierung findet sich live auf der Homepage der heco gmbh.

Verfasser: Martin Edelmann

Advertisements

Über hecogmbh

Die heco gmbh ist ein Handelshaus sowie ein Produzent für Fittings und Armaturen aus rostfreiem Edelstahl. Unsere Produkte werden im Maschinen-, Anlagen- und Fahrzeugbau sowohl in der chemischen Industrie als auch in der Nahrungsmittelindustrie eingesetzt. Mit mehreren Standorten europaweit sind wir immer in Ihrer Nähe.
Dieser Beitrag wurde unter Martin Edelmann abgelegt und mit verschlagwortet. Setze ein Lesezeichen auf den Permalink.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s