使用Eclipse開發(fā)Sencha Touch框架的教程是本文要介紹的內(nèi)容，主要是來了解Sencha Touch框架的開發(fā)快速入門學(xué)習(xí)，具體內(nèi)容的實(shí)現(xiàn)來看本文詳解。

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

Sencha Touch是一個(gè)以javascript作為開發(fā)語(yǔ)言的html5框架，與json緊密相關(guān)，開始之前，建議先去了解一下json的相關(guān)資料。

Sencha Touch

開發(fā)環(huán)境

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

Help->Install New SoftWare ->add在彈出窗口輸入以下內(nèi)容

Spket

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

2、輸入“Sencha touch”點(diǎn)擊OK；

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

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

5、設(shè)置新的ExtJS Profile，選中并點(diǎn)擊“JavaScript Profiles” 對(duì)話框右手邊的“Defalut”按鈕；

6、新建一個(gè).js文件，已經(jīng)有智能提示效果了。

7、***確認(rèn)你的.js文件是用 Spket Javascript Editor 打開。右鍵點(diǎn)擊文件，

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

代碼提示功能較弱，不能***支持sencha touch。但是其cs5.5版本對(duì)html5的支持相當(dāng)優(yōu)秀。

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

調(diào)試工具

目前這個(gè)框架對(duì)桌面瀏覽器的支持普遍不佳，但是對(duì)于ios和android的瀏覽器支持則相當(dāng)***。

使用chrome瀏覽器進(jìn)行調(diào)試吧，firefox不支持。

使用這個(gè)框架進(jìn)行開發(fā)的配置工作

***步，創(chuàng)建一個(gè)空白的html頁(yè)面，用<script>標(biāo)簽引入sencha-touch.js <link>標(biāo)簽引入sencha-touch.css。

第二步，為我們的html頁(yè)面新建一個(gè)js文件，我們將用這個(gè)文件創(chuàng)建出我們的sencha touch頁(yè)面。

簡(jiǎn)單的HelloWorld程序

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

具體見配套源碼helloTouch.

使用控件

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

一、使用new關(guān)鍵字實(shí)例化控件。

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

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

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

***種方式，瀏覽器會(huì)立即渲染Panel，第二種方式，等到myPanel被調(diào)用的時(shí)候?yàn)g覽器才渲染Panel。

接下來把myPanel作為應(yīng)用的顯示內(nèi)容。

在launch()方法內(nèi)加上如下語(yǔ)句：

myApp.views.viewport = myPanel;   

小結(jié)：使用Eclipse開發(fā)Sencha Touch框架教程的內(nèi)容介紹完了，希望通過本文的學(xué)習(xí)能對(duì)你有所幫助！