Sencha Touch 2: How do I display RSS feed as list?

Question

I'd like to create a simple app that shows me a list of the latest stories from my favourite news sites using Sencha Touch 2 and the RSS feeds, of course.

How do I get data from an rss-feed and then display it as a list, showing title, author, date and content?

I can get a list of the latest news stories going, but I can only manage to display each item title/headline, not the author, date, snippet etc. Here's my code:

1 model, 1 store, 1 view, 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]);
}
});

With this code, I can display the titles of the rss items nicely. But if I change the {title} to, say, {author}, the list items are created in my view, but without any content whatsoever. The RSS that I'm trying to read uses normal standards, I think: http://feeds.feedburner.com/newsapp_pol

So how do I display more than just the title and acces the rest of the rss?
I guess it boils to my not understanding what data is being captured in the proxy-code or how or in what format exactly.

Can anybody help? :-)

I have checked out these two examples of Sencha Touch RSS readers, and both are excellent, except that the code is way too advanced for me to understand:
http://www.sencha.com/apps/rssreader/
https://github.com/AndreaCammarata/FeedBurner-RSS-Reader

Answer 1

Troels,

If you want to look at the data response of your google feed, I suggest you take a peek at the json data with a json beautifier to make it easier to read. First paste your google feed url into the browser's address bar. Copy the resulting json response - and paste it into the beautifier. That will give you a structured view of the data fields in the response data.

When i tried it, the first entry looked like this:

                "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": []

I noticed that the "author" field is empty on all entries, which may explain why you get an empty list.

That should help you understand the data structure in the feed and create matching references in your code.

Cheers, Rasmus