Thursday, August 2, 2012

Sencha Touch 2: The Basics [Part 3]


Adding the blogs page

Now that we have a decent looking home page, it's time to move on to the next screen. In order to keep the code for each page easy to follow we're just going to create one tab at a time and then combine them all together again at the end.
For now, we'll remove the first tab and replace it with a List. We're going to be using Google's Feed API service to fetch the feeds.
Instead of a panel we're using a nestedlist this time, fetching the most recent blog posts from sencha.com/blog. We're using Nested List so that we can drill down into the blog entry itself by simply tapping on the list.
Let's break down the code above, starting with just the list itself:
Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create("Ext.tab.Panel", {
            fullscreen: true,
            tabBarPosition: 'bottom',

            items: [
                {
                    xtype: 'nestedlist',
                    title: 'Blog',
                    iconCls: 'star',
                    displayField: 'title',

                    store: {
                        type: 'tree',

                        fields: [
                            'title', 'link', 'author', 'contentSnippet', 'content',
                            {name: 'leaf', defaultValue: true}
                        ],

                        root: {
                            leaf: false
                        },

                        proxy: {
                            type: 'jsonp',
                            url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
                            reader: {
                                type: 'json',
                                rootProperty: 'responseData.feed.entries'
                            }
                        }
                    }
                }
            ]
        });
    }
});
We're giving the Nested List a few simple configurations - title, iconCls and displayField - and a more detailed one called store. The Store config tells the nested list how to fetch its data. Let's go over each store config in turn:
  • type: tree creates a tree store, which NestedList uses
  • fields tells the Store what fields we're expecting in the blog data (title, content, author etc)
  • proxy tells the Store where to fetch its data from. We'll examine this more closely in a moment
  • root tells the root node it is not a leaf. Above we'd set the leaf defaultValue to true so we need to override that for the root
Of all the Store configurations, proxy is doing the most work. We're telling the proxy to use Google's Feed API service to return our blog data in JSON-P format. This allows us to easily grab feed data from any blog and view it in our app (for example try swapping the Sencha blog url for http://rss.slashdot.org/Slashdot/slashdot above to see it fetch Slashdot's feed).

No comments:

Post a Comment