最近學(xué)ajax，接觸到了Extjs這個(gè)強(qiáng)大的框架。我想通過(guò)我的學(xué)習(xí)筆記，最后可以讓大家上手在項(xiàng)目中使用Ext。首先我會(huì)寫(xiě)一些基本的用于入門(mén)Ext的文章，打好基礎(chǔ)是很重要的。在了解基礎(chǔ)后，可能會(huì)用Ext+ajax開(kāi)發(fā)一個(gè)簡(jiǎn)單的小項(xiàng)目，會(huì)一點(diǎn)一滴的講解項(xiàng)目開(kāi)發(fā)過(guò)程，希望能給大家?guī)?lái)收獲！因?yàn)槲冶救艘苍趯W(xué)習(xí)這個(gè)框架，所以對(duì)文章有什么建議請(qǐng)?zhí)岢?，這樣可能會(huì)讓我學(xué)到更多。


看到這幅圖，你可能認(rèn)為是某個(gè)軟件，或者是Flash、Flex、silverlight等等，但這是javascript+Css實(shí)現(xiàn)的。



      在看這樣式與效果，如果加在自己的項(xiàng)目里，用戶視覺(jué)與操作的體驗(yàn)應(yīng)該會(huì)很爽吧。 還有更多的特效就不一一截圖了。
      下面開(kāi)始說(shuō)一下這個(gè)組件，ExtJs是一個(gè)不錯(cuò)的Ajax框架，是用javascript寫(xiě)的。效果什么樣上面也看到了。我們能夠把ExtJs應(yīng)用到任何web開(kāi)發(fā)語(yǔ)言中。他的客戶端效果是非常強(qiáng)大的，同時(shí)Ext也提供了與服務(wù)器交互的機(jī)制，用起來(lái)非常方便，Ext與服務(wù)器交互的文章后面會(huì)寫(xiě)到。
      在應(yīng)用之前我們需要先獲得這個(gè)框架，可以去 http:///products/extjs/download.php 官網(wǎng)下載，開(kāi)源的。下載完畢解壓后會(huì)得到如下目錄。


adapter：負(fù)責(zé)將里面提供的第三方底層庫(kù)（包括Ext自帶的）映射為Ext所支持的底層庫(kù)。
build：壓縮后Ext全部源碼（分類(lèi)存放）
docs：API幫助文檔
examples：一些Extjs做出的效果示例
resources：Ext UI資源文件目錄，css、圖片都在這
source：無(wú)壓縮Ext全部的源碼
ext-all.js  ：壓縮后Ext全部源碼，關(guān)鍵文件啊，500多K
ext-all-debug.js：無(wú)壓縮Ext全部源碼（用于調(diào)試）
ext-core.js ：核心組件，包括source/core下所有類(lèi)
ext-core-debug.js：無(wú)壓縮核心組件
       
       接下來(lái)將在一個(gè)純靜態(tài)的html頁(yè)面中做測(cè)試，如果想應(yīng)用ExtJs首先需要導(dǎo)入3個(gè)腳本文件一個(gè)樣式表
      這里要說(shuō)明一下，在Extjs文件加載完畢后，會(huì)執(zhí)行Ext.onReady中指定的函數(shù)，我們可以用簡(jiǎn)單的代碼做一個(gè)測(cè)試。
      兩種寫(xiě)法可以實(shí)現(xiàn)同一個(gè)效果
      注意Ext.onReady(start)不需要加()。
      Ext.MessageBox.alert("ok","Extjs框架已加載！");用于輸出一個(gè)對(duì)話框。
      Ext.MessageBox.alert('標(biāo)題','彈出內(nèi)容');它也可以寫(xiě)成Ext.Msg.alert('','');
運(yùn)行效果如下

      一個(gè)alert對(duì)話框可以輕松用Extjs來(lái)實(shí)現(xiàn)了。prompt('','');在Extjs中同樣存在相對(duì)應(yīng)用法。
      這個(gè)語(yǔ)法稍有麻煩, Ext.MessageBox.prompt('標(biāo)題','說(shuō)明:',完畢后執(zhí)行的函數(shù));  執(zhí)行的函數(shù)需要有兩個(gè)參數(shù),button與text。button用來(lái)判斷用戶選擇了取消還是確定選項(xiàng)。確定則為該值為'ok'。text為輸入的文字。

      只列舉兩個(gè)小例子做說(shuō)明，還有confim等用法都相似。
      還有一個(gè)比較常用，也比較容易理解的Window框。
     
      這個(gè)漂亮框框可以拖動(dòng)，點(diǎn)X可以關(guān)閉。
      用法如下：

      這里就需要?jiǎng)?chuàng)建一個(gè)Ext.Window的對(duì)象，調(diào)用show方法進(jìn)行顯示。
      Ext.Window在構(gòu)造函數(shù)中可以傳入很多參數(shù)，這里只用到了title、width、height和body區(qū)域顯示的內(nèi)容。
      new Ext.Window({title:"",width:300,height:200,html:'This is the body.'});
      title:""  設(shè)置標(biāo)題
      width:300 寬度
      height:200 高度
      html:'xxxx'   可以放置任何html代碼   

