現在我們已經看到了一個比較體面拿的出手的主頁頁面了，接下來讓我們來做一些擴展。我們先用虛構的數據在一個單獨的選項卡顯示最新博客文章列表(用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);

??? }

});

轉載于:https://www.cnblogs.com/breg/archive/2011/12/15/2288410.html

總結

以上是生活随笔為你收集整理的开始 Sencha Touch 2 之旅之三的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。