轉自：
http://www.cnblogs.com/dowinning/archive/2012/02/08/2342134.html
想到哪里寫到哪里，因為是學習過程，可能有不對的地方，以后會隨時回頭修改。本文面向的是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>
|
------------------------------------------------
博主經營一家發飾淘寶店，都是純手工制作哦，開業沖鑽，只為信譽！需要的親們可以光顧一下！謝謝大家的支持！
店名：
小魚尼莫手工飾品店
經營:
發飾、頭花、發夾、耳環等（手工制作）
網店：
http://shop117066935.taobao.com/
---------------------------------------------------------------------
繼續正題...
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！
店名：
小魚尼莫手工飾品店
經營:
發飾、頭花、發夾、耳環等（手工制作）
網店：
http://shop117066935.taobao.com/