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

【问题标题】：How to load XML into a list using Sencha/Phonegap?如何使用 Sencha/Phonegap 将 XML 加载到列表中？
【发布时间】：2011-12-04 14:40:33
【问题描述】：

我正在尝试使用 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);

现在，当我导航到该卡片视图时，会显示加载叠加层/微调器，但仅此而已，项目列表不会出现。关于我做错了什么的任何想法？

【问题讨论】：

请参阅stackoverflow.com/questions/7676959/…，了解我在解决此类问题时提供的一些建议。您需要对 Javascript 调试器友好。 :-)
是的，我看到了，但我似乎找不到任何地方:(我真的不明白我应该做什么

标签： javascript xml cordova xml-parsing sencha-touch

【解决方案1】：

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

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

【讨论】：

谢谢，我试过了，但应用程序无法加载。我试图混合我认为我的代码中可能缺少的部分内容，但再次没有运气...... :(

【解决方案2】：

好吧，我搞定了！

我在商店代码的末尾添加了ToolbarDemo.eventstore.read();，将 XML 文件本地保存在根 'www' 文件夹中，然后使用列表方法工作正常！

有人知道为什么这（调用远程 XML）可能是个问题吗？

编辑： 事实证明它在这样的浏览器中运行良好，但在 iPhone 模拟器中却不行。所以现在我将其设置回远程 URL 并将这些 URL 添加到 PhoneGap 白名单中，效果很好:)

【讨论】：