下文摘自資料：

Element：Ext的核心

大多數(shù)的JavaScript操作都需要先獲取頁(yè)面上的某個(gè)元素的引用（reference）,好讓你來(lái)做些實(shí)質(zhì)性的事情。傳統(tǒng)的JavaScript做法，是通過(guò)ID獲取Dom節(jié)點(diǎn)的：

var myDiv = document.getElementById('myDiv');

這毫無(wú)問(wèn)題，不過(guò)這樣單單返回一個(gè)對(duì)象（DOM節(jié)點(diǎn)），用起來(lái)并不是太實(shí)用和方便。為了要用那節(jié)點(diǎn)干點(diǎn)事情，你還將要手工編寫(xiě)不少的代碼；另外，對(duì)于不同類(lèi)型瀏覽器之間的差異，要處理起來(lái)可真頭大了。

進(jìn)入Ext.element 對(duì)象。元素（element）的的確確是Ext的心臟地帶，--無(wú)論是訪問(wèn)元素（elements）還是完成一些其他動(dòng)作，都要涉及它。Element的 API是整個(gè)Ext庫(kù)的基礎(chǔ)，如果你時(shí)間不多，只是想了解Ext中的一兩個(gè)類(lèi)的話，Element一定是首選！

由ID獲取一個(gè)Ext Element 的相應(yīng)代碼如下（首頁(yè)ExtStart.htm 包含一個(gè)ID為“myDiv”的 div，然后，在ExtStart.js中加入下列語(yǔ)句）： The corresponding code to get an Ext Element by ID looks like this (the starter page ExtStart.html contains a div with the id "myDiv," so go ahead and add this code to ExtStart.js):

Ext.onReady(function() {



var myDiv = Ext.get('myDiv');



});

再回頭看看Element對(duì)象，發(fā)現(xiàn)什么有趣的東東呢？

• Element包含了常見(jiàn)的DOM方法和屬性，提供一個(gè)快捷的、統(tǒng)一的、跨瀏覽器的接口（若使用Element.dom的話，就可以直接訪問(wèn)底層DOM的節(jié)點(diǎn)。）；
• Element.get()方法提供內(nèi)置緩存（Cache)，多次訪問(wèn)同一對(duì)象效率上有極大優(yōu)勢(shì)；
• 內(nèi)置常用的DOM節(jié)點(diǎn)的動(dòng)作，并且是跨瀏覽器的定位的位置、大小、動(dòng)畫(huà)、拖放等等（添加/移除 CSS 類(lèi), 添加/移除事件處理程序, 定位, 改變大小, 動(dòng)畫(huà), 拖放）。

這意味著你可用少量的代碼來(lái)做各種各樣的事情，這里僅僅是一個(gè)簡(jiǎn)單的例子（完整的列表在Element API 文檔中）。

繼續(xù)在ExtStart.js中，在剛才我們獲取好myDiv的位置中加入：

myDiv.highlight();      //黃色高亮顯示然后漸退



myDiv.addClass('red');  // 添加自定義CSS類(lèi) (在ExtStart.css定義)



myDiv.center();         //在視圖中將元素居中



myDiv.setOpacity(.25);  // 使元素半透明

獲取多個(gè)DOM的節(jié)點(diǎn)

通常情況下，想獲取多個(gè)DOM的節(jié)點(diǎn)，難以依靠ID的方式來(lái)獲取。有可能因?yàn)闆](méi)設(shè)置ID,或者你不知道ID,又或者直接用ID方式引用有太多元素了。這種情況下，你就會(huì)不用ID來(lái)作為獲取元素的依據(jù)，可能會(huì)用屬性（attribute）或CSS Classname代替?；谝陨系脑?，Ext引入了一個(gè)異常強(qiáng)大的Dom Selector庫(kù)，叫做DomQuery。

DomQuery可作為單獨(dú)的庫(kù)使用，但常用于Ext，你可以在上下文環(huán)境中（Context）獲取多個(gè)元素，然后通過(guò)Element接口調(diào)用。令人欣喜的是，Element對(duì)象本身便有Element.selcect的方法來(lái)實(shí)現(xiàn)查詢，即內(nèi)部調(diào)用DomQuery選取元素。這個(gè)簡(jiǎn)單的例子中，ExtStart.htm包含若干段落（<p>標(biāo)簽），沒(méi)有一個(gè)是有ID的，而你想輕松地通過(guò)一次操作馬上獲取每一段，全體執(zhí)行它們的動(dòng)作，可以這樣做：

