dynamicinternet Wir machen Ihr Web dynamisch!

Paging Grid mit der Ext Library

geschrieben von Micha am 05. April 2007 | 14 Kommentare

In diesem Tutorial wollen wir euch zeigen, wie man ein Paged Grid mit Jack Slocum’s Ext Ajax Library und PHP auf der Serverseite programmiert.

Voraussetzungen: Kenntnisse in HTML, CSS, Javascript, MySQL und PHP

Vorbereitungen

Wir benötigen für dieses Tutorial einen lokalen Webserver (XAMPP oder WAMP) mit PHP 5.2 und natürlich die Ext Library, welche ihr hier downloaden könnt.

Als nächstes brauchen wir ein paar Datensätze. Dazu besuchen wir die Webseite http://www.benjaminkeen.com/software/data_generator/. Ihr klickt bei Result type SQL an, bei Country specific data US bei Number of results geben wir 200 ein. Bei SQL Options inlude CREATE TABLE query anklicken, Database table name friends eingeben und Database MYSQL auswählen. Die Optionen der Datensätze so einstellen wie im Bild unten zu sehen. Dann klick Generate! Wir markieren alles, kopieren es und öffnen einen Texteditor, fügen das Markierte ein. Danach speichern wir die Datei als friends.sql ab.

Wir starten nun unseren lokalen Webserver und öffnen den phpmyadmin und legen eine neue Datenbank friends an. Dann klicken wir den Importieren-Tab an und suchen unsere friends.sql und klicken ok. Danach sollten wir eine Tabelle friends mit 200 Datensätzen haben.

Wir erstellen uns nun ein Verzeichnis “ext-tutorial” auf unserem lokalen Webserver. In dieses Verzeichnis entpackt ihr das heruntergeladene Ext Zipfile. Jetzt habt ihr einen Ordner “ext-1.0-beta1″, in dem alle erforderlichen Bibliotheken sind, sowie im Verzeichnis “docs” die Dokumentation und in “examples” ein paar Beispiele. Nun brauchen wir noch einen Ordner “pagedgrid” unterhalb von “ext-tutorial” für die Tutorial Dateien. Jetzt kanns losgehen.

Die HTML Seite

Wir erzeugen eine leere HTML Seite und speichern sie in Verzeichnis “pagedgrid” als pagedgrid.html ab. Dann erzeugen wir eine Javascript Datei und nennen sie pagedgrid.js. Wir öffnen nun mit unserem favorisierten Editor die pagedgrid.html und fügen im head Bereich folgenden Code ein:

 

<link rel="stylesheet" type="text/css" href="../ext-1.0-beta1/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-1.0-beta1/yui-utilities.js"></script>
<script type="text/javascript" src="../ext-1.0-beta1/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../ext-1.0-beta1/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../ext-1.0-beta1/resources/css/ytheme-aero.css" />
<script type="text/javascript" src="pagedgrid.js"></script> 

Damit haben wir alle nötigen Dateien eingebunden. Das ytheme-aero.css ist nicht unbedingt erforderlich, das Grid sieht damit einfach besser aus. Ihr könnt auch mal mit ytheme-gray.css oder ytheme-vista.css probieren. Nun noch ein paar style Angaben im head Bereich anlegen:

 

<style>
	body { margin: 40px 0 0 40px; }
	h1 { margin-bottom: 20px; }
</style> 

Jetzt brauchen wir noch einen Platzhalter für das Grid und fügen ein div Element in den body ein:

<h1>My first paged Grid</h1>
<div id="tutorial-grid" style="border:1px solid #99bbe8;overflow: hidden; width: 650px; height: 350px; "></div> 

Damit sind wir mit der HTML Seite fertig und können sie nun speichern.

Die PHP Datei

Ich benutze die PHP-Version 5.2, welche die erforderlichen JSON Funktionen mitbringt. Wenn ihr kein PHP 5.2 habt, schaut euch auf der Ext Webseite das Tutorial Creating JSON Data in PHP von Shea Frederick an.

HINWEIS: Dieses Tutorial vernachlässigt jegliche Sicherheit, da wir es so einfach wie möglich halten wollen. Auf keinen Fall online betreiben.

Der PHP Code, abspeichern als pagedgrid.php

 

<?php
if (strtolower($_SERVER['REQUEST_METHOD']) === "post"){
	$db = mysql_connect("localhost", "user", "password")
	    or die("Connection Error: " . mysql_error()); 

	mysql_select_db("friends") or die("Fehler ..."); 

	// Anzahl der Datensätze ermitteln
	$result = mysql_query("SELECT COUNT(*) AS count FROM friends");
	$row = mysql_fetch_assoc($result);
	$count = $row['count']; 

	$query = "SELECT id, name, zipcode, city, country, birthday
		FROM friends"; 

	$result = mysql_query($query); 

	while ($row = mysql_fetch_assoc($result)) {
		$myFriends[] = array(
			'id' => $row['id'],
			'name' => $row['name'],
			'zipcode' => $row['zipcode'],
			'city' => $row['city'],
			'country' => $row['country'],
			'birthday' => $row['birthday']
		);
	}
	$myData = array('myFriends' => $myFriends, 'totalCount' => $count); 

	echo json_encode($myData);
}
?> 

