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