相信不少Sencha Touch的粉丝们都为JavaScript能开发出手机Web App应用而感到兴奋。本次示例将以iPhone界面作为参考，使用Sencha Touch开发设计模仿iPhone界面。
首先，将以iPhone下述的界面目标作为参考：
Sencha Touch将采用以下UI组件：
Ext.Panel Ext.List
首先，建立一个html 5页面和一个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等选择符自定义分组，因此存在一定的局限性。
此时代码已经基本完成。效果图如下：
这样，iPhone微博更多UI界面已经制作完成。目前对于此解决方案，存在一种局限性，list数据需固定、分组需固定，暂时无法做到数据的实时性等功能。
