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