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

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) {
   开发者_如何学JAVA     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?

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);

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 :)