Ext JS 2.0 Grouping Grid
Es wird mal wieder Zeit, etwas über die Ext JS library zu schreiben. Dieses Framework fasziniert mich seit Version 0.3, als Jack Slocum alles noch allein programmierte.
Schon damals konnte man sein Streben nach Desktop-ähnlichen Anwendungen erkennen. Mit der aktuellen Version 2.0 ist ihm das auch wirklich sehr gut gelungen. Ich glaube, keine andere Ajax Bibliothek ist für Backends so hervorragend geeignet.
Von den zahlreichen neuen Widgets der Ext hat mir besonders das Grouping Grid gefallen. Damit lassen sich sehr übersichtliche Zusammenfassungen realisieren.
Ich habe mir für dieses Beispiel etwas mit Autos ausgedacht. Hier können wir nach Hersteller, nach Motorart und nach Baujahr gruppieren. Der fiktive Autohändler hat mit den Möglichkeiten des Grouping Grid eine super Übersicht über die Struktur seines Fahrzeugbestands.
Also bauen wir dem Autohändler sein ultimatives Tool.
Vorbereitungen
Wir benötigen einen lokalen Webserver (XAMPP oder ähnliches) und erstellen in dem Verzeichnis htdocs ein neues Verzeichnis grouping-grid. In dieses Verzeichnis entpacken wir das komplette Ext 2.0 Downloadpaket. Dann erzeugen wir ein HTML Grundgerüst und speichern es mit dem Namen grouping-grid.php ab. Da wir das Grid direkt in den Body rendern, bruachen wir kein zusätzliches Markup. Wir binden lediglich die benötigten Stylesheets und Scriptbibliotheken ein.
<?php
$url = "http://localhost/grouping-grid";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>A Ext JS 2.0 Grouping Grid</title>
<link rel="stylesheet" type="text/css" href="<?php echo $url; ?>/ext-2.0/resources/css/ext-all.css" />
<script type="text/javascript" src="<?php echo $url; ?>/ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<?php echo $url; ?>/ext-2.0/ext-all.js"></script>
<script type="text/javascript" src="grouping.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '<?php echo $url; ?>/ext-2.0/resources/images/default/s.gif';
</script>
<style type="text/css">
.icon-grid {
background-image:url(<?php echo $url; ?>/ext-2.0/examples/shared/icons/fam/grid.png) !important;
}
.x-panel {margin:40px}
</style>
</head>
Ich habe extra eine PHP Seite gewählt, da ich das Beispiel anschließend online stellen möchte. Damit ich nicht jeden einzelnen Pfad editieren muß, habe ich in der ersten Zeile des Dokuments die Variable $url definiert, die ich später durch meine Blog-Url ersetzten werde. Ihr könnt genauso gut eine HTML Datei benutzen und die Pfade manuell notieren.
Wichtig ist nur die richtige Reihenfolge der Scripte. Die Datei grouping.js müssen wir noch anlegen.
Die Ext.BLANK_IMAGE_URL gehört normalerweise in die Ext.onReady Funktion, da ich das Pfad-Problem umgehen möchte, habe ich sie hier im Dokumentkopf notiert. Es ist der Pfad zu einer 1×1 Pixel transparenten GIF Datei. Diese wird in unserem Grid für die automatisch erzeugten Grid-Menue-Icons benötigt.
Abschließend habe ich noch ein Stylesheet mit den Klassen icon-grid und x-panel definiert. icon-grid läd ein kleines Hintergrundbild als Icon neben der Gridüberschrift. Unser Grid wird später in einem Div mit der Klasse x-panel erzeugt. Ich habe einen Abstand von 40px angegeben. Damit ist die Seite für unser Grid fertig.
Das Javascript
Wir erzeugen eine leere Datei und speichern sie als grouping.js ab. Dann fügen wir folgenden Code ein:
Ext.onReady(function(){
alert("Ext geladen....");
});
Jetzt rufen wir im Browser die Datei grouping-grid.php auf und es sollte die Meldung “Ext geladen….” erscheinen. Falls nicht, bitte die Scriptpfade überprüfen.
Da ich online nicht extra eine Datenbank aufsetzten wollte, habe ich mich für ein Array mit Daten entschieden. Dieses Array kommt unter die Ext.onReady Funktion.
Ext.grid.kfzData = [
[1,'Volvo','S60','2002','69300','13800,- €','Diesel'],
[2,'BMW','323i','1999','74700','14780,- €','Benzin'],
[3,'BMW','316','2003','13600','18330,- €','Benzin'],
[4,'BMW','525i Touring','2005','2500','54050,- €','Benzin'],
[5,'Mercedes-Benz','E 270 CDI','2002','4520','27900,- €','Diesel'],
[6,'Renault','Laguna 2.0','1999','75000','4950,- €','Benzin'],
[7,'Renault','Modus','2004','1030','9999,- €','Benzin'],
[8,'Mercedes-Benz','C 220 CDI','2001','79100','19900,- €','Diesel'],
[9,'Mercedes-Benz','SLK 200','2002','65000','24900,- €','Benzin'],
[10,'Mercedes-Benz','ML 55','2001','105000','29900,- €','Benzin'],
[11,'Ferrari','360 Modena','2005','15000','119900,- €','Benzin']
];
Wir haben in dem Array pro Datensatz die Felder id, hersteller, modell, baujahr, kilometer, preis und motor. Um diese Daten einlesen zu können, benötigen wir den Ext-ArrayReader.
Ext.onReady(function(){
Ext.QuickTips.init();
var xg = Ext.grid;
var reader = new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'hersteller'},
{name: 'modell'},
{name: 'baujahr'},
{name: 'kilometer'},
{name: 'preis'},
{name: 'motor'}
]);
});
Wir müssen dem ArrayReader die Felder exakt in der Reihenfolge zuweisen, wie sie im Array definiert sind, da ja kein Feld id oder hersteller existiert. Kommen wir nun zu dem Grid. Das Grid selbst ist eigentlich nichts weiter als eine Konfiguration von Parametern. Wir benötigen nicht eine einzige selbstgeschriebene Funktion, um das Beispiel auszuführen. Hier der Code:
var grid = new xg.GridPanel({
store: new Ext.data.GroupingStore({
reader: reader,
data: xg.kfzData,
sortInfo:{field: 'hersteller', direction: "ASC"},
groupField:'hersteller'
}),
columns: [
{id:'id',header: "Hersteller", width: 40, sortable: true, dataIndex: 'hersteller'},
{header: "Modell", width: 40, sortable: true, dataIndex: 'modell'},
{header: "Motor", width: 20, sortable: true, dataIndex: 'motor'},
{header: "Baujahr", width: 20, sortable: true, dataIndex: 'baujahr', align: 'right'},
{header: "Kilometer", width: 20, sortable: true, dataIndex: 'kilometer', align: 'right'},
{header: "Preis", width: 20, sortable: true, dataIndex: 'preis', align: 'right'}
],
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Fahrzeuge" : "Fahrzeug"]})'
}),
frame:true,
width: 700,
height: 450,
collapsible: true,
animCollapse: false,
title: 'Mein Fahrzeugbestand',
iconCls: 'icon-grid',
renderTo: document.body
});
Einfach, oder? Wir haben den GroupingStore definiert, die Spalten unseres Grids, einen GroupingView sowie ein paar Einstellungen zum Grid. Alles andere handelt die Ext. Sämtliche Kofigurationsparameter findet ihr in der Ext API Dokumentation, welchhe dem Downloadpaket beliegt und wirklich sehr gut und ausführlich ist.
Wenn wir uns das Grid jetzt anschauen, sehen wir, das eine Menge Funktionalität drin steckt. Wir können das Grid auf- und zuklappen, die Spalten vergrößern/verkleinern. Wir können jede Spalte auf- und absteigend sortieren. Die Gruppen können auf- und eingeklappt werden. Ein Klick auf den rechten Pfeil im Spaltenkopf bringt ein Menü zum Vorschein. Dort können einzelne Spalten ein- btzw. ausgeblendet werden. Mit Show in Groups kann die Gruppierung aufgehoben bzw. erzeugt werden und mit Group this Field wird nach der gewählten Spalte gruppiert. Einfach genial.
- Kategorie: Programmierung, Tutorials
- Tags: ext, framework, grid, javascript, tutorial
- Kommentar-Feed | Trackback URL
- Gelesen: 8266 | Heute: 3
- einen Kommentar schreiben
keine Kommentare
