使用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框架教程的內容介紹完了，希望通過本文的學習能對你有所幫助！