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

一、创建主面板

 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'     
                 }

css样式代码：

 <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的地方。

本文由职坐标整理发布，更多相关内容，请关注职坐标WEB前端HTML5/CSS3频道！