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

发布于 2024-12-09 05:07:47 字数 1801 浏览 0 评论 0原文

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

现在,当我导航到该卡片视图时,会显示加载覆盖/旋转器,但就目前而言,项目列表不会出现。对我做错了什么有什么想法吗?

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?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

染柒℉ 2024-12-16 05:07:47

我对此不太熟悉,我用这样来显示列表..试试这个

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

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);
流年已逝 2024-12-16 05:07:47

好吧,我成功了!

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

有谁知道为什么这(调用远程 XML)可能会成为问题?

编辑: 事实证明,它在浏览器中运行良好,但在 iPhone 模拟器中则不然。现在我已将其设置回远程 URL 并将这些 URL 添加到 PhoneGap 白名单中,效果非常好:)

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文