Sencha Touch開(kāi)發(fā)實(shí)例：新浪微博iPhone界面

作者：三橋 2011-07-26 09:58:24

移動(dòng)開(kāi)發(fā) iOS 移動(dòng)應(yīng)用

雖然Sencha Touch提供相當(dāng)多的原生UI組件，但是利用原生UI開(kāi)發(fā)出來(lái)的Web App的UI未必能完全滿足手機(jī)上的UI設(shè)計(jì)。本文將以iPhone版本的新浪微博的“更多”界面，介紹如何利用Sencha Touch設(shè)計(jì)“更多”的界面。

相信不少Sencha Touch的粉絲們都為JavaScript能開(kāi)發(fā)出手機(jī)Web App應(yīng)用而感到興奮。本次示例將以iPhone界面作為參考，使用Sencha Touch開(kāi)發(fā)設(shè)計(jì)模仿iPhone界面。

首先，將以iPhone下述的界面目標(biāo)作為參考：

Sencha Touch開(kāi)發(fā)實(shí)例：新浪微博iPhone界面

Sencha Touch將采用以下UI組件：

Ext.Panel Ext.List

首先，建立一個(gè)html 5頁(yè)面和一個(gè)js頁(yè)面，如下代碼：

<!DOCTYPE HTML> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
        <title>demos</title> 
        <link rel="stylesheet" type="text/css" href="sencha-touch.css"  /> 
        <script type="text/javascript" src="sencha-touch-debug.js"></script> 
        <script type="text/javascript" src="sencha.js" charset="utf-8"></script> 
    </head> 
    <body> 
    </body> 
    </html>

sencha.js先增加setup以便文檔加載完后初始化Panel組件，如下代碼：

Ext.setup({ 
    onReady: function() { 
        var moreObj; 
        moreObj = Ext.extend(Ext.Panel, { 
            layout : 'card', 
            initComponent : function() { 
                moreObj.superclass.initComponent.call(this,arguments); 
            } 
        }) 
  
        new moreObj({ 
            fullscreen : true, 
            scroll : 'vertical' 
        }); 
  
    } 
});

完成初始化Panel組件后，界面將存在一個(gè)Panel的UI，此時(shí)并沒(méi)有任何內(nèi)容，現(xiàn)在添加一個(gè)list以便顯示更多數(shù)據(jù)列表。在initComponent初始化函數(shù)內(nèi)增加以下一段Ext.list代碼：

this.list5 = new Ext.List({ 
      itemTpl: '<tpl if="needsIcon"><img width="26" height="26" src="images/{icon}.jpg" align="absmiddle"  /></tpl>{name}', 
      store: new Ext.data.Store({ 
             fields: ['name','icon','needsIcon'], 
             data: [ 
                    {"name" : "直接登錄","icon":'login',"needsIcon":true}, 
                    {"name" : "找回密碼","icon":'password',"needsIcon":true}, 
                    {"name" : "聲音提示","icon":'sound',"needsIcon":true}, 
                    {"name" : "關(guān)于我們","icon":'version',"needsIcon":false}, 
                    {"name" : "問(wèn)題反饋","icon":'question',"needsIcon":true}, 
                    {"name" : "客服電話","icon":'phone',"needsIcon":true}, 
                    {"name" : "軟件版本0.92","icon":'version',"needsIcon":true} 
             ] 
        }), 
        title: 'title1' 
});

完成list的初始化后，將list加入到外部Panel中，在initComponent增加如下代碼：

this.listpanel = new Ext.Panel({ 
       title: '更多', 
       items: [this.list5] 
}) 
this.items = [this.listpanel];

此時(shí)大部分sencha代碼都基本完畢，效果如下圖：

相信大家都看到此時(shí)的界面仍然不是我們所想要的微博更多界面，那我們現(xiàn)在開(kāi)始對(duì)該list界面進(jìn)行修飾一翻，在初始化Ext.list內(nèi)部增加以下幾個(gè)屬性：

ui: 'round', 
scroll : false, 
margin : '10 15 10 15'

增加屬性margin是為了list的數(shù)據(jù)和上下左右的邊框距離遠(yuǎn)一點(diǎn)，以便更好展示按鈕效果。

接著，在html5頁(yè)面上增加一個(gè)css文件，以便對(duì)list的ui進(jìn)行定制，如下導(dǎo)入css文件：

<link href="test.css" rel="stylesheet"  />

在sencha.js里面的list組件增加兩個(gè)css屬性，如下代碼：

cls : 'list2', 
itemCls : 'list2_item',

第一個(gè)cls為list組件的class屬性，第二個(gè)為list組件的每個(gè)數(shù)據(jù)項(xiàng)各自的class屬性

最后在test.css文件內(nèi)增加以下css代碼，以便修正每個(gè)數(shù)據(jù)項(xiàng)的位置以及風(fēng)格：

.list2{ 
    -webkit-border-radius : 10px; 
} 
  
.list2 .x-list-item{ 
    background-color : #FFF; 
    border:1px solid silver; 
    -webkit-border-radius : 10px; 
} 
  
.list2 .x-list-item:first-of-type{ 
    margin : 0 0 15px 0; 
    border-top:1px solid silver; 
} 
.list2 .x-list-item:nth-of-type(2){ 
    -webkit-border-bottom-left-radius:0px; 
    -webkit-border-bottom-right-radius:0px; 
} 
.list2 .x-list-item:nth-of-type(3){ 
    border-top:0px; 
    margin : 0 0 15px 0; 
    -webkit-border-top-left-radius:0px; 
    -webkit-border-top-right-radius:0px; 
} 
.list2 .x-list-item:nth-of-type(4){ 
    -webkit-border-bottom-left-radius:0px; 
    -webkit-border-bottom-right-radius:0px; 
} 
.list2 .x-list-item:nth-of-type(5){ 
    border-top:0px; 
    -webkit-border-radius:0px; 
} 
.list2 .x-list-item:nth-of-type(6){ 
    border-top:0px; 
    margin : 0 0 15px 0; 
    -webkit-border-top-left-radius:0px; 
    -webkit-border-top-right-radius:0px; 
} 
.list2 .x-list-item:nth-of-type(7){ 
    margin : 0 0 15px 0; 
} 
  
.list2 .x-item-selected:last-child{ 
    -webkit-border-bottom-left-radius:10px; 
    -webkit-border-bottom-right-radius:10px; 
} 
.list2 .x-item-selected:first-of-type{ 
    -webkit-border-top-left-radius:10px; 
    -webkit-border-top-right-radius:10px; 
} 
  
.list2 img{ 
    margin-right:10px; 
}