想到哪里寫到哪里，因為是學習過程，可能有不對的地方，以后會隨時回頭修改。本文面向的是Sencha Touch 1.1.1版本。
1、Sencha Touch開發與普通web開發有什么區別？
Sencha Touch（為方便起見，本文后面一律簡寫為ST）頁面的開發跟普通html頁面相比，總體來說沒有本質上的區別，只是引入了對html5和CSS3的支持，然后提供了對移動設備（iPad/iPhone/Android Mobile/Android Tablet/BlackBerry等）的特殊優化。事實上也正是因為html5和CSS3才使得ST可以實現如此美妙以至於可以媲美Native應用程序的交互效果。
2、特殊的Document標記
ST頁面的Document標記比較特殊，在html標簽之前，使用如下標簽來聲明此文檔是html5格式：
<!DOCTYPE html>
3、使用ST首先要在html代碼的<head>區引入必須的公共CSS和JS文件：
<link rel="stylesheet" href="sencha-touch.css" type="text/css">
<script type="text/javascript" src="sencha-touch.js"></script>
需要注意的是，除sencha-touch.css外，ST提供了android.css/apple.css/bb6.css等三個css文件，分別對應android風格/apple風格/黑莓6三種不同的Theme，引用不同的css文件即可實現頁面Theme的切換。
4、一個ST應用的通常模樣
引入公共文件之后，當然就要編寫自己應用程序的腳本了，如我們在大多數ST應用的例子中所見，通常情況下，應用程序腳本是寫在單獨的js文件中進行調用的（好處可以參見.net編程中code-behind和code-beside的對比），因此，一個常見的ST文檔往往大致是這個模樣：
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script src="sencha-touch.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link href="sencha-touch.css" rel="stylesheet" type="text/css" />
</head>
<body></body>
</html>
5、現在，我們關注的焦點將會轉移到app.js這個文件了，因為它才是ST頁面開發的核心。
通過我們對官網SDK中的Examples和同樣出自官網的quick start代碼進行分析，發現ST應用首頁的js腳本（可以理解為啟動程序）常用編寫方式有兩種：
A、Examples中采用的 —— Ext.setup方式
//使用setup來啟動主程序
Ext.setup({
tabletStartupScreen: 'tablet_startup.png', //tablet設備時主屏中間出現的背景圖片
phoneStartupScreen: 'phone_startup.png', //phone設備時主屏中間出現的背景圖片
icon: 'icon.png', glossOnIcon: false, //跟Extjs一樣，主程序代碼卸載onReady里面
onReady: function(options) {
//TODO
}
});
B、quick start中采用的 —— Ext.Application方式
new Ext.Application({
launch: function() {
//TODO
}
});
由於這里我們只關注ST應用的啟動代碼，所以具體界面實現代碼省略。對於上述兩種方式的區別，鄙人暫時無力進行解讀，歡迎高手指教。
6、ST如何判斷終端設備類型？
我們知道，既然ST是專為移動設備而設計，那么在我們的應用第一次被訪問的時候，判斷客戶端設備的類型是非常重要的，在ST中，我們可以這樣判斷：
if (Ext.is.Phone) {
//所有手機設備
}
if (Ext.is.Android) {
//所有Android設備
}
if (Ext.is.BlackBerry) {
//黑莓手機
}
if (Ext.is.iPad) {
//iPad平板電腦
}
……
當然關於設備類型還有很多其他判斷屬性，你可以參照ST的文檔說明http://docs.sencha.com/touch/1-1/#!/api/Ext.is
7、設計一個漂亮的Demo
好了，幾個前提問題基本解決，現在我們嘗試寫一個比HelloWorld更復雜一些的啟動頁面，來找一找成就感。先看原型圖：
非常簡單的一個登陸界面，我們確定使用apple風格的theme，使之更貼近Native的感覺。注：此例只考慮界面的實現，因此使用Ext.Panel控件進行布局設計。
8、一步步實現這個Demo
下面對實現代碼按照步步深入的方式進行一下分解說明：
第一步：
//第一步：放置一個Ext.Panel，使之充滿屏幕
Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
//判斷是否是手機設備，只有手機設備才使用此布局
if (Ext.is.Phone) {
new Ext.Panel({ //使用一個Panel來填滿屏幕
fullscreen: true, //是否全屏，選擇true則橫豎屏切換時仍可以保證自動適應尺寸
id: 'content',
scroll: 'vertical', //滾動方向
html: '這里放置內容', //Panel里面放置的內容
layout: {type: 'vbox', align: 'center'}, //布局方式，vbox縱向布局，且每行內容居中
items: [], //這里放置容器內部的子元素
dockedItems: [] //這里放置Panel本身所擁有的dock元素（你可以理解為自帶工具欄）
});
}
}
});
現在只有一個空容器充滿屏幕，里面顯示了幾個漢字，看演示效果（Android 2.3，下同）
第二步：
//第二步：給Panel添加一個頂部工具欄，用來顯示程序標題
Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
//判斷是否是手機設備，只有手機設備才使用此布局
if (Ext.is.Phone) {
new Ext.Panel({
fullscreen: true,
id: 'content',
scroll: 'vertical',
layout: {type: 'vbox', align: 'center'},
html: '這里放置內容',
items: [],
//前面我們說過，Panel自帶的工具欄要放置在dockedItems里面
//現在我們添加頂部的工具欄
dockedItems: [
{
id: 'status', //給他一個ID
xtype: 'toolbar', //xtype類型是toolbar，完整的xtype枚舉見這里http://docs.sencha.com/touch/1-1/#!/api/Ext.Component
ui: 'light', //light表示淺色的背景圖案
dock: 'top', //工具欄放置在最頂部
title: "Sencha Touch Demo" //工具欄的標題
}
]
});
}
}
});
效果圖顯示，我們已經有了一個頂部工具欄，顯示應用程序的名稱
第三步：
//第三步：給Panel添加底部工具欄
Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
//判斷是否是手機設備，只有手機設備才使用此布局
if (Ext.is.Phone) {
new Ext.Panel({
fullscreen: true,
id: 'content',
scroll: 'vertical',
layout: {type: 'vbox', align: 'center'},
html: '這里放置內容',
items: [],
dockedItems: [
//這里是剛才的頂部工具欄
{
id: 'status',
xtype: 'toolbar',
ui: 'light',
dock: 'top',
title: "Sencha Touch Demo"
},
//這里是新增加的底部工具欄
{
xtype: 'toolbar',
dock: 'bottom', //在這里聲明工具欄附着在底部
ui: 'dark', //深色背景圖案
//又看到了items，顯然ST的items是可以嵌套的，好吧，我們一口氣把這個工具欄上的按鈕也給加上
items: [
{
xtype: 'button', //左側一個button
ui: 'drastic', //drastic是button的顏色和樣式定義
text: '忘記密碼' //不解釋
},
{xtype: 'spacer'}, //這個需要解釋一下，spacer會自動充滿剩余空間
{
xtype: 'button', //最右側的button
ui: 'action', //action樣式是藍色
text: '注冊使用'
}
]
}
]
});
}
}
});
現在看起來更像樣一些了，底部工具欄也已經齊備
第四步：
//第四步：頂部底部工具欄都已經ok，現在我們要給Panel添加內容
//回頭看一下原型圖，我們需要再Panel內部自上到下放置一個logo圖片和一個表單
//表單包含了賬號和密碼兩個文本框，其中密碼是掩碼框，然后是一個登錄按鈕和一個鏈接
Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
//判斷是否是手機設備，只有手機設備才使用此布局
if (Ext.is.Phone) {
new Ext.Panel({
fullscreen: true,
id: 'content',
scroll: 'vertical',
layout: {type: 'vbox', align: 'center'},
//由於使用items設計Panel的內部元素，所以把html屬性注掉
//其實不注也不會出錯，html的內容會被顯示在最底部
//html: '這里放置內容',
items: [
//從上往下第一個元素，logo圖片
{
xtype: 'container', //使用普通的Container容器即可
height: 98, //高度要跟圖片尺寸相適應，由於我在下面html代碼中給圖片加了16px的margin-top，所以Container高度設置成圖片高度+16，防止圖片顯示不完整
width: 96, //圖片的寬度
html: '<img src="logo.png" style="margin-top: 16px;" />' //直接設定html代碼來顯示圖片，注意有16像素的頂部margin
},
//從上往下第二個元素，form表單
{
xtype: 'form', //xtype為form
id: 'loginForm', //為便於操作form，給它一個id
//表單內有不止一個元素，因此又要給它添加items
items: [
{
xtype: 'fieldset', //加一個fieldset，可以將兩個文本框放在一個圓角域組里面，更美觀
margin: '-2 0 16 0', //使用margin調整與上面元素和下面元素之間的空隙
//fieldset里面包含兩個文本框
items: [
{
xtype: 'textfield', //第一個文本框
name: 'account', //name用來獲取值
placeHolder: '您的賬號', //默認顯示在文本框里的文字，點擊和輸入時它會消失
required: true, //必填字段
useClearIcon: true //輸入內容后文本框后面會出現一個清空按鈕
},
{
xtype: 'passwordfield', //密碼文本框
name: 'password',
placeHolder: '您的密碼',
required: true,
useClearIcon: true
}
]
},
//提交按鈕，放在fieldset外面是為了使之與fieldset等寬
{
xtype: 'button',
text: '登錄STDEMO',
ui: 'confirm' //綠色按鈕
},
//再用一個Container來放置鏈接文字
{
xtype: 'container',
html: '<div style="width: 100%; text-align: center;"><a style="font-size: 14px; color: blue;">需要合作？請聯系我們……</a></div>',
margin: '16 0 0 0'
}
]
}
],
dockedItems: [
{
id: 'status',
xtype: 'toolbar',
ui: 'light',
dock: 'top',
title: "Sencha Touch Demo"
},
{
xtype: 'toolbar',
dock: 'bottom',
ui: 'dark',
items: [
{
xtype: 'button',
ui: 'drastic',
text: '忘記密碼'
},
{xtype: 'spacer'},
{
xtype: 'button',
ui: 'action',
text: '注冊使用'
}
]
}
]
});
}
}
});
顯然這是最復雜的一步，不過只要學得耐心點，一樣不成問題
到目前為止，我們的設計意圖已經實現，最下面的鏈接由於屏幕高度問題被蓋住了，向上拖動即可顯示出來。最后再來一個全屏的效果：
怎么樣？還不錯吧，是不是很有Native的感覺？如果你喜歡的話，我們還可以換換Theme來看看。
第五步：切換Theme
上面這個是Sencha Touch風格
這個是Android風格
這個是BlackBerry6風格。
Enjoy it！