Für ein aktuelles Mobile-Projekt evaluierten wir Mobile-Entwicklungs-Tools und entsprechende Charting Libraries. Dabei sind wir auch auf Sencha Touch gestoßen. Für einen Prototyp wollten wir JSON-Daten in einem Chart darstellen und hatten einige Hürden zu überwinden, bis wir in der Lage waren, diese JSON-Daten mit Sencha zu lesen. Da ich kein direkt lauffähiges Beispiel dazu im Netz gefunden habe, soll der Blogbeitrag dieses jetzt allen anderen bieten, die auch mit den Ext.Data.JsonStore Daten lesen möchten.

Das Original-Beispiel

Ist man ganz naiv und denkt, man schaut sich einfach das Beispiel der Sencha Touch Dokumentation an, bringt es in den eigenen Kontext und kann dieses direkt ausführen, fällt man erst einmal auf die Nase und bekommt bei der Ausführung den folgenden Fehler:

Ext.data.JsonReader.getResponseData: Unable to parse JSON returned by Server.

Der JavaScript-Code, der den Store aufbauen sollte:

var store1 = new Ext.data.JsonStore({
    // store configs
    autoDestroy: true,
    storeId: 'myStore',

    proxy: {
        type: 'ajax',
        url: 'jsonTest.json',
        reader: {
            type: 'json',
            root: 'images',
            idProperty: 'name'
        }
    },

    //alternatively, a Ext.data.Model name can be given
    fields : ['name', "url", {
				name : 'size',
				type : 'float'
			}, {
				name : 'lastmod',
				type : 'date'
    }]
});

		store1.load();

Die JSON-Datei, die geladen werden sollte:

{
    images: [
        {name: 'Image one', url:'/GetImage.php?id=1', size:46.5,
            lastmod: new Date(2007, 10, 29)},
        {name: 'Image Two', url:'/GetImage.php?id=2', size:43.2,
            lastmod: new Date(2007, 10, 30)}
    ]
}

Nach ein wenig Googeln ließ sich ermitteln, dass man sich strikt an den JSON-Syntax halten muss: Die Attributnamen, die Attribute bei Strings und die Wurzel des dictionary müssen folglich in Hochkommata gesetzt werden. Da ich kein PHP-Skript ausführen möchte, sondern nur eine JSON-Datei laden möchte, muss ich auch das Datum als String darstellen.

Das laufende Beispiel

Die neue JSON-Datei sieht also wie folgt aus:

{
    "images": [
        {"name": "Image one", "url":"/GetImage.php?id=1", "size":46.5,
            "lastmod": "2007-10-29"},
        {"name": "Image Two", "url":"/GetImage.php?id=2", "size":43.2,
           "lastmod": "2007-10-30"}
    ]
}

Im JavaScript-Code muss lediglich angegeben werden, in welchem Format das Datum interpretiert werden soll.

  fields: ['name', "url",  {name:'size', type: 'float'},
    {name:'lastmod', type:'date', dateFormat:'Y-m-d'}]

Und schon läuft der Code.

Das Problem mit dem Proxy

Ein zweiter Fehler, auf den wir häufig bei unseren ersten Gehversuchen gestoßen sind, war auf einen nicht konfigurierten Proxy zurückzuführen:

Error: You are using a ServerProxy but have not supplied it with a url.

Man findet im Netz auch Codeschnipsel wie den folgenden falschen, der den oben genannten Fehler provoziert:

window.store1 = new Ext.data.JsonStore({
  // store configs
  autoDestroy : true,
  storeId : 'myStore',
  url : 'jsonTest.json',
  root : 'images',
  //alternatively, a Ext.data.Model name can be given
  fields : ['name', "url", {
    name : 'size',
    type : 'float'
    }, {
	name : 'lastmod',
	type : 'date',
	dateFormat : 'Y-m-d'
  }]
});

Ergo ist es wichtig, einen entsprechenden Proxy zu definieren.

Zusammenfassung und Beispielcode

Um mit Sencha Touch JSON-Dateien zu laden, ist streng die JSON-Syntax einzuhalten und gegebenenfalls muss ein Proxy definiert werden. Ein lauffähiges Beispiel, bestehend aus den Dateien jsonTest.html, jsonTest.js und jsonTest.json, kann hier heruntergeladen werden. Um das Beispiel auszuführen, benötigt man natürlich zusätzlich Sencha Touch.