How to load XML into a list using Sencha/Phonegap?

Question

I'm trying to setup a native style app using sencha touch and phonegap. I'm trying to pull in data from an external XML feed into the model.

In my model (Event.js) I have this:

Ext.regModel('Event', {
    fields: [
        {name: 'title', type: 'string'}
    ]
});

In my store (eventsstore.js):

ToolbarDemo.eventstore = new Ext.data.Store({
    model: 'Event',
    sorters: 'title',

    getGroupString : function(record) {
        return record.get('title')[0];
    },

    proxy: {
        type: 'ajax',
        url: 'http://the-url-to-the-file.xml',
        reader: {
            type: 'xml',
            root: 'events',
            record: 'event'
        }
    },
    autoLoad: true
});

And in the view (tried as a list):

ToolbarDemo.views.Eventscard = Ext.extend(Ext.List, {
    title: "Events",
    iconCls: "search",

    store: ToolbarDemo.eventstore,

    itemTpl: '{title}',
    grouped: true,
    indexBar: true,


    cardSwitchAnimation: 'slide'

});

Ext.reg('eventscard', ToolbarDemo.views.Eventscard);

And tried as a panel:

ToolbarDemo.views.Eventscard = Ext.extend(Ext.Panel, {
    title: "Events",
    iconCls: "search",

    dockedItems: [{
        xtype: 'toolbar',
        title: 'Events'
    }],

    layout: 'fit',
    items: [{
        xtype: 'list',
        store: ToolbarDemo.eventstore,
        itemTpl: '{title}',
        grouped: true
    }],
    //This was an experiment, safe to leave out?
    initComponent: function() {
        //ToolbarDemo.eventstore.load();
        ToolbarDemo.views.Eventscard.superclass.initComponent.apply(this, arguments);
    }
});

Ext.reg('eventscard', ToolbarDemo.views.Eventscard);

Now when I navigate to that card view, the loading overlay/spinner is displayed but that's as far as it goes, the list of items does not appear. Any ideas of what I'm doing wrong?

Please see http://stackoverflow.com/questions/7676959/sencha-touch-xml-parsing-issue/7677538#7677538 for some advice I gave on troubleshooting this type of issue. You need to get friendly with your Javascript debugger. :-) — mmigdol, Oct 10 '11 at 16:13
Yeh i saw that, but I can't seem to get any where with it :( I don't really understand what I supposed to do — Chris Edwards, Oct 10 '11 at 16:27

Shakthi · Answer 1 · 2011-10-11T06:56:25.253

I am not that much familier with this, I have used like this to display a list.. try this

ToolbarDemo.eventstore.load();

var itemTpl = new Ext.XTemplate('<div id='title'>{title}</div>');

this.eventStoreList = new Ext.List({
            id: 'eventStoreList',
            store: ToolbarDemo.eventstore,
            itemTpl: itemTpl,
            height: 370,            
            indexBar: false
        });

this.eventStoreListContainer =  new Ext.Container( {
            id : 'eventStoreListContainer',
            items : [this.eventStoreList]
        });


        this.items = [this.eventStoreListContainer];

 ToolbarDemo.views.Eventscard.superclass.initComponent.apply(this);

Thanks, I tried this and the app doesn't load. I've tried to mix in parts of it I think may be missing from my code, but again no luck... :( — Chris Edwards, Oct 11 '11 at 08:31

Chris Edwards · Accepted Answer · 2011-10-11T09:55:09.133

Well, I got it working!

I added ToolbarDemo.eventstore.read(); to the end of my store code, saved the XML file locally in the root 'www' folder then using the list method worked fine!

Does any body know why this (calling a remote XML) could be a problem?

EDIT: Turns out that it works fine in the browser like that, but not the iPhone simulator. So now I've set it back to the remote URL and added the URLs to the PhoneGap Whitelist and it works great :)

How to load XML into a list using Sencha/Phonegap?

2 Answers2