开始 Sencha Touch 2 之旅之三

现在我们已经看到了一个比较体面拿的出手的主页页面了，接下来让我们来做一些扩展。我们先用虚构的数据在一个单独的选项卡显示最新博客文章列表(用List显示)。在这里实现上我们选取了几个来自http://sencha.com/blog的职位信息。关于List的代码我们写在"Home"选项卡下方（点击预览按钮可以看到运行代码示例）。

Ext.application({

    name: 'Sencha',

 

    launch: () {

        Ext.create("Ext.TabPanel", {

            fullscreen: true,

            tabBarPosition: 'bottom',

 

            items: [

                {

                    title: 'Home',

                    iconCls: 'home',

                    cls: 'home',

                    html: [

                        '<img width="65%" src="http://staging.sencha.com/img/sencha.png" />',

                        '<h1>Welcome to Sencha Touch</h1>',

                        "<p>You're creating the Getting Started app. This demonstrates how ",

                        "to use tabs, lists and forms to create a simple app</p>",

                        '<h2>Sencha Touch (2.0.0pr1)</h2>'

                    ].join("")

                },

                {

                    xtype: 'list',

                    title: 'Blog',

                    iconCls: 'star',

 

                    itemTpl: '{title}',

                    store: {

                        fields: ['title', 'url'],

                        data: [

                    {title: 'Ext Scheduler 2.0', url: 'ext-scheduler-2-0-upgrading-to-ext-js-4'},

                   {title: 'Previewing Sencha Touch 2', url: 'sencha-touch-2-what-to-expect'},

            {title: 'Sencha Con 2011', url: 'senchacon-2011-now-packed-with-more-goodness'},

             {title: 'Documentation in Ext JS 4', url: 'new-ext-js-4-documentation-center'}

                        ]

                    }

                }

            ]

        }).setActiveItem(1);

    }

});