摘 要:自2010年發布 Sencha Touch最初版本，HTML5和移動網絡的發展也突飛猛進，許多開發人員以移動網絡作為創建應用程序的一個平臺，Sencha Touch框架在其中發揮了重要作用，尤其是加速了基于 HTML5 瀏覽器的應用普及。本文通過示例的方式對Sencha Touch的使用進行介紹

關鍵詞:Sencha Touch HTML5 webkit

中圖分類號:TP274文獻標識碼:A文章編號:1674-098X(2012)3(a)-0030-03

Sencha Touch是第一個HTML5移動開發框架，Sencha Touch能夠快速地構造出基于HTML5的手機應用，通過它構造出來的程序有著與原生應用一致的用戶體驗，目前該框架兼容Android、iOS、BlackBerry這些主流手機平臺。ExtJS是用于創建網絡前端用戶界面的，它是與后臺技術無關的前端Ajax框架，其功能豐富，無論是界面之美，還是功能之強都高居榜首。現在ExtJS整合JQTouch等推出了適用于前沿Touch Web的Sencha Touch的框架，該框架是第一個基于HTML5的Mobile App框架，同時ExtJS更名為Sencha。Sencha Touch可以讓你的Web App體現出美妙的用戶界面和豐富的數據管理，它基于最新的HTML5和CSS3的WEB標準，全面兼容Android、Apple iOS、BlackBerry設備。在個人機上，它兼容webkit為核心的瀏覽器，如:chrome、safari、maxthon等。

1 Sencha Touch特性介紹

(1)基于最新的WEB標準，HTML5，CSS3，JavaScript。整個庫在壓縮成gzip后大約只有80KB，通過禁用一些組件還會使它更小。

(2)支持世界上最好的設備，Beta版兼容Android和iOS，Android上的開發人員還可以使用一些專為Android定制的應用。

(3)增強的觸摸事件，在touchstart、touchend等標準事件基礎上，增加了一組自定義事件數據集成，如tap、swipe、pinch、rotate等。

(4)數據集成，提供了強大的數據包，通過Ajax、JSONp、YQL等方式綁定到組件模板，寫入本地離線存儲。

2 做好準備工作

首先，我們下載最新的Sencha Touch SDK并解壓至Web服務器根目錄。下載Sencha Touch 2.0的地址:http://cdn.sencha.io/touch/sencha-touch-2.0.0-pr1.zip。查看2.0文檔:http://docs.sencha.com/touch/2-0/。Sencha Touch 2.0 中所有被廣泛使用的類在API目錄中都有，在這些文檔里面還有很多演示示例，并可以修改它們。文檔中還包括所有組件，你可以清楚的了解這些組件。該文檔還詳細解釋了Layouts， Components and Classes，如何使用tab panels， forms and carousels。Sencha Touch 2.0 的新功能可去這里了解:http://html5mobi.gotoip1.com/discussion/61/sencha-touch-2-what-s-new-in-sencha-touch-2.0。

總而言之，需要一個免費的Sencha Touch SDK，一個本機的web服務器和一個支持HTML5的瀏覽器。如果你沒有Web服務器，建議安裝WAMP或者MAMP。

完成上述工作后，只需要用瀏覽器打開http://localhost/sencha-touch-folder，你就能看到歡迎界面了。

3 通過網絡學習示例

在http://extjs.org.cn/taxonomy/term/261里，有一個《使用sencha touch開發新浪微博iPhone界面》的示例，看了以后相信不少對sencha touch感興趣的人會為Javascript能開發出這樣的手機Web App應用而感到興奮。Sencha Touch提供相當多的原生UI組件，以滿足手機上的UI設計。這個示例以iPhone界面作為參考，使用Sencha Touch開發設計模仿iPhone界面:

以iPhone的界面目標作為參考對比Sencha Touch實現的界面(如表1):

具體實現見:http://www.imsankyu.com/archives/sencha-touch-develop-sina-weibo-iPhone-page/

再來看一個示例:

首先看index.html文件:

它引入了Sencha Touch框架的js文件和css文件和代碼文件:app.js，body標簽的內容為空。接下來看app.js文件中的內容，這里只是彈出一個警告對話框:

Ext.application({

name:’Sencha’，

launch:function(){

alert(‘launched’);

}});

接下來我們啟動Safari，看看他是否如我們預期的一樣，或者點擊代碼左側的“眼睛”圖標來查看運行的效果。警報消息的彈出意味著Sencha Touch已經正確地被加載運行了。現在開始構建界面:一個TabPanel，TabPanel是一個標簽式的界面，允許你在多個頁面之間瀏覽:

Ext.application({

name:’Sencha’，

launch:function(){

Ext.create(“Ext.TabPanel”，{

fullscreen:true，

items:[

{

title:’Home’，

iconCls:’home’，

html:’Welcome’

}]});}});

現在，TabPanel已經顯示在屏幕上了，但把標簽放在頂部有點不大好看、主頁按鈕似乎也有些單調、還沒有任何內容。

下面修改tabBarPosition配置項并添加一些HTML內容:

Ext.application({

name:’Sencha’，

launch:function(){

Ext.create(“Ext.TabPanel”，{

fullscreen:true，

tabBarPosition:’bottom’， // tabBar設在下方

items:[

{

title:’Home’，

iconCls:’home’， //添加Tab的圖標

html:[ //添加內容

‘’，

‘

Welcome to Sencha Touch

“

You’re creating the Getting Started app. This demonstrates how ”

“to use tabs，lists and forms to create a simple app

‘

Sencha Touch (2.0.0prl)

].join(“”)}]});}});

到目前為止，我們已經有了一些HTML內容了，調整一下格式。設置HTML內容的樣式，只要給panel添加cls配置項即可。下面再深入一下，我們希望在一個單獨的選項卡顯示我們的內容，在這里先選用一些虛構的數據。

Ext.application({

name:’Sencha’，

launch:function(){

Ext.create(“Ext.TabPanel”，{

fullscreen:true，

tabBarposition:’bottom’，

items:[

{

title:’Home’，

iconCls:’home’，

cls:’home’，

html:[

’’

’

Welcome to Sencha Touch

”

You’re creating the Getting Started app. This demonstrates how ”

”to use tabs， lists and forms to create a simple app

’

Sencha Touch (2.0.0pr1)

].join(””)

}，{

xtype:’list’，

title:’Blog’，

iconCls:’star’，

itemTp1:’{title}’，

store:{

fields:[’title’，’url’]，

data:[

{title:’Ext Scheduler 2.0’，url:’ext-scheduler-2-0-upgradin’}

{title:’Previewing Sencha Touch 2’，url:’sencha-touch-2-wha’ }

{title:’Sencha Con 2011’，url:’senchacon-2011-now-packen-w’}

{title:’Documentation in Ext JS 4’，url:’new-ext-js-4-docu’}

]}}]

}).setActiveItem(1);}});

最后添加一個聯系表格，一個tab，包含一個FromPanel和一個FieldSet:

Ext.application({

name:’Sencha’，

launch:function(){

Ext.create(“Ext.TabPanel”，{

fullscreen:true，

tabBarPosition:’bottom’，

items:[

{

title:’Home’，

iconCls:’home’，

cls: ’home’，

html:[

‘’，

‘

Welcome to Sencha Touch

“

You’re creating the Getting Started app. This demonstrates how ”

“to use tabs，lists and forms to create a simple app

‘

Sencha Touch (2.0.0prl)

].join(“”)

}，{

xtype:’list’，

title:’Blog’，

iconCls:’star’，

itemTpl:’{ title }’，

store:{

fields:[‘title’，’url’]，

data:[

{title:’Ext Scheduler 2.0’，url:’ext-scheduler-2-0-upgradin’}

{title:’Previewing Sencha Touch 2’，url:’sencha-touch-2-wha’ }

{title:’Sencha Con 2011’，url:’senchacon-2011-now-packen-w’}

{title:’Documentation in Ext JS 4’，url:’new-ext-js-4-docu’}

]}

}，{

title:’Contact’，

iconCls:'user'，

xtype:'formpanel'，

url:'contact.php'，

layout:'vbox'，

items:[ {

xtype:'fieldset'，

title:'Contact Us'，

instructions:'(email address is optional)'，

items:[ {

xtype:'textfield'，

label:'Name'，

}， {

xtype:'emailfield'，

label:'Email'，

}， {

xtype:'textareafield'，

label:'Message'，

} ]}， {

xtype:'button'，

text:'Send'，

ui:'confirm'，

handler: function() {

this.up('formpanel').submit();

} } ]]

}).setActiveItem(2);}});

在第三個tab中，添加了一個表格，其中包含三個字段和一個提交按鈕，使用了VBOX布局來定位下方的提交按鈕，fieldset配置了一個title和一些instructions，用了一個textfield，一個emailfield和一個textareafield。

4 結論

Sencha Touch需要有以下文件:一個HTML文件index.html，其中引入Sencha Touch框架以及應用程序文件，一個應用程序文件app.js，它定義主屏幕的圖標和程序啟動時所需要做的事件，框架文件的副本touch。現在我們看到了已經完成了的非常基本的應用程序，往下可以學習使用框架的其他部分了，網上提供許多開發指南和組件的示例供大家學習，相信隨著Beta版的發展，將會有更多的指南為構建不同規模的應用程序而推出。