使用sencha touch开发新浪微博iphone界面

Posted 周三, 04/20/2011 - 23:20 by admin

相信不少sencha touch的粉丝们都为Javascript能开发出手机Web App应用而感到兴奋。虽然Sencha Touch提供相当多的原生UI组件，但是利用原生UI开发出来的Web App的UI未必能完全满足手机上的UI设计。

本文将以iphone版本的新浪微博的“更多”界面，介绍如何利用Sencha Touch设计“更多”的界面。

本次示例将以iphone界面作为参考，使用Sencha Touch开发设计模仿iphone界面。

首先，将以iphone下述的界面目标作为参考：

Sencha Touch将采用以下UI组件：
Ext.Panel Ext.List

首先，建立一个html5页面和一个js页面，如下代码：

<!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组件后，界面将存在一个Panel的UI，此时并没有任何内容，现在添加一个list以便显示更多数据列表。在initComponent初始化函数内增加以下一段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" : "关于我们","icon":'version',"needsIcon":false},
                    {"name" : "问题反馈","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];

此时大部分sencha代码都基本完毕，效果如下图：

相信大家都看到此时的界面仍然不是我们所想要的微博更多界面，那我们现在开始对该list界面进行修饰一翻，在初始化Ext.list内部增加以下几个属性：

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

增加属性margin是为了list的数据和上下左右的边框距离远一点，以便更好展示按钮效果。

接着，在html5页面上增加一个css文件，以便对list的ui进行定制，如下导入css文件：

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

在sencha.js里面的list组件增加两个css属性，如下代码：

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

第一个cls为list组件的class属性，第二个为list组件的每个数据项各自的class属性

最后在test.css文件内增加以下css代码，以便修正每个数据项的位置以及风格：

.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;
}

此处的css更多的是利用radius属性对每个选项的的四个角进行圆角效果，由于list的每个数据项都需要分组，css里面则采用nth-of-type等选择符自定义分组，因此存在一定的局限性。

此时代码已经基本完成。效果图如下：