Sencha Touch 2 - How can I recall a detail from a JsonP with a callback

Question

I have made an application that fetches news from an external site.

I use a list that recalls items from a JsonP, with this store:

Ext.define('Grottaglie.store.Articoli', {
extend: 'Ext.data.Store',

requires: [
    'Grottaglie.model.Articolo'
],

config: {
    autoLoad: true,
    model: 'Grottaglie.model.Articolo',
    storeId: 'articoliStore',
    proxy: {
        type: 'jsonp',
        url: 'http://www.grottaglie24.it/rss/lastarticle.php?callback=callback1',
        callbackKey: 'callback1',
        reader: {
            type: 'json',
           idProperty: 'id'
        }
    }
}

});

This JsonP has an id that I want to use to bring up the detail through another JsonP which contains only the details of each item in the list:

The view code:

Ext.define('Grottaglie.view.Main', {
extend: 'Ext.navigation.View',

config: {
    id: 'mainView',
    items: [
        {
            xtype: 'list',
            title: 'Grottaglie24',
            itemId: 'articoli',
            store: 'articoliStore',
            itemTpl: '{id} {text}',

            listeners: {
                select: function(view, record) {

                    Ext.getCmp('mainView').push({
                        title: 'Politica',
                        xtype: 'panel',
                        store: Ext.create('Ext.data.Store', {
                            fields: ['title'],
                                proxy: {
                                type: 'jsonp',
                                url: 'http://www.grottaglie24.it/rss/article.php?callback=callback' + record.get('id'),
                                callbackKey: 'callback' + record.get('id'),
                                reader: {
                                    type: 'json',
                                }
                                },
                                autoLoad: true
                            }),
                        html: '{title}'
                    });
                }
            }
         }
        ]
     }
  });

So I call "articoliStore" to the main list, and as you can see in the "listeners" I create a new store that refers to a jsonp just to detail, in this case only the title of the news. For example this url: http://www.grottaglie24.it/rss/article.php?callback=callback621

I am successful to recall the id with the callback, but when I tap on the item of the list do not show anything. For example if I tap on the item with "id"= 698 I get the following error: TypeError: 'undefined' is not a function (evaluating 'Ext.data.JsonP.callback698({"title": "Here the title of the news......"})')

Why it recognizes the "id" and invokes the callback but I do not show anything?

Thank you very much.

Answer 1

Remove autoLoad:true and load it only when it is required.

You can refer to your callback function in the load method.

var articoliStore = Ext.getStore('articoliStore');
articoliStore .load({
    callback:function(){
        articoliStore.each(function(record) {                           
            console.log(JSON.stringify(record));    
            });
    }
});

Answer 2

I believe the issue is that you are adding the ID to your callbackKey like this:

callbackKey: 'callback' + record.get('id')

Where instead you should simply define your callbackKey as "callback"

The server will always look for the callback querystring, however, Sencha Touch increments the function callbackX on its own. For instance, your first callback function would be:

Ext.data.JsonP.callback1

And your second:

Ext.data.JsonP.callback2

I am guessing your are getting the undefined is not a function error because Ext.data.JsonP.callback698 is not a function. Try changing your callback key to just "callback" and let us know what happens.