Can't get external data into ExtJS (Sencha Touch) chart

Question

EDIT: ANSWERED Worked it out. Posting to Stack Overflow actually pointed me to the answer!

Basically it appears there's something funny about Ext.data.JsonStore with Sencha Touch. Maybe some of the defaults aren't exactly as expected. Renamed the file to test.json (not sure if that was neccessary)

Following code from How to parse this format of xml data? worked,

Ext.regModel('tester', {
         idProperty: 'name',
         fields: ['name', 'data1', 'data2', 'data3']
     });
      var store = new Ext.data.Store({
         model: 'tester',
         autoLoad: true,
         proxy: {
             type: 'ajax',
             method: 'GET',
             url: 'test.json',
             reader: {
                 type: 'json',
                 root: 'test'
             }
         },
         listeners: {
             load: function(obj, records){
                 Ext.each(records, function(rec){
                     console.log(rec.get('name'));
                 });
             }
         }
     }); 

---

ORIGINAL QUESTION

I'm sure there's some major thing i'm not doing right but i'm having trouble getting data into a chart from a JSON source.

This is my store code below which isn't working.

    window.store1 = new Ext.data.JsonStore({
         autoload: true,
         url: 'test.php',
      root: 'test',
         idProperty: 'name',     
         fields: ['name', 'data1', 'data2', 'data3']
     });

where

test.php =

{ "test" : {
        "data": [
          { "name": "Mon", "data1":47.5, "data2":20,    "data3":10},
                { "name": "Tue", "data1":30, "data2":30, "data3":30},
                { "name": "Wed", "data1":31.1, "data2":40, "data3":20},
                { "name": "Thu", "data1":21.1, "data2":20, "data3":30},
                { "name": "Fri", "data1":20.7, "data2":20, "data3":10},
                { "name": "Sat", "data1":22.4, "data2":30, "data3":30},
                { "name": "Sun", "data1":28.3, "data2":40, "data3":20}


        ]
    }
    }

If I hand code the data in like below the chart series is drawn correctly.

 window.store1 = new Ext.data.JsonStore({

            fields: ['name', 'data1', 'data2', 'data3'],
            data: [
            { "name": "Mon", "data1":47.5, "data2":20, "data3":10},
            { "name": "Tue", "data1":30, "data2":30, "data3":30},
            { "name": "Wed", "data1":31.1, "data2":40, "data3":20},
            { "name": "Thu", "data1":21.1, "data2":20, "data3":30},
            { "name": "Fri", "data1":20.7, "data2":20, "data3":10},
            { "name": "Sat", "data1":22.4, "data2":30, "data3":30},
            { "name": "Sun", "data1":28.3, "data2":40, "data3":20}
            ]
        });

The charting demos (new Sencha Touch Charts) generate a data array with examples like this and I can't find a example for populating via a simple JSON source.

window.generateData = function(n, floor) {
            var data = [],
                p = (Math.random() * 11) + 1,
                i;

            floor = (!floor && floor !== 0) ? 20 : floor;

            for (i = 0; i < (n || 12); i++) {
                data.push({
                    name: Date.monthNames[i % 12],
                    2008: Math.floor(Math.max((Math.random() * 100), floor)),
                    2009: Math.floor(Math.max((Math.random() * 100), floor)),
                    2010: Math.floor(Math.max((Math.random() * 100), floor)),
                    data1: Math.floor(Math.max((Math.random() * 100), floor)),
                    data2: Math.floor(Math.max((Math.random() * 100), floor)),
                    data3: Math.floor(Math.max((Math.random() * 100), floor)),
                    data4: Math.floor(Math.max((Math.random() * 100), floor)),
                    data5: Math.floor(Math.max((Math.random() * 100), floor)),
                    data6: Math.floor(Math.max((Math.random() * 100), floor)),
                    data7: Math.floor(Math.max((Math.random() * 100), floor)),
                    data8: Math.floor(Math.max((Math.random() * 100), floor)),
                    data9: Math.floor(Math.max((Math.random() * 100), floor)),
                    time: Math.floor(Math.max((Math.random() * 100), floor)),
                    registrations: Math.floor(Math.max((Math.random() * 100), floor)),
                    hours: Math.floor(Math.max((Math.random() * 100), floor)),
                    iphone: Math.floor(Math.max((Math.random() * 100), floor)),
                    android: Math.floor(Math.max((Math.random() * 100), floor)),
                    ipad: Math.floor(Math.max((Math.random() * 1000), floor))
                });
            }
            return data;
        };

 window.store2 = new Ext.data.JsonStore({
            fields: ['name', '2008', '2009', '2010', 'data4', 'data5', 'data6', 'data7', 'data8', 'data9'],
            data: generateData(6, 20)
        });

I'd really appreciate if someone could point me in the right direction as to why the series data isn't loading.

Answer 1

window.generateData = function() {
        var data = [{name:"January", iphone:43, android:70, blackberry:20}, {name:"February", iphone:23, android:10,  blackberry:20}, {name:"March", iphone:64, android:47, ipad:66,  blackberry:20}, {name:"April", iphone:12, android:29, ipad:67,  blackberry:20}, {name:"May", iphone:62, android:97, ipad:94,  blackberry:20}];
        return data;        
        };

Answer 2

Use a Model, configure proxy with reader properly. I believe your root must be test.data

Answer 3

I assume you have the right path to test.php and you're not trying to open it from a different site. Is your JSON valid? Can you check (with something like FireBug's ) that test.php is loaded ok?

I would enclose numeric values in quotes (") too just to be on the safe side.