Javascript 如何使用Sencha/Phonegap将XML加载到列表中？

我正在尝试使用sencha touch和phonegap设置一个本地风格的应用程序。我试图将数据从外部XML提要拉入模型

在我的模型（Event.js）中，我有：

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

在我的商店（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
});

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

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

在视图（尝试作为列表）中：

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

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

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

并尝试作为面板：

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

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

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

---

现在，当我导航到该卡视图时，将显示加载覆盖/微调器，但仅此而已，项目列表不会显示。你知道我做错了什么吗？

我不太熟悉这个，我用这样的方式来显示列表。。试试这个

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

ToolbarDemo.eventstore.load（）；
var itemTpl=new Ext.XTemplate（“{title}”）；
this.eventStoreList=新的外部列表({
id:'eventStoreList'，
存储：ToolbarDemo.eventstore，
itemTpl:itemTpl，
身高：370，
indexBar:错误
});
this.eventStoreListContainer=新的Ext.Container（{
id:'eventStoreListContainer'，
items:[此.eventStoreList]
});
this.items=[this.eventStoreListContainer]；
ToolbarDemo.views.Eventscard.superclass.initComponent.apply（这个）；

好吧，我让它工作了

我添加了

ToolbarDemo.eventstore.read（）在我的商店代码的末尾，将XML文件本地保存在根“www”文件夹中，然后使用列表方法工作正常

有人知道为什么这（调用远程XML）会成为一个问题吗？

编辑：结果表明，它可以在浏览器中正常工作，但在iPhone模拟器中却不行。因此，现在我已将其设置回远程URL，并将URL添加到PhoneGap白名单中，效果非常好：）
请参阅我提供的有关解决此类问题的建议。您需要友好地使用Javascript调试器。：-）是的，我看到了，但我似乎无法理解它：（我真的不明白我应该做什么，Hanks，我尝试了这个，但应用程序没有加载。我尝试了混合它的一部分，我认为我的代码中可能缺少它，但再次没有运气…：(