Wir verbinden uns mit der Datenbank, ermitteln zuerst die Anzahl der Datensätze, holen uns dann unsere Datensätze und schreiben sie in ein Array, welches wir json encodieren und an das Javascript zurücksenden.

Das Javascript

Wir öffen die pagedgrid.js und fügen untenstehenden Code ein. Wenn du nun die pagedgrid.html in deinem Browser öffnest, sollte eine Alertbox erscheinen.

 

Ext.onReady(function() {
	alert("You have Ext configured correctly! We are now ready to do some Ext Grid Magic!");
}); 

Wir löschen nun die alert Zeile heraus und erzeugen an der Stelle zuerst einen Datastore :

Der Datastore

 

	//we enable QuickTips for the later Pagebar
	Ext.QuickTips.init();
	// create the Data Store
	var ds = new Ext.data.Store({
		proxy: new Ext.data.HttpProxy({url: 'pagedgrid.php'}),
		reader: new Ext.data.JsonReader({
			root: 'myFriends',
			totalProperty: 'totalCount',
			id: 'id'
		},[
			{name: 'id', mapping: 'id', type: 'int'},
			{name: 'name', mapping: 'name', type: 'string'},
			{name: 'zipcode', mapping: 'zipcode', type: 'int'},
			{name: 'city', mapping: 'city', type: 'string'},
			{name: 'country', mapping: 'country', type: 'string'},
			{name: 'birthday', mapping: 'birthday', type: 'date', dateFormat: 'Y-m-d'}
		]),
		// Our Server sorts the data
		remoteSort: true
	});
	//we set the default Sort to the ID
	ds.setDefaultSort('id', 'asc'); 

Was bedeutet dieser Code nun? Ext.QuickTips.init(); schaltet die Quicktips der pagebar ein. var ds erzeugt einen Datastore. Wie der Name schon sagt, ist er für das Einlesen der Daten zuständig. Als Proxy verwenden wir einen HttpProxy, er liest unsere pagedgrid.php ein. Da die Daten JSON encoded ankommen, brauchen wir als Reader den JsonReader. Der JsonReader erwartet mehrere Parameter: root ist die Root unseres Arrays, welches wir mit dem PHP Script erzeugt haben, totalProperty ist die Anzahl der Datensätze, die wir im Array mitgeben(‘totalCount’ => $count). In den eckigen Klammern werden für jedes Datenfeld die Parameter angegeben. Erklärt sich eigentlich von selbst. type ist wichtig für die Sortierung der Spalten, da wir zB. nicht wollen, das das Geburtsdatum als String sortiert wird. Also gibt man hier den Datentyp an, nach dem sortiert werden soll. remoteSort ist sehr wichtig. Wenn es auf false steht, würde das Grid nur die dargestellten 15 Datensätze sortieren, wir wollen aber eine Sortierung aller Datensätze und lassen das den Server erledigen, also setzen wir es auf true. Mit ds.setDefaultSort(…) bestimmen wir, das das Grid uns die Datensätze erstmal nach der id aufsteigend sortiert.

Das ColumnModel

Wir fügen nun folgenden Code hinter ds.setDefaultSort(‘id’, ‘asc’); ein:

 

	var cm = new Ext.grid.ColumnModel([
		{header: "ID", dataIndex: 'id', width: 50, sortable: true, align: 'right'},
		{header: "Name", dataIndex: 'name', width: 100, sortable: true},
		{header: "ZipCode", dataIndex: 'zipcode', width: 70, sortable: true},
		{header: "City", dataIndex: 'city', width: 100, sortable: true},
		{header: "Country", dataIndex: 'country', width: 200, sortable: true},
		{header: "Birthday", dataIndex: 'birthday', width: 70, sortable: true, renderer: Ext.util.Format.dateRenderer('m-d-Y')} 

	]);
	cm.defaultSortable = true; 

Das ColumnModel ist für die Spalten unseres Grids zuständig. Jede Zeile steht für eine Spalte. header ist die Überschrift der Spalte, dataIndex das dazugehörige Datenfeld, width bestimmt die Breite der Spalte in Pixel, sortable erklärt sich wohl selbst. Man kann auch mit align festlegen, wie sich der Inhalt einer Spalte ausrichten soll oder man kann einen renderer definieren oder selbst schreiben, zB. ‘nach mir alle Datensätze rot wo der Geburtstag vor 1960 ist’. Anschließend setzten wir defaultSortable auf true.

