Sencha Touch 2:如何将RSS提要显示为列表?

时间:2012-06-26 13:36:57

标签: rss touch extjs feedburner

我想创建一个简单的应用程序,当然可以使用Sencha Touch 2和RSS提要向我展示我最喜欢的新闻网站的最新故事列表。

如何从rss-feed获取数据,然后将其显示为列表,显示标题,作者,日期和内容?

我可以获得最新新闻报道的列表,但我只能设法显示每个项目标题/标题,而不是作者,日期,片段等。这是我的代码:

1个型号,1个商店,1个视图,1个app.js:

//The store
Ext.define("NewsApp.store.EbStore", {
extend: "Ext.data.Store",
requires: ["Ext.data.proxy.JsonP", "Ext.dataview.List" ],
config: {
    model: "NewsApp.model.NewsListModel",
    autoLoad: true,
    proxy: {
        type: 'jsonp',
        url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=5&q=http://feeds.feedburner.com/newsapp_pol',
        reader: {
            type: 'json',
            rootProperty: 'responseData.feed.entries'
            }
        }
    }    
});


//The Model
Ext.define("NewsApp.model.NewsListModel", {
extend: "Ext.data.Model",
config: {
    fields: [
    {name: 'title', type: 'auto'},
    {name: 'author', type: 'auto'},
  ]
} 
});

//The view
Ext.define("NewsApp.view.NewsList", {
extend: "Ext.Container",
requires: "Ext.Toolbar",
alias: "widget.newslistview",

config: {
    layout: {
        type: 'fit'
    },

    items: [{
        xtype: "toolbar",
        title: "Danske Nyheder",
        docked: "top",
        items: [
                {
                    xtype: 'spacer'
                },
                {
                    xtype: "button",
                    text: "Indstillinger",
                    ui: "action",
                    id: "settingsButton",
                    iconMask: true,
                    iconCls: 'settings'
                },
                  {
                    xtype: "button",
                    text: "Refresh",
                    ui: "action",
                    id: "refreshButton",
                    iconMask: true,
                    iconCls: 'refresh'
                  }
                ]
    },
    {
        xtype: "list",
        store: "EbStore",
        itemId:"EbList",
        onItemDisclosure: true,
        itemTpl: '{title}'
    }
    ],
    }
});

// And the app.js just for kicks
Ext.application({
name: "NewsApp",
models: ["NewsListModel"],
stores: ["EbStore"],
views: ["NewsList"],

launch: function () {
    console.log("App starts");
    var newsListView = {
        xtype: "newslistview"
    };

    Ext.Viewport.add([newsListView]);
}
});

使用此代码,我可以很好地显示rss项目的标题。但是,如果我将{title}更改为{author},则会在我的视图中创建列表项,但不包含任何内容。我想读的RSS使用正常标准,我认为:http://feeds.feedburner.com/newsapp_pol


那么如何显示不仅仅是标题并访问其余的RSS?
我想这可以归结为我不了解代理代码中捕获的数据或者究竟是如何以及采用何种格式。

有人可以帮忙吗? : - )

我已经查看了Sencha Touch RSS阅读器的这两个例子,两者都非常好,只是代码太高级了,我无法理解:
http://www.sencha.com/apps/rssreader/
https://github.com/AndreaCammarata/FeedBurner-RSS-Reader

1 个答案:

答案 0 :(得分:1)

特勒尔斯,

如果您想查看Google Feed的数据响应,建议您使用json beautifier查看json数据,以便于阅读。首先将google feed url粘贴到浏览器的地址栏中。复制生成的json响应 - 并将其粘贴到美化器中。这将为您提供响应数据中数据字段的结构化视图。

当我尝试时,第一个条目看起来像这样:

                "title": "Over 50 såret under kampe i Kosovo",
                "link": "http://politiken.dk/udland/ECE1672568/over-50-saaret-under-kampe-i-kosovo/",
                "author": "",
                "publishedDate": "Thu, 28 Jun 2012 12:09:18 -0700",
                "contentSnippet": "35 politifolk og 20 serbere blev såret, da en gruppe serbere stødte sammen i det etnisk delte Kosovo.",
                "content": "35 politifolk og 20 serbere blev såret, da en gruppe serbere stødte sammen i det etnisk delte Kosovo.",
                "categories": []

我注意到所有条目的“author”字段都是空的,这可以解释为什么你得到一个空列表。

这应该有助于您了解Feed中的数据结构并在代码中创建匹配引用。

干杯, 拉斯穆斯