Das Datengrid ist mit einem sogenannten Store verbunden, den man als Mini-Datenbank begreifen kann, die im Browser des Users läuft. Einen Store kann man sortieren, darin suchen und Daten verändern. Diese veränderten Daten werden dann bei Bedarf an die Datenquelle zurück gesendet und diese damit aktualisiert.
In folgendem Beispiel geht es jedoch erst einmal darum, die Daten einer serverseitigen Datenbank Stück für Stück in den Store zu laden. Es geht also um das Blättern in Datenbeständen, respektive um das Paging von Daten. Das Abrufen der Daten erledigt dabei ein kleines PHP-Skript, das die Parameter start und limit empfängt und eine entsprechende SQL-Anweisung daraus formt. Im Falle einer MySQL-Datenbank sieht das so aus:
SELECT Spalte1, Spalte2 FROM TABELLE {start}, {limit}
Hier wird eine Datenbank abgefragt, die IP-Adressräume für bestimmte Städte zurück gibt. Inhaltlich sind diese Daten bitte nicht zu bewerten. Die Datenbank ist viele Jahre alt, unvollständig und mit Sicherheit auch nicht mehr gültig. Zur Demonstration genügt das jedoch. Die Rückgabe der Daten erfolgt im JSON-Format und das sieht so aus:
- Code: Alles auswählen
{ "total":"137513"
,"row":[
{
"ip_von":"3e995898"
,"ip_bis":"3e99589f"
,"stadt":"Eggenstein-leopoldshafen"
,"land":"DE"}
,{
"ip_von":"3e9958e8"
,"ip_bis":"3e9958ef"
,"stadt":"Eggenstein-leopoldshafen"
,"land":"DE"}
]
}
Das zurückgegebene Objekt enthält zunächst die Eigenschaft total , die - wie bereits zu vermuten ist - die Anzahl der verfügbaren Datensätze angibt. Der eigentlichen Abfrage der Daten ging also ein SELECT count(*) voraus . Die nächste Eigenschaft enthält ein Array mit den Daten-Objekten. Es fällt außerdem auf, dass die IP-Adressen nicht wie IP-Adressen aussehen.
Zuerst definiere ich also einen Store um diese Daten unterzubringen
- Code: Alles auswählen
var store= new Ext.data.Store({
url:'remote_paging.php' //PHP-Skript, das JSON liefert
,totaProperty:'total' //Die Eigenschaft total der JSON-Daten
,reader: new Ext.data.JsonReader({
root:'row' //Die Eigenschaft row der JSON-Daten
,fields: [
{name: 'ipVon', mapping: 'ip_von'}
,{name: 'ipBis', mapping: 'ip_bis'}
,{name: 'Stadt', mapping: 'stadt'}
,{name: 'Land', mapping: 'Land'}
]
})
});
Es folgt das Column-Modell für das Datengrid, damit das Datengrid auch "weiß" wie die Daten aus dem Store abzurufen sind und welche Spalten dargestellt werden sollen
- Code: Alles auswählen
var columns = [
{
header:'IP von'
,id:'ipVon'
,dataIndex:'ipVon'
,renderer:function(val){
return decodeIP(val);
}
},
{
header:'IP Bis'
,dataIndex:'ipBis'
,renderer:function(val){
return decodeIP(val);
}
},
{
header:'Stadt'
,dataIndex:'Stadt'
}];
Die Funktion zum Decodieren der IP-Adressen ist »hier beschrieben
Die Definition des Datengrids
- Code: Alles auswählen
var grid = new Ext.grid.GridPanel({
id:'ipGrid'
,store:store
,width:500
,height:485
,loadMask:true
,stripeRows:true
,columns:columns
,autoExpandColumn:'ipVon'
,viewConfig : {
forceFit: true
,deferEmptyText:false
,scrollOffset:2
}
,bbar: new Ext.PagingToolbar({
pageSize:20
,store:store
,displayInfo:true
,displayMsg:'Datensatz {0} - {1} / {2}'
,emptyMsg:'Keine Datensätze gefunden'
})
})
Nun kann man den Store laden. Initial werden die Parameter start und limit vorbelegt
- Code: Alles auswählen
store.load({
params:{
start:0,limit:20
}
});