Das Grid

Wir fügen nun den Code für das Grid ein:

 

	var grid = new Ext.grid.Grid('tutorial-grid', {
		ds: ds,
		cm: cm,
		selModel: new Ext.grid.RowSelectionModel({singleSelect:true})
	}); 

	grid.render(); 

	var gridFoot = grid.getView().getFooterPanel(true);
	var pagebar = new Ext.PagingToolbar(gridFoot, ds, {pageSize: 15});
	ds.load({params:{start:0, limit:15}}); 

Wir erzeugen also das Grid, tutorial-grid ist das Html Element, in dem es dargestellt wird und welches wir in unserer pagedgrid.html angelegt haben. Danach geben wir den unseren DataStore und unser ColumnModel an. Das selModel ist für die Selektierung von Datenreihen verantwortlich, wir wollen, das nur jeweils eine Reihe selektiert werden kann, also {singleSelect:true}. Jetzt wird das Grid gerendert.

Nun brauchen wir noch unsere Pagebar, damit wir komfortabel durch die Datensätze blättern können. Mit grid.getView().getFooterPanel(true) holen wir uns den Platzhalter für die PageToolbar, die wir danach erzeugen. Wir müssen der PageToolbar natürlich angeben, wo sie erscheinen soll (gridFoot), wir müssen den Datastore angeben (ds) und wieviel Datensätze sie im Grid anzeigen soll (pageSize: 15). Zum Schluß laden wir den Datastore und teilen ihm mit, das er mit die Datensätze 0 bis 14 darstellen soll.

Wir speichern nun die pagedgrid.js und rufen im Browser die pagedgrid.html auf. Unser Grid sollte nun die Datensätze anzeigen. Aber das paging funktioniert noch nicht, warum?

Wenn ihr wie ich hoffe mit dem Firefox arbeitet und den Firebug installiert habt, könnt ihr euch die Postparameter anschauen:

Wir müssen also in unsere SQL Abfrage die Parameter dir – direction (gemeint ist aufsteigend oder absteigend sortiert), start – Offset, limit – Limit und sort – das datenfeld, nach dem sortiert werden soll, einbauen. Also öffnen wir noch einmal unsere pagedgrid.php und ergänzen den Code, das die Datei danach so aussieht:

 

if (strtolower($_SERVER['REQUEST_METHOD']) === "post"){
	//dont forget to validate the POST Data !!!
	$limit = intval($_POST['limit']); //the pagesize
	$start = intval($_POST['start']); //Offset
	$dir = $_POST['dir']; // DESC or ASC
	$sort = $_POST['sort'];// the column 

	$db = mysql_connect("localhost", "root", "carola")
		or die("Connection Error: " . mysql_error()); 

	mysql_select_db("someData") or die("bla bla ..."); 

	$result = mysql_query("SELECT COUNT(*) AS count FROM friends");
	$row = mysql_fetch_assoc($result);
	$count = $row['count']; 

	$query = "SELECT id, name, zipcode, city, country, birthday
				FROM friends
				ORDER BY $sort $dir
				LIMIT $start, $limit"; 

	$result = mysql_query($query); 

	while ($row = mysql_fetch_assoc($result)) {
		$myFriends[] = array(
			'id' => $row['id'],
			'name' => $row['name'],
			'zipcode' => $row['zipcode'],
			'city' => $row['city'],
			'country' => $row['country'],
			'birthday' => $row['birthday']
		);
	}
	$myData = array('myFriends' => $myFriends, 'totalCount' => $count); 

	echo json_encode($myData);
}
?> 

Nun sollte das Grid richtig funktionieren. Selbstverständlich ist das nur ein kleiner Teil dessen, was das Grid zu leisten vermag. Inline Editing ist möglich, man kann zB. in die Toolbar ein Inputfeld mit Filter integrieren, der Phantasie sind kaum Grenzen gesetzt. Jetzt machen wir die Anzeige der Toolbar noch etwas schöner. Fügt nach der var pagebar Zeile und vor der ds.load(…) Zeile den Code ein:

	var displayInfo = gridFoot.createChild({cls:'paging-info'});
			ds.on('load', function(){
				var count = ds.getCount();
				var msg = count == 0 ?
				"keine Datensätze" :
					String.format(
						'Datensätze {0} - {1} von {2}',
						pagebar.cursor+1, pagebar.cursor+count, ds.getTotalCount()
					);
				displayInfo.update(msg);
			});

und in der pagedgrid.html in den style Bereich:

.paging-info {
	position:absolute;
	top:8px;
	right: 8px;
	color:#15428b;
}

So sieht das fertige Grid aus: