使用Eclipse開發Sencha Touch框架的教程是本文要介紹的內容，主要是來了解Sencha Touch框架的開發快速入門學習，具體內容的實現來看本文詳解。

首先跟其他的許多框架一樣 Sencha Touch給我們提供了一系列的控件 ，使用這些控件，我們可以很方便地搭建起出能夠與iphone手機應用相媲美的html5頁面。***支持觸控操作，彌補了傳統手機網站觸控體驗不佳的缺陷。

Sencha Touch是一個以javascript作為開發語言的html5框架，與json緊密相關，開始之前，建議先去了解一下json的相關資料。

Sencha Touch

開發環境

Js開發有太多的Ide可選。建議使用Eclipse，安裝skpet插件進行開發，代碼提示比較完整。

Help->Install New SoftWare ->add在彈出窗口輸入以下內容

Spket

1、Window → Preferences → Spket → JavaScript Profiles → New ；

2、輸入“Sencha touch”點擊OK；

3、選擇“Sencha touch” 并點擊“Add Library”然后在下拉條中選取“ExtJS”；

4、選擇 “ExtJS”并點擊“Add File”，然后在你的sencha-touch-1.1.0目錄中選取“sencha-touch-debug-w-comments.js” 文件；

5、設置新的ExtJS Profile，選中并點擊“JavaScript Profiles” 對話框右手邊的“Defalut”按鈕；

6、新建一個.js文件，已經有智能提示效果了。

7、***確認你的.js文件是用 Spket Javascript Editor 打開。右鍵點擊文件，

Open with-> Skpet Javascript Editor：   
Dreamwaver可以使用Spket(Dreamweaver插件) 

代碼提示功能較弱，不能***支持sencha touch。但是其cs5.5版本對html5的支持相當優秀。

Visual Studio 暫時找不到合適的方法。如果要用的話可以參考這篇文章

調試工具

目前這個框架對桌面瀏覽器的支持普遍不佳，但是對于ios和android的瀏覽器支持則相當***。

使用chrome瀏覽器進行調試吧，firefox不支持。

使用這個框架進行開發的配置工作

***步，創建一個空白的html頁面，用<script>標簽引入sencha-touch.js <link>標簽引入sencha-touch.css。

第二步，為我們的html頁面新建一個js文件，我們將用這個文件創建出我們的sencha touch頁面。

簡單的HelloWorld程序

var App = new Ext.Application({ //利用框架的Application類的構造函數構造一個應用  
name: 'myApp', //為這個應用指定名稱  
useLoadMask: true,  
launch: function () { //這是程序的入口  
Ext.Msg.alert('Hi', 'Hello Sencha Touch', Ext.emptyFn);//顯示一個彈出窗口  
}  
}); 

具體見配套源碼helloTouch.

使用控件

使用控件有兩種方法，都很簡單。下面以panel控件為例：

一、使用new關鍵字實例化控件。

var myPanel = new Ext.Panel({  
id: 'myPanel' ,  
html: 'Oh, this is a Panel!'  
}); 

二、使用json格式定義控件。

var myPanel = {  
xtype: 'panel', //仔細觀察一下他們之間的差別，應該很容易理解  
id: myPanel ,  
html: 'Oh, this is a Panel!'  
} 

***種方式，瀏覽器會立即渲染Panel，第二種方式，等到myPanel被調用的時候瀏覽器才渲染Panel。

接下來把myPanel作為應用的顯示內容。

在launch()方法內加上如下語句：

myApp.views.viewport = myPanel;   

小結：使用Eclipse開發Sencha Touch框架教程的內容介紹完了，希望通過本文的學習能對你有所幫助！