// 每段高亮顯示



Ext.select('p').highlight();

Element.select在這個(gè)例子中的方便性顯露無(wú)疑。它返回一個(gè)復(fù)合元素，能通過(guò)元素接口（Element interface）訪問(wèn)每個(gè)元素。這樣做的好處是可不用循環(huán)和不分別訪問(wèn)每一個(gè)元素。

DomQuery的選取參數(shù)可以是一段較長(zhǎng)的數(shù)組，其中包括W3C CSS3 Dom選取器、基本XPatch、HTML屬性和更多，請(qǐng)參閱DomQuery API文檔以了解這功能強(qiáng)大的庫(kù)個(gè)中細(xì)節(jié)。

響應(yīng)事件

到這范例為止，我們所寫(xiě)的代碼都是放在onReady中，即當(dāng)頁(yè)面加載后總會(huì)立即執(zhí)行，功能較單一——這樣的話，你便知道，如何響應(yīng)某個(gè)動(dòng)作或事件來(lái)執(zhí)行你希望做的事情，做法是，先分配一個(gè)function，再定義一個(gè)event handler事件處理器來(lái)響應(yīng)。我們由這個(gè)簡(jiǎn)單的范例開(kāi)始，打開(kāi)ExtStart.js，編輯下列的代碼：

Ext.onReady(function() {



Ext.get('myButton').on('click', function(){



alert("你單擊了按鈕");



});



});

代碼依然會(huì)加載好頁(yè)面后執(zhí)行，不過(guò)重要的區(qū)別是，包含alert()的function是已定義好的，但它不會(huì)立即地被執(zhí)行，是分配到按鈕的單擊事件中。用淺顯的文字解釋，就是：獲取ID為'myDottom'元素的引用，監(jiān)聽(tīng)任何發(fā)生這個(gè)元素上被單擊的情況，并分配一個(gè)function,以準(zhǔn)備任何單擊元素的情況。

一般來(lái)說(shuō)，Element.select也能做同樣的事情，即作用在獲取一組元素上。下一例中，演示了頁(yè)面中的某一段落被單擊后，便有彈出窗口：

Ext.onReady(function() {



Ext.select('p').on('click', function() {



alert("你單擊了一段落;");



});



});

這兩個(gè)例子中，事件處理的function均是簡(jiǎn)單幾句，沒(méi)有函數(shù)的名稱，這種類(lèi)型函數(shù)稱為“匿名函數(shù)（anonymous function）”，即是沒(méi)有名的的函數(shù)。你也可以分配一個(gè)有名字的event handler,這對(duì)于代碼的重用或多個(gè)事件很有用。下一例等效于上一例：

Ext.onReady(function() {



var paragraphClicked = function() {



alert("你單擊了一段落;");



}



Ext.select('p').on('click', paragraphClicked);



});

到目前為止，我們已經(jīng)知道如何執(zhí)行某個(gè)動(dòng)作。但當(dāng)事件觸發(fā)時(shí)，我們?nèi)绾蔚弥@個(gè)event handler執(zhí)行時(shí)是作用在哪一個(gè)特定的元素上呢？要明確這一點(diǎn)非常簡(jiǎn)單，Element.on方法傳入到even handler的function中（我們這里先討論第一個(gè)參數(shù)，不過(guò)你應(yīng)該瀏覽API文檔以了解even handler更多的細(xì)節(jié)）。在我們之前的例子中，function是忽略這些參數(shù)的，到這里可有少許的改變，——我們?cè)诠δ苌咸峁┝烁顚哟蔚目刂?。必須先說(shuō)明的是，這實(shí)際上是Ext的事件對(duì)象（event object）,一個(gè)跨瀏覽器和擁有更多控制的事件的對(duì)象。例如，可以用下列的語(yǔ)句，得到這個(gè)事件響應(yīng)所在的DOM節(jié)點(diǎn)：

Ext.onReady(function() {



var paragraphClicked = function(e) {



Ext.get(e.target).highlight();



}



Ext.select('p').on('click', paragraphClicked);



});

注意得到的e.target是DOM節(jié)點(diǎn)，所以我們首先將其轉(zhuǎn)換成為EXT的Elemnet元素，然后執(zhí)行欲完成的事件，這個(gè)例子中，我們看見(jiàn)段落是高亮顯示的。

      好了，今天就簡(jiǎn)單寫(xiě)幾個(gè)讓大家認(rèn)識(shí)下。夜深了，該睡了，以后學(xué)了繼續(xù)寫(xiě)。這東西太有用了。