Sencha logo  
 
产品咨询热线：021-32120333
 
       
 
 
首页 产品中心 中文教程 联系我们  
 
Sencha Anmimator
HTML5动画编辑工具 Sencha Animator
Sencha Animator 是一个基于GUI的编辑器，针对的是想要创建HTML5动画的交互设计师。
 
 
 
使用sencha touch开发新浪微博iphone界面
 

相信不少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页面，如下代码：

01.<!DOCTYPE HTML>
02.<html>
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
05.<title>demos</title>
06.<link rel="stylesheet" type="text/css" href="sencha-touch.css" />
07.<script type="text/javascript" src="sencha-touch-debug.js"></script>
08.<script type="text/javascript" src="sencha.js" charset="utf-8"></script>
09.</head>
10.<body>
11.</body>
12.</html>

sencha.js先增加setup以便文档加载完后初始化Panel组件，如下代码：

01.Ext.setup({
02.onReady: function() {
03.var moreObj;
04.moreObj = Ext.extend(Ext.Panel, {
05.layout : 'card',
06.initComponent : function() {
07.moreObj.superclass.initComponent.call(this,arguments);
08.}
09.})
10. 
11.new moreObj({
12.fullscreen : true,
13.scroll : 'vertical'
14.});
15. 
16.}
17.});

完成初始化Panel组件后，界面将存在一个Panel的UI，此时并没有任何内容，现在添加一个list以便显示更多数据列表。在initComponent初始化函数内增加以下一段Ext.list代码：

01.this.list5 = new Ext.List({
02.itemTpl: '<tpl if="needsIcon"><img width="26" height="26" src="images/{icon}.jpg" align="absmiddle" /></tpl>{name}',
03.store: new Ext.data.Store({
04.fields: ['name','icon','needsIcon'],
05.data: [
06.{"name" : "直接登录","icon":'login',"needsIcon":true},
07.{"name" : "找回密码","icon":'password',"needsIcon":true},
08.{"name" : "声音提示","icon":'sound',"needsIcon":true},
09.{"name" : "关于我们","icon":'version',"needsIcon":false},
10.{"name" : "问题反馈","icon":'question',"needsIcon":true},
11.{"name" : "客服电话","icon":'phone',"needsIcon":true},
12.{"name" : "软件版本0.92","icon":'version',"needsIcon":true}
13.]
14.}),
15.title: 'title1'
16.});

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

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

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

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

1.ui: 'round',
2.scroll : false,
3.margin : '10 15 10 15'

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

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

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

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

1.cls : 'list2',
2.itemCls : 'list2_item',

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

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

01..list2{
02.-webkit-border-radius : 10px;
03.}
04. 
05..list2 .x-list-item{
06.background-color : #FFF;
07.border:1px solid silver;
08.-webkit-border-radius : 10px;
09.}
10. 
11..list2 .x-list-item:first-of-type{
12.margin : 0 0 15px 0;
13.border-top:1px solid silver;
14.}
15..list2 .x-list-item:nth-of-type(2){
16.-webkit-border-bottom-left-radius:0px;
17.-webkit-border-bottom-right-radius:0px;
18.}
19..list2 .x-list-item:nth-of-type(3){
20.border-top:0px;
21.margin : 0 0 15px 0;
22.-webkit-border-top-left-radius:0px;
23.-webkit-border-top-right-radius:0px;
24.}
25..list2 .x-list-item:nth-of-type(4){
26.-webkit-border-bottom-left-radius:0px;
27.-webkit-border-bottom-right-radius:0px;
28.}
29..list2 .x-list-item:nth-of-type(5){
30.border-top:0px;
31.-webkit-border-radius:0px;
32.}
33..list2 .x-list-item:nth-of-type(6){
34.border-top:0px;
35.margin : 0 0 15px 0;
36.-webkit-border-top-left-radius:0px;
37.-webkit-border-top-right-radius:0px;
38.}
39..list2 .x-list-item:nth-of-type(7){
40.margin : 0 0 15px 0;
41.}
42. 
43..list2 .x-item-selected:last-child{
44.-webkit-border-bottom-left-radius:10px;
45.-webkit-border-bottom-right-radius:10px;
46.}
47..list2 .x-item-selected:first-of-type{
48.-webkit-border-top-left-radius:10px;
49.-webkit-border-top-right-radius:10px;
50.}
51. 
52..list2 img{
53.margin-right:10px;
54.}

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

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

这样，iphone微博更多UI界面已经制作完成。目前对于此解决方案，存在一种局限性，list数据需固定、分组需固定，暂时无法做到数据的实时性等功能。


TOP

 
其他产品
 
  • Sencha Complete
    		•
  • Sencha Complete：Team
  • Sencha Touch
    		•
  • Sencha Ext JS
  • Sencha Animator
    		•
  • Sencha GXT
  • Sencha Architect
    		•
     
    中文教程
     
  • 优化基于EXTJS 4.1的应用
    		•
  • 如何创建一个SENCHA TOUCH 2应用(第一部分)
    		•
  • 在线PHONEGAP打包SENCHA TOUCH 2客户端应用
    		•
  • SENCHA TOUCH自动生成工具
    		•
  • EXTJS 4应用架构设计
    		•
     
    咨询热线：021-32120333 传真：021-62119020 邮箱：info@senchasoftware.com