I'm having trouble getting actual data to show up in a Sencha Touch 2 list. The list should be populated by a JSONP response, and I expect 2 rows to show up. Instead, I get one row with 'null at null'.

Here's the URL that gets sent:

http://some-server/data-fetcher.php?_dc=1331910031292&events=true&page=1&start=0
  &limit=25&callback=Ext.data.JsonP.callback1

Here's the JSONP response:

Ext.data.JsonP.callback1({"data":[{"id":"4","name":"Sample Name 1",
  "description":null,"location":"Sample Location 1",
  "start_time":"2012-03-22 00:00:00","end_time":null},{"id":"5",
  "name":"Sample Name 2","description":null,"location":"Sample Location 2",
  "start_time":"2012-03-31 00:00:00","end_time":null}],"num_rows":2});

Here's my model:

Ext.define('MyApp.model.Event', {
    extend: 'Ext.data.Model',
    config : {
        idProperty: 'id',
        fields : [ {
            name : "id",
            type : "int"
        }, {
            name : "name",
            type : "string"
        }, {
            name : "description",
            type : "string"
        }, {
            name : "location",
            type : "string"
        }, {
            name : "start_time",
            type : "date"
        }, {
            name : "end_time",
            type : "date"
        } ]
    }
});

Here's my store:

Ext.define('MyApp.store.EventsOnline', {
    extend  : 'Ext.data.Store',
    requires: ['MyApp.model.Event'],
    config  : {
        model : 'MyApp.model.Event',
        autoLoad : true,
        proxy : {
            type : 'jsonp',
            url : 'http://some-server/data-fetcher.php',
            reader : {
                type : 'json',
                root : 'data',
                totalCount : 'num_rows'
            },
            callbackKey : 'callback',
            extraParams : {
                'events' : true
            }
        }
    }
});

Here's my view:

Ext.define('MyApp.view.Event', {
    extend: 'Ext.Container',
    config : {
        layout : {
            type : 'vbox',
            align : 'stretch'
        },
        fullscreen : true,
        flex : 1,
        items : [
            {
                xtype : 'toolbar',
                docked : 'top',
                title : 'Events'
            }, {
                xtype   : 'list',
                flex    : 1,
                store : 'EventsOnline',
                itemTpl : '{name} at {location}'
            }
        ]
    }
});

What I expect to see in my list is:

Sample Name 1 at Sample Location 1
Sample Name 2 at Sample Location 2

And instead all I see is:

null at null

What am I doing wrong?

Edit: if it matters, here are my app and controller:

Ext.Loader.setConfig({enabled : true});

Ext.application({
    name               : 'MyApp',
    appFolder          : 'app',
    controllers : ['Home'],
    launch : function() {
        window[this.getName()].app = this;
    }
});

Ext.define('MyApp.controller.Home', {
    extend: 'Ext.app.Controller',
    models: ['Event'],
    stores: ['EventsOnline'],
    views: ['Event'],
    init: function () {
        var me = this;
        Ext.Viewport.add(Ext.create('MyApp.view.Event'));
    }
});

I'm having trouble getting actual data to show up in a Sencha Touch 2 list. The list should be populated by a JSONP response, and I expect 2 rows to show up. Instead, I get one row with 'null at null'.

Here's the URL that gets sent:

http://some-server/data-fetcher.php?_dc=1331910031292&events=true&page=1&start=0
  &limit=25&callback=Ext.data.JsonP.callback1

Here's the JSONP response:

Ext.data.JsonP.callback1({"data":[{"id":"4","name":"Sample Name 1",
  "description":null,"location":"Sample Location 1",
  "start_time":"2012-03-22 00:00:00","end_time":null},{"id":"5",
  "name":"Sample Name 2","description":null,"location":"Sample Location 2",
  "start_time":"2012-03-31 00:00:00","end_time":null}],"num_rows":2});

Here's my model:

Ext.define('MyApp.model.Event', {
    extend: 'Ext.data.Model',
    config : {
        idProperty: 'id',
        fields : [ {
            name : "id",
            type : "int"
        }, {
            name : "name",
            type : "string"
        }, {
            name : "description",
            type : "string"
        }, {
            name : "location",
            type : "string"
        }, {
            name : "start_time",
            type : "date"
        }, {
            name : "end_time",
            type : "date"
        } ]
    }
});

Here's my store:

Ext.define('MyApp.store.EventsOnline', {
    extend  : 'Ext.data.Store',
    requires: ['MyApp.model.Event'],
    config  : {
        model : 'MyApp.model.Event',
        autoLoad : true,
        proxy : {
            type : 'jsonp',
            url : 'http://some-server/data-fetcher.php',
            reader : {
                type : 'json',
                root : 'data',
                totalCount : 'num_rows'
            },
            callbackKey : 'callback',
            extraParams : {
                'events' : true
            }
        }
    }
});

Here's my view:

Ext.define('MyApp.view.Event', {
    extend: 'Ext.Container',
    config : {
        layout : {
            type : 'vbox',
            align : 'stretch'
        },
        fullscreen : true,
        flex : 1,
        items : [
            {
                xtype : 'toolbar',
                docked : 'top',
                title : 'Events'
            }, {
                xtype   : 'list',
                flex    : 1,
                store : 'EventsOnline',
                itemTpl : '{name} at {location}'
            }
        ]
    }
});

What I expect to see in my list is:

Sample Name 1 at Sample Location 1
Sample Name 2 at Sample Location 2

And instead all I see is:

null at null

What am I doing wrong?

Edit: if it matters, here are my app and controller:

Ext.Loader.setConfig({enabled : true});

Ext.application({
    name               : 'MyApp',
    appFolder          : 'app',
    controllers : ['Home'],
    launch : function() {
        window[this.getName()].app = this;
    }
});

Ext.define('MyApp.controller.Home', {
    extend: 'Ext.app.Controller',
    models: ['Event'],
    stores: ['EventsOnline'],
    views: ['Event'],
    init: function () {
        var me = this;
        Ext.Viewport.add(Ext.create('MyApp.view.Event'));
    }
});

• javascript
• model
• sencha-touch
• jsonp
• sencha-touch-2

Share Improve this question Follow edited Mar 16, 2012 at 15:12 Sarah Vessels asked Mar 16, 2012 at 15:07 Sarah VesselsSarah Vessels 31.7k3333 gold badges159159 silver badges224224 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

root : 'data',
totalCount : 'num_rows'

Is deprecated. Use:

rootProperty: 'data',
totalProperty: 'num_rows'

Make sure you included Sencha Touch from sencha-touch-all-pat.js for development. It'll report in the browser console all deprecated things that you use.

I was also struggling to display my list and searching lot on this.

Finally got my answer after changing this in my view:

extend: 'Ext.Container',

to

extend:'Ext.navigation.View',

I got the above clue from the example link below!

Sencha Touch 2: data intigration or how to share dynamic information between sencha and javascript

It now working, happy to see my first MVC example working :)

Hope it help someone.