HTML5开发实战——Sencha Touch篇

学习了许多基本的Sencha Touch内容，已经了解了Sencha Touch的开发模式。接下来一段时间我们将利用Sencha Touch来进行自己的web应用构建。先要解决的是前端的问题，从最简单的入手，一个基本的登录界面。

最简单的登录界面大体由以下介个元素组成：用户头像部分、用户名输入部分、密码输入部分、提交按钮。我们从这种虽简单的界面开始，逐步进行界面实现。

一、创建主面板

Ext.require('Ext.Panel');  Ext.application({   name:'MyApp',   icon:'image/icon.png',   glossOnIcon:false,   phoneStartupScreen:'img/phone_startup.png',   tabletStartupScreen:'img/tablet_startup.png',   launch:function(){    var mainPanel = Ext.create('Ext.Panel',{     id:'mainPanel',     fullscreen:true,     scrollable:'vertical',     html:'Here is the text'    });    Ext.Viewport.add(formPanel);   }  });

二、添加头像图片

1、定义 img 组件

<span style="white-space:pre">  </span>var img = Ext.create('Ext.Img',{     src:'pic.png',     width:100,     height:100,     cls:'pic'      });

2、通过 cls 设置位置， pic 类代码卸载 style 里，让图片居中显示

.pic{  <span style="white-space:pre"> </span>margin:0 auto;   margin-top:30px;  }

3 、将图片组件添加到面板中

var mainPanel = Ext.create('Ext.Panel',{     id:'mainPanel',     fullscreen:true,     scrollable:'vertical',     items:[img]    });

三、添加表单输入框

直接在 mainPanel 的 items 中添加：

<span style="white-space:pre">    </span>items:[img,{       xtype:'textfield',       id:'username',       name:'username',       required:'true',       placeHolder:'Please enter the username...',       clearIcon:true      },{       xtype:'passwordfield',       id:'password',       name:'password',       required:'true',       placeHolder:'Please enter the password...',       clearIcon:true        }]

注意：不同组件 id 名不能一样：否则只有第一个组件会生效，其他 id 相同的组件不显示

再给第一个输入框添加一个样式： cls: ’inp’，用来与图片添加一些距离同时跟下一个输入框有一个分割线：

<span style="white-space:pre">  </span>.inp{     margin-top:20px;     border-bottom:2px solid #CCC;    }

四、添加按钮

同理，同样的方法在 items 中编写按钮 js 代码

<span style="white-space:pre">    </span>{       xtype:'button',       text:'Log in',       cls:'btn'       }

cls 样式代码：

<span style="white-space:pre">  </span>.btn{     height:50px;     margin:0 auto;     width:90%;     background:#39F;     color:white;     margin-top:30px;    }

以上就可以实现一个类似qq登录的简单界面了。通过一步一步实现，逐渐掌握Sencha Touch在实际应用中前端部分的基本思路，并且注意容易产生Bug的地方。