k本手冊(cè)所有內(nèi)容均粘貼

1、目錄EXT 中文手冊(cè)1EXT簡(jiǎn)介4目錄4Ext5開(kāi)始！5Element：Ext的.5獲取多個(gè)DOM的節(jié)點(diǎn)6響應(yīng).6使用Widgets8使用Ajax10EXT源碼概述12揭示源代碼12發(fā)布Ext源碼時(shí)的一些細(xì)節(jié)13我應(yīng)該從哪里開(kāi)始？14適配器Adapters14Core14Javascript中的作用域（scope）14事前準(zhǔn)備14定義14正式開(kāi)始15window對(duì)象15理解作用域16變量的可見(jiàn)度16EXT程序入門17事前準(zhǔn)備17需要些什么？17applayout.html17applayout.js18公開(kāi)Public、私有Private、的Privileged？20重寫(xiě)公共變量22重寫(xiě)（Ov

2、erriding）公共函數(shù)22DomQuery基礎(chǔ)23DomQuery基礎(chǔ)23擴(kuò)展EXT組件30文件的創(chuàng)建30Let's go34完成36EXT的布局（Layout）38簡(jiǎn)單的例子39加入內(nèi)容42開(kāi)始使用Grid52步驟一 定義數(shù)據(jù)(Data Definition)52步驟二 列模型（Column M）.53Grid組件的簡(jiǎn)易分頁(yè)54G rid 數(shù) 據(jù)54怎么做一個(gè)分頁(yè)的 G r i d55分頁(yè)欄 T o o l b a r55EXT組件56創(chuàng)建簡(jiǎn)易菜單56各種 I t e m 的類型58I tem 屬 性58在 U I 中擺 放菜單58的分 配方式：59練一練61動(dòng)態(tài)添加菜單按鈕到

3、T o o l b a r61更方便的是62下一步是62模板（Templates）起步62第一步 您的HTML模板62第二步，將數(shù)據(jù)加入到模板中63下一步63學(xué)習(xí)利用模板（Templates）的格式化功能63正式開(kāi)始63下一步65處理65非?；A(chǔ)的例子65處理函數(shù)的作用域65傳遞參數(shù)66類設(shè)計(jì)66對(duì)象創(chuàng)建66使用構(gòu)造器函數(shù)67方法共享67表單組件入門68表單體68創(chuàng)建表單字段68完成表單69下一步70為一個(gè)表單填充或提交數(shù)據(jù)70讓我們開(kāi)始吧70我們的數(shù)據(jù)71EXT中的繼承72補(bǔ)充資料73Ext 2 概述73組件模型 Component M75容器模型Container M.79布局 Layou

4、ts80Grid83XTemplate83DataView84其它新組件84EXT2 簡(jiǎn)介85Ext85開(kāi)始！86Element：Ext的.86獲取多個(gè)DOM的節(jié)點(diǎn)87響應(yīng).87使用Widgets89編輯 使用Ajax92TabPanel基礎(chǔ)95Step 1: 創(chuàng)建 HTML 骨架95Step 2: Ext結(jié)構(gòu)的構(gòu)建96Step 3: 創(chuàng)建Tab邏輯98EXT 簡(jiǎn)介無(wú)論你是 Ext 庫(kù)的新手，抑或是想了解 Ext 的人，本篇文章的內(nèi)容都適合你。本文將簡(jiǎn)單地介紹 Ext的幾個(gè)基本概念，和如何快速地做出一個(gè)動(dòng)態(tài)的頁(yè)面并運(yùn)行起來(lái)，假設(shè)讀者已具備了一些 JavaScript 經(jīng)驗(yàn)和初級(jí)了解 HTML

5、Dom。目錄 ······1Ext2 開(kāi)始！3 Element：Ext的4 獲取多個(gè)DOM的節(jié)點(diǎn)5 響應(yīng)6 使用Widgetso oo6.1 MessageBox6.2 Grid6.3 還有的.·7 使用Ajaxo oo7.1 PHP7.2 ASP.Net7.3 Cold FusionExt如果你未曾過(guò)，那應(yīng)從這里最新版本的Ext。你的需求，有幾個(gè)不同的彈性選項(xiàng)。通常地，最穩(wěn)定的版本，是較多人的選擇。解包后，那個(gè)example 文件夾便是一個(gè)探索Ext 的好地方！開(kāi)始！使用Ext，來(lái)完成一些JavaScript 任務(wù)。Zip

6、 文件包括三個(gè)文件：ExtStart html, ExtStart.js 和 ExtStart.css。解包這三個(gè)文件到 Ext 的安裝目錄中（例如，Ext 是在“C:codeExtv1.0”中，那應(yīng)該在"v1.0"里面新建目錄“tutorial”。雙擊 ExtStart htm，接著你的瀏覽器打開(kāi)啟動(dòng)頁(yè)面，應(yīng)該會(huì)有一條消息告訴你配置已完畢。如果是一個(gè) Javascript 錯(cuò)誤，請(qǐng)按照頁(yè)面上的指引操作。在你常用的IDE 中或文本編輯器中，打開(kāi)ExtStart.js 看看：Ext.onReady 可能是你接觸的第一個(gè)方法。這個(gè)方法是指當(dāng)前 DOM 加載完畢后，保證頁(yè)面內(nèi)的所

7、有元素能被 Script（reference）。你可刪除 alert()那行，加入一些實(shí)際用途的代碼試試：Element：Ext 的大多數(shù)的JavaScript 操作都需要先獲取頁(yè)面上的某個(gè)元素（reference）,好讓你來(lái)做些實(shí)質(zhì)性的事情。傳統(tǒng)的JavaScript 方法，是通過(guò)ID 獲取 Dom 節(jié)點(diǎn)的：這毫無(wú)問(wèn)題，不過(guò)這樣單單返回一個(gè)對(duì)象（DOM 節(jié)點(diǎn)），用起來(lái)并不是太實(shí)用和方便。為了要用那節(jié)點(diǎn)干點(diǎn)事情，你還將要手工編寫(xiě)不少的代碼；另外，對(duì)于不同類型瀏覽器之間的差異，要你處理起來(lái)可真頭大了。進(jìn)入Ext.element 對(duì)象。元素（element）的的確確是Ext 的心臟地帶，-無(wú)論是元

8、素（elements）還是完成一些其他動(dòng)作，都要涉及它。Element 的 API 是整個(gè) Ext 庫(kù)的基礎(chǔ)，如果你時(shí)間不多，只是想了解Ext 中的一兩個(gè)類的話，Element 一定是首選！由ID 獲取一個(gè)Ext Element 如下（首頁(yè)ExtStart htm 包含一個(gè)div，ID 名字為“myDiv”，然后，在ExtStart.js中加入下列語(yǔ)句）：var myDiv = document.getElementById('myDiv');Ext.onReady(function() alert("Congratulations! You have Ext con

9、figured correctly!"););Download Example File· IntroToExt.zip再回頭看看Element 對(duì)象，發(fā)現(xiàn)什么有趣的東東呢？·Element 包含了常見(jiàn)的 DOM 方法和屬性，提供一個(gè)快捷的、統(tǒng)一的、跨瀏覽器的接口（若使用Element.dom 的話，就可以直接底層 DOM 的節(jié)點(diǎn)。）；··Element.get()方法內(nèi)置緩存處理（Cache)，多次同一對(duì)象效率上有極大優(yōu)勢(shì)；內(nèi)置常用的 DOM 節(jié)點(diǎn)的動(dòng)作，并且是跨瀏覽器的的位置、大小、動(dòng)畫(huà)、拖放等等（add/removeCSS classes

10、, add/remove event handlers, positioning, sizing, animation, drag/drop）。這意味著你可用少量的代碼來(lái)做各種各樣的事情，這里僅僅是一個(gè)簡(jiǎn)單的例子（完整的列表在ElementAPI 中）。繼續(xù)在ExtStart.js 中，在剛才我們獲取好 myDiv 的位置中加入：獲取多個(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）或 C

11、SS Classname 代替?；谝陨系腟elector 庫(kù)，叫做 DomQuery。，Ext 引入了一個(gè)功能異常強(qiáng)大的DomDomQuery 可作為單獨(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 包含若干段落（，即），沒(méi)有一個(gè)是有 ID 的，而你想輕松地通過(guò)一次操作馬上獲取每一段，全體執(zhí)行它們的動(dòng)作，可以這樣做：DomQuery 的選取參數(shù)是一段較長(zhǎng)的數(shù)組

12、，其中包括 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.select('p').highlight();myDiv.highlight();/黃色高亮顯示

13、然后漸退myDiv.addClass('red'); / 添加自定義 CSS 類 (在ExtStart.css 定義) myDiv.center();/在視圖中將元素居中myDiv.setOpacity(.25); / 使元素半透明Ext.onReady(function() var myDiv = Ext.get('myDiv'););碼：加載好頁(yè)面，代碼依然會(huì)執(zhí)行，不過(guò)區(qū)別是，包含alert()的function 是已定義好的，但它立即地，被執(zhí)行，是分配到按鈕的單擊中。用淺顯的文字解釋，就是：獲取ID 為'myDottom'元素的任何發(fā)生這個(gè)

14、元素上被單擊的情況，并分配一個(gè)function,以準(zhǔn)備任何單擊元素的情況。正路來(lái)說(shuō)，Element.select 也能做同樣的事情，即作用在獲取一組元素上。下一例中，演示了頁(yè)面中的某一段落被單擊后，便有彈出窗口：這兩個(gè)例子中，處理的 function 均是簡(jiǎn)單幾句，沒(méi)有函數(shù)的名稱，這種類型函數(shù)稱為“函數(shù)（anonymous function）”，即是沒(méi)有名的的函數(shù)。你也可以分配一個(gè)有名字的 event handler,這對(duì)于代碼的重用或多個(gè)很有用。下一例等效于上一例：觸發(fā)時(shí)，我們?nèi)绾蔚弥@個(gè) event handler到目前為止，我們已經(jīng)知道如何執(zhí)行某個(gè)動(dòng)作。但當(dāng)執(zhí)行時(shí)是作用在哪一個(gè)特定的元素

15、上呢？要明確這一點(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(

16、e.target).highlight();Ext.select('p').on('click', paragraphClicked);Ext.onReady(function() var paragraphClicked = function() alert("You clicked a paragraph");Ext.select('p').on('click', paragraphClicked););Ext.onReady(function() Ext.select('p').on(&#

17、39;click', function() alert("You clicked a paragraph");););Ext.onReady(function() Ext.get('myButton').on('click', function() alert("You clicked the button");););注意得到的e.target 是 DOM 節(jié)點(diǎn)，所以我們首先將其轉(zhuǎn)換成為EXT 的Elemnet 元素，然后執(zhí)行欲完，這個(gè)例子中，我們看見(jiàn)段落是高亮顯示的。成的使用 Widgets除了我們已經(jīng)討論過(guò)的

18、JavaScript 庫(kù)，當(dāng)前的 Ext 亦包括了一系列的最前端的 JavaScirptUI 組件庫(kù)。文本以一個(gè)常用的widget 為例子，作簡(jiǎn)單的介紹。MessageBox比起略為沉悶的“HelloWolrd”消息窗口，我們做少許變化，前面我們寫(xiě)的代碼是，單擊某個(gè)段落便會(huì)高亮顯示，現(xiàn)在是單擊段落，在消息窗口中顯示段落內(nèi)容出來(lái)。在上面的paragraphClicked 的function 中，將這行代碼：替換為：這里有些新的概念需要討論一下。在第一行中我們創(chuàng)建了一個(gè)局部變量（Local Variable）來(lái)保存某個(gè)元素的，即被單擊的那個(gè) DOM 節(jié)點(diǎn)（本例中，DOM 節(jié)點(diǎn)指的是段落paragr

19、ah,事因我們已經(jīng)定義該事件與< p>發(fā)生關(guān)聯(lián)的了）。為什么要這樣做呢？嗯.觀察上面的代碼，我們需要同一元素來(lái)高亮顯示，在 MessageBox 中也是同一元素作為參數(shù)使用。一般來(lái)說(shuō)，多次重復(fù)使用同一值（Value）或?qū)ο?，是一個(gè)不好的方式，所以，作為一個(gè)具備良好 OO 思維的開(kāi)發(fā)者，應(yīng)該是將其分配到一個(gè)局部變量中，反復(fù)使用這變量！現(xiàn)在，為了我們接下來(lái)闡述新概念的演示，請(qǐng)觀察 MessageBox 的調(diào)用。乍一看，這像一連串的參數(shù)傳入到方法中，但仔細(xì)看，這是一個(gè)非常特別的語(yǔ)法。實(shí)際上，傳入到MessageBox.show 的只有一個(gè)參數(shù)： 一個(gè)Object literal,包含一組

20、屬性和屬性值。在 Javascript 中，Object Literal 是動(dòng)態(tài)的，你可在任何時(shí)候用和 創(chuàng)建一個(gè)典型的對(duì)象(object)。其中的字符由一系列的 name/value 組成的屬性，屬性的格式是propertyname:property value。在整個(gè) Ext 中，你將會(huì)經(jīng)常遇到這種語(yǔ)法，因此你應(yīng)該馬上消化并吸收這個(gè)知識(shí)點(diǎn)！var paragraph = Ext.get(e.target); paragraph.highlight(); Ext.MessageBox.show(title: 'Paragraph Clicked',msg: paragraph.

21、dom.innerHTML, width:400,buttons: Ext.MessageBox.OK, animEl: paragraph);Ext.get(e.target).highlight();(Widget 原意為“小器件”，現(xiàn)指頁(yè)面中UI 控件);使用Object Literal 的性，亦可不管順序地是什么呢？主要的是“可伸縮性（flexibility）”的考慮"，隨時(shí)可新增、刪除屬。而方法不需要改變。這也是多個(gè)參數(shù)的情況下，為最終開(kāi)發(fā)者帶來(lái)不少的方便（本例中的MessageBox.show()。例如，我們說(shuō)這兒的foo.action 方法，有四個(gè)參數(shù)，而只有一個(gè)是你必

22、須傳入的。本例中，你想像中的代碼可能會(huì)是這樣的 foo.action(null, null, null, 'hello').,若果那方法用 Object Literal 來(lái)寫(xiě)，卻是這樣， foo.action( param4: 'hello' )，這更易用和易讀。GridGrid 是 Ext 中人們最想先睹為快的和最為流行 Widgets 之一。好，讓我們看看怎么輕松地創(chuàng)建一個(gè)Grid 并運(yùn)行。用下列代碼替換ExtStart.js 中全部語(yǔ)句：Ext.onReady(function() var myData = 'Apple',29.89,0.

23、24,0.81,'9/1 12:00am','Ext',83.81,0.28,0.34,'9/12 12:00am','',71.72,0.02,0.03,'10/1 12:00am','Microsoft',52.55,0.01,0.02,'7/4 12:00am','Yahoo!',29.01,0.42,1.47,'5/22 12:00am'var ds = new Ext.data.Store(proxy: new Ext.data.Memory

24、Proxy(myData), reader: new Ext.data.ArrayReader(id: 0, name: 'company',name: 'price', type: 'float',name: 'change', type: 'float',name: 'pctChange', type: 'float',name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia')

25、;ds.load();var colM= new Ext.grid.ColumnM(header:"Company",width:120,sortable:true,dataIndex:'company',header: "Price", width: 90, sortable: true, dataIndex: 'price',header: "Change", width: 90, sortable: true, dataIndex: 'change',header: "%

26、 Change", width: 90, sortable: true, dataIndex:'pctChange',header: "Last Updated", width: 120, sortable: true,這看上去很復(fù)雜，但實(shí)際上加起來(lái)，只有七行代碼。第一行創(chuàng)建數(shù)組并作為數(shù)據(jù)源。實(shí)際案例中， 你很可能從數(shù)據(jù)庫(kù)、或者WebService 那里得到動(dòng)態(tài)的數(shù)據(jù)。接著，我們創(chuàng)建并加載data store， data store 將會(huì)告訴 Ext 的底層庫(kù)接手處理和格式化這些數(shù)據(jù)。接著，我們定義一個(gè) column 模型，用來(lái)輕松地調(diào)配Grid

27、的每一列參數(shù)。最后我們生成這個(gè)Grid,傳入data store 和column 模型兩個(gè)對(duì)象，進(jìn)行渲染并選好第一行。不是太吧？如果一切順利，完成之后你會(huì)看到像這樣的：當(dāng)然，你可能未掌握這段代碼的某些細(xì)節(jié)（像 MemoryProxy 究竟是什么？）但先不要緊，這個(gè)例子的目的是告訴你，用少量的代碼，創(chuàng)建一個(gè)富界面的多功能的 UI 組件而已這是完全可能的，只要讀者您有學(xué)習(xí)。這兒有許多學(xué)習(xí)Grid 的。Ext Grid、交叉Gird 演示和 Grid API 文檔。還有的.這只是冰山一角。還有一打的UI Widgets 可以供調(diào)用，如 layouts, tabs,view 等等。請(qǐng)參閱 API 文檔

28、中范例演示。s, toolbars, dialogs, tree使用 Ajax在弄好一些頁(yè)面后，你已經(jīng)懂得在頁(yè)面和之間的交互原理（interact）。接下來(lái)，你應(yīng)該掌握的是，怎樣與 服務(wù)器（remote server）交換數(shù)據(jù)，常見(jiàn)的是從數(shù)據(jù)庫(kù)加載數(shù)據(jù)（load）或是保存數(shù)據(jù)（save） 到數(shù)據(jù)庫(kù)中。通過(guò) JavaScript 異步無(wú)刷新交換數(shù)據(jù)的這種方式，就是所謂的 Ajax。Ext 內(nèi)建卓越的 Ajax 支持，例如，一個(gè)普遍的用戶操作就是，異步 一些東西到服務(wù)器，然后，UI 元素根據(jù)回應(yīng)（Response）作出更新。這是一個(gè)包含text input 的表單，一個(gè)div 用于顯示消息（注意，

29、你可以在ExtStart.html 中加入下列代碼，但這必須要服務(wù)器）：<div id="msg" style="visibility: hidden"></div>renderer:Ext.util.Format.dateRenderer('m/d/Y'),dataIndex:'lastChange');var grid = new Ext.grid.Grid('grid-example', ds: ds, cm: colM); grid.render();grid.getSele

30、ctionM().selectFirstRow(););這種模式看起來(lái)已經(jīng)比較熟悉了吧！先獲取按鈕元素，加入單擊的。在處理器中（eventhandler），我們使用一個(gè)負(fù)責(zé)處理 Ajax 請(qǐng)求、接受響應(yīng)（Response）和更新另一個(gè)元素的 Ext 內(nèi)建類，稱作 UpdateManager。 UpdateManager 可以直接使用，或者和我們現(xiàn)在的做法一樣，通過(guò) Element 的 load 方法來(lái)（本例中該元素是 id 為“msg“的 div）。當(dāng)使用 Element.load 方法，請(qǐng)求（request)會(huì)在處理后，等待服務(wù)器的響應(yīng)（Response），來(lái)自動(dòng)替換元素的 innerHTM

31、L。簡(jiǎn)單傳入服務(wù)器url 地址，加上字符串參數(shù)，便可以處理這個(gè)請(qǐng)求（本例中，參數(shù)值來(lái)自“name”元素的 value),而 text 值是請(qǐng)求時(shí)提示的文本，完畢后顯示那個(gè) msg 的div（因?yàn)殚_(kāi)始時(shí)默認(rèn)隱藏）。當(dāng)然，和大多數(shù) Ext 組件一樣，UpdateManager有許多的參數(shù)可選，不同的Ajax 請(qǐng)求有不同的方案。而這里僅演示最簡(jiǎn)單的那種。PHPASP.Netprotected void Page_Load(object sender, EventArgs e)if (Request"name" != null)<? if(isset($_GET'na

32、me') echo 'From Server: '.$_GET'name'?>Name: <input type="text" id="name" /><br /><input type="button" id="oKButton" value="OK" />接著，我們加入這些處理交換數(shù)據(jù)的 JavaScript 代碼到文件ExtStart.js 中(用下面的代碼覆蓋)：Ext.onReady(function()

33、Ext.get('oKButton').on('click', function() var msg = Ext.get('msg');msg.load(url: server url, /換成你的 URLparams: 'name=' + Ext.get('name').dom.value, text: 'Updating.');msg.show();););Cold Fusion最后一個(gè)關(guān)于 Ajax 隱晦的地方就是，服務(wù)器實(shí)際處理請(qǐng)求和返回（Resposne）是具體過(guò)程。這個(gè)過(guò)程會(huì)是一個(gè)服務(wù)端

34、頁(yè)面，一個(gè) Servlet，一個(gè) Http 調(diào)度過(guò)程，一個(gè)WebService,甚至是 Perl 或 CGI，即不指定一個(gè)服務(wù)器都可以處理的 http 請(qǐng)求。讓人無(wú)法預(yù)料的是，服務(wù)器返回什么是服務(wù)器的事情，無(wú)法給一個(gè)標(biāo)準(zhǔn)的例子來(lái)覆蓋闡述所有的可能性。(這段代碼輸出剛才我們傳入'name'的那個(gè)值到客戶端，即什么，返回什么）。使用 Ajax 的真正，是需要進(jìn)行適當(dāng)?shù)氖止ぞ幋a，并相應(yīng)格式化為服務(wù)端可用接受的數(shù)據(jù)結(jié)構(gòu)。有幾種格式供人們選擇（最常用為 JSON/XML)。正因 Ext 是一種與服務(wù)器語(yǔ)言免依賴的機(jī)制，使得其它特定語(yǔ)言的庫(kù)亦可用于Ext 處理Ajax 服務(wù)。只要頁(yè)面接受到

35、結(jié)果是 EXT 能處理的數(shù)據(jù)格式，Ext 絕服務(wù)器其他的事情！要全面討論這個(gè)問(wèn)題，已超出本文的范圍。推薦正在Ajax 環(huán)境下開(kāi)發(fā)的您，繼續(xù)深入閱讀Ext Ajax。下一步是？現(xiàn)在你已經(jīng)一睹Ext 其芳容，知道她大概能做些什么了。下面的有助您進(jìn)一步深入了解：EXT 源碼概述揭示源代碼Javascript 是一門解釋型的語(yǔ)言，意味著在運(yùn)行之前代碼是沒(méi)有經(jīng)過(guò)編譯的。按照這種理論，在你網(wǎng)站上所發(fā)播的Ext 代碼是我們看的懂的（human-readible）。我這里說(shuō)“理論上”，是因?yàn)閷?shí)際情況中，很多源代碼是經(jīng)過(guò)某些自動(dòng)化步驟的處理，生成很小幾行的文件最終發(fā)布的，通過(guò)剔除空白符號(hào)和注釋，或等的方法，以減

36、小文件大小。仔細(xì)看看 EXT 標(biāo)準(zhǔn)源碼 ext-core.js，你會(huì)發(fā)現(xiàn)這是一段超長(zhǎng)的源碼。這是剛才提及的自動(dòng)化步驟生成的結(jié)果對(duì)瀏覽器來(lái)說(shuō)不錯(cuò)！對(duì)于我們是難以閱讀的。ext-core.js/* Ext JS Library 1.1<cfif StructKeyExists(url, "name")><cfoutput>From Server: ##</cfoutput></cfif>Response.Write("From Server: " + Request"name"

37、;); Response.End();接著看下去的是ext-core-debug.js （注意在文件名后面加上-debug的JS文件）， 我會(huì)發(fā)現(xiàn)是全部已格式化好的源代碼。這個(gè)文件是配合調(diào)時(shí)器所使用的，像Firebug的工具能夠可以讓你一步一步地、一行一行地調(diào)試代碼。你也會(huì)發(fā)現(xiàn)文件的體積將近大了一倍之多，這便是沒(méi)有壓縮或的緣故。ext-core-debug.js該調(diào)試版本可以在調(diào)試階段方便地檢查 EXT 庫(kù)運(yùn)行到哪一步，但是你還是會(huì)錯(cuò)過(guò)一個(gè)有價(jià)值的.代碼注釋！要完整地看到代碼，就要閱讀真正的原始代碼！發(fā)布 Ext 源碼時(shí)的一些細(xì)節(jié)你在download得到的壓縮文檔，包含在這些文件夾之中的，有一

38、source的子目錄。在這個(gè)文件夾里面， 正如所料，是全部的EXT的源文件，遵從 Lesser GNU （LGPL） 開(kāi)源的協(xié)議。對(duì)于EXT開(kāi)發(fā)者來(lái)說(shuō)應(yīng)該非常適合。用你日常使用文本編輯器打開(kāi)源代碼的任意一個(gè)文件（推薦有高亮顯示的編輯器，或是在這里/* Ext JS Library 1.1* Copyright(c) 2006-2007, Ext JS, LLC.* licensing*/Ext.DomHelper = function() var tempTableEl = null;varemptyTags=/(?:br|frame|hr|img|input|link|meta|range|

39、spacer|wbr|area|param|col)$/i; var tableRe = /table|tbody|tr|td$/i;.* licensing*/Ext.DomHelper=function()var _1=null;var _2=/(?:br|frame.Ext.Template=function(_1)if(_1 instanceof Array)_1.* Copyright(c) 2006-2007, Ext JS, LLC.full-featured IDE看看），便可以開(kāi)始我們的探險(xiǎn)！我應(yīng)該從哪里開(kāi)始？Ext代碼庫(kù)里面包含了許多各種各樣的文件，甚至令人覺(jué)得有點(diǎn)望而生畏

40、。好在，Ext是一個(gè)通過(guò)充分考慮后而設(shè)計(jì)的JavaScript庫(kù)，在底層的代碼為各項(xiàng)應(yīng)用提供穩(wěn)健的基礎(chǔ)如跨瀏覽器的各種DOM操控， 使得在上層的類classes運(yùn)行于一個(gè)較高級(jí)的抽象層面（class 一術(shù)語(yǔ)與我們已習(xí)慣的Java和C+語(yǔ)言稍微有所不同，但一些概念如繼承則如此類推去理解的有關(guān)面向?qū)ο蟮腏avaScript的Introduction to object-oriented (OO) JavaScript）。資料，請(qǐng)參見(jiàn)這意味著，當(dāng)瀏覽源碼的時(shí)候，采取“自頂向下（bottom-up）”還是“自下向頂（top-down）”的方式，都是無(wú)關(guān)緊要的。你所熟悉 API 里面的代碼已經(jīng)是屬于最高

41、的抽象層面的范疇，你可以根據(jù)你的，順著這些你熟悉的 API 逐步深入。但是你若贊同底層代碼開(kāi)始?？捶?，并打算深入了解其個(gè)中原理，最理想的地方是從適配器 Adapters瀏覽器第一個(gè)源文件，當(dāng)中的一個(gè)任務(wù)就是創(chuàng)建Ext 對(duì)象本身。 Ext.jsExt 成型于 YahooUI 的 Javascript 庫(kù)的擴(kuò)展。在當(dāng)時(shí)，Ext 須依賴 YUI 的底層代碼來(lái)處理跨瀏覽器的問(wèn)題?，F(xiàn)在 ExtJS 已經(jīng)是、免依賴的庫(kù)了（standalone ），你可將 YUI 替換為另外你所選擇 javascript庫(kù)，如 prototype、jQuery、或者是這些之中的最佳選擇,Ext 自帶的底層庫(kù)。負(fù)責(zé)將這些庫(kù)（

42、包括Ext 自帶的底層庫(kù)為Ext 底層庫(kù)的這部分代碼，我們稱之為適配器（Adapters）。這部分源碼位于 source/adapter的子目錄。當(dāng)項(xiàng)目引入Ext 的時(shí)候便需要選擇好你準(zhǔn)備使用的適配器。Coresource/core 中的文件是構(gòu)建于適配器 API 之上的“相對(duì)”最底層的源碼。有些的源碼甚至“底層”到直庫(kù)的代碼直接使用。這意味著應(yīng)先了解和學(xué)習(xí)這整個(gè)庫(kù)，再學(xué)習(xí)剩余的部分也不遲。要了解 Ext接為的各種“Magic”和層面，就應(yīng)該把重點(diǎn)放在source/core 目錄下的各個(gè)源代碼。Javascript 中的作用域（scope）事前準(zhǔn)備學(xué)習(xí)本的最佳方法是隨手準(zhǔn)備好Firefox中的

43、工具 Firebug。這樣使得您可以即刻測(cè)試的例子。如果機(jī)子上還沒(méi)有 FireFox 和 FireBug，就應(yīng)該盡快安裝一套來(lái)用。Ext = ;定義作用域scope1.（名詞）某樣事物執(zhí)行、操作、擁有權(quán)的那么一個(gè)區(qū)域 12. （名詞） 編寫(xiě)程序時(shí)，程序之中變量的可見(jiàn)度；例如，一個(gè)函數(shù)能否使用另外一個(gè)函數(shù)所創(chuàng)建的變量。2這能夠說(shuō)明什么問(wèn)題呢？ 每當(dāng)有人在說(shuō)“這是作用域的問(wèn)題”或“作用域搞錯(cuò)了”的時(shí)候，那就是說(shuō)某個(gè)函數(shù)運(yùn)行起來(lái)的時(shí)候，找不到正確變量的位置。這樣我們便知道應(yīng)該從哪一方面入手，查找出問(wèn)題所在。正式開(kāi)始實(shí)際上每一個(gè)你定義的函數(shù)都是某個(gè)對(duì)象的方法。甚至是這樣的寫(xiě)法：老兄你不是故弄玄虛吧。做

44、一個(gè)這樣的演示可真得是簡(jiǎn)單得。沒(méi)錯(cuò)！本例不需要任何 Javascript文件，服務(wù)器或 html。你只要打開(kāi) firefox，彈出 firebug,點(diǎn)擊console tab。在 Firefox 狀態(tài)欄上面看到有>>>提示的地方就可以輸入了。輸入：然后回車。一切安然.你剛才做的實(shí)際上是定義了一個(gè)函數(shù)fn。接著試試：然后回車。得到 11 的警告窗口？還不錯(cuò)吧？接著試試：得到一樣的結(jié)果吧？這是因?yàn)楹瘮?shù) fn 是 window 對(duì)象的一個(gè)方法，在第二行的"this"的作用域?qū)嶋H指向了 windows 對(duì)象。不過(guò)多數(shù)情況中你不需要像這樣 window myFunc

45、tion(.)地調(diào)用函數(shù)，這樣太麻煩了，程序員工作起來(lái)會(huì)很不方便。window 對(duì)象window 對(duì)象總是存在的，你可理解其為一個(gè)瀏覽器窗口對(duì)象。它包含了其它所有的對(duì)象如 document和所有的全局變量。你可以打開(kāi) Firebug，切換到 Script 頁(yè)面并在 Firebug 右側(cè)的 New watch expression. 里面輸入window。觀察 window 對(duì)象究竟有什么在里面。window.fn();this.fn();fn();function fn() alert(11); ;function fn() alert(11);接著，嘗試找出我們之前定義過(guò)的 fn 函數(shù)。另外

46、，每個(gè) frame 或 iframe 擁有其自身的 window 對(duì)象，其自身的全局空間。理解作用域接下的內(nèi)容開(kāi)始有點(diǎn)復(fù)雜了。切換到Firebug Console頁(yè)然后輸入：結(jié)果是什么？你了 o1 和 o2 兩個(gè)對(duì)象，分別都有一些屬性和方法，但值不同。接著試試：出錯(cuò)了，是吧？因?yàn)閣indow 對(duì)象（等價(jià)于this）并沒(méi)有fun 的方法。試一試下面的：22 和 33 出來(lái)了？非常好！接下來(lái)這部分的內(nèi)容最復(fù)雜啦。基于這個(gè)原始的函數(shù)，如果對(duì)象的數(shù)量多的話，你必須為每個(gè)對(duì)象加上這個(gè)函數(shù)明顯是重復(fù)勞動(dòng)了。這樣說(shuō)吧，o1 fun 寫(xiě)得非常清晰的而且為了搞掂它已經(jīng)占用了我一個(gè)的開(kāi)發(fā)時(shí)間。想象一下代碼到處散布

47、著 this 變量，怎么能不頭疼？如果要將調(diào)用（執(zhí)行）的 o1 fun 方法但 this 會(huì)執(zhí)行o2,應(yīng)該怎么實(shí)現(xiàn)呢？試一試下面的：明白了嗎？當(dāng)執(zhí)行 o1 的 fun 方法時(shí)你強(qiáng)行將變量 this 指向到 o2 這個(gè)對(duì)象，換句話說(shuō)，更加嚴(yán)謹(jǐn)?shù)卣f(shuō):o1 fun 的方法在對(duì)象 o2 的作用域下運(yùn)行。當(dāng)運(yùn)行一個(gè)函數(shù)，一個(gè)對(duì)象的方法時(shí)，你可將作用域當(dāng)作 this 值的變量。變量的可見(jiàn)度變量的可見(jiàn)度和作用域的關(guān)系非常密切。我們已經(jīng)了解到，可在任何對(duì)象的外部，變量，或在全局的函數(shù)（函數(shù)也是變量的一種）也可以，更嚴(yán)格說(shuō)，它們是全局對(duì)象 window 的屬性。 全局變量在任何地方都可見(jiàn)；無(wú)論函數(shù)的內(nèi)部還是外部

48、。如果你在某一個(gè)函數(shù)內(nèi)修改了一個(gè)全局變量，其它函數(shù)也會(huì)得 知這個(gè)值是修改過(guò)的。對(duì)象可以有它的屬性（像上面的 testvar）,這些屬性從內(nèi)部或是外部均是可見(jiàn)的。試：o1.fun.call(o2);o1.fun();o2.fun();fun();window.fun();this.fun();var o1 = testvar:22, fun:function() alert('o1: ' + this.testvar); ; var o2 = testvar:33, fun:function() alert('o2: ' + this.testvar); ;從內(nèi)部

49、的演示可在兩個(gè)測(cè)試對(duì)象的 fun 方法找到。用關(guān)鍵字 var 在內(nèi)部鏈上,Frank 注）：，相當(dāng)于局部變量（局部也是在一條鏈上，即Scope Chain 作用域?qū)⒌玫绞裁?？?duì)了，55。量 i 44 沒(méi)什么關(guān)系。 But:在函數(shù)fn2 的變量 i 是一個(gè)本地變量（局部變量），和等于 44 的全局變這會(huì)全局變量 i，顯示 44。希望本文能幫助讀者徹底理解作用域變量可見(jiàn)性的含義。EXT 程序入門事前準(zhǔn)備本假設(shè)你已經(jīng)安裝好ExtJS 庫(kù)。安裝的目錄是 extjs 并位于你程序的上一級(jí)目錄。如果安裝在其它地方你必須更改路徑，更改示例文件中script的 src 的屬性。需要些什么？除ExtJS 庫(kù)本身

50、外，我們還需要兩個(gè)文件：· applayout html· applayout.js先看看一份html 文檔，比較精簡(jiǎn)。并附有詳細(xì)說(shuō)明：applayout html<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "">alert(i);i = 44;function fn2() var i = 55; alert(i);fn2();alert(o1.testvar); / 從外部o1 的屬性 testvar開(kāi)頭的兩行了文檔的類型。程序可以不用docty

51、pe,但是這樣的話瀏覽器可能默認(rèn)其為 Quirks怪僻類型，會(huì)導(dǎo)致處理跨瀏覽器這一問(wèn)題上出現(xiàn)差異。我們采用HTML 4.01 Transitional的文檔類型，該類型在主流瀏覽器上支持得不錯(cuò)。當(dāng)然，你也可以根據(jù)你的需求采用其它類型的doctype，但是記住別忘了要加上doctype。接著指定HTML 頭部的Content-Type。做這些事情其實(shí)很瑣碎，但總是有益處。然后引入EXT 的樣式，適配器和EXTJS 本身。有兩種版本的ExtJS：· ext-all.js - 不能直接閱讀，加載時(shí)更快，用于· ext-all-debug.js - 便于閱讀，開(kāi)發(fā)階段使用,發(fā)布開(kāi)發(fā)

52、階段的時(shí)候便需要引入debug 的版本。applayout.js 這個(gè)文件就是我們的程序，緊跟著的是本地化的，這里可以換成Extjs 翻譯好的版本跟著我們開(kāi)始分配句柄(event handler)，使得在文檔全部加載完畢后，程序就可以初始化（運(yùn)行）。下面的這一行：可這樣說(shuō)：當(dāng)文檔全部加載完畢, 就運(yùn)行 myNameSpace.app 的init 方法, 規(guī)定的 作用域是myNameSpace.app。然后是標(biāo)題，頭部的結(jié)尾，body（當(dāng)前空）和結(jié)束。文檔的解說(shuō)就說(shuō)到這兒了。Ext.onReady(myNameSpace.app.init, myNameSpace.app);<html&g

53、t;<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link rel="stylesheet" type="text/css" href="./extjs/resources/css/ext-all.css"><script type="text/javascript" src="./extjs/adapter/ext/ext

54、-base.js"></script><script type="text/javascript" src="./extjs/ext-all-debug.js"></script><script type="text/javascript" src="applayout.js"></script><!- 本地化的在這里 -><script type="text/javascript"> Ext.o

55、nReady(myNameSpace.app.init, myNameSpace.app);</script><title>Application Layout Tutorial</title></head><body></body></html>applayout.js文件最開(kāi)始的幾行是注釋，說(shuō)明該文件的主要內(nèi)容，作者，作者相關(guān)的資訊。沒(méi)有任何注釋的程序也可以正常的運(yùn)行，但請(qǐng)記?。好看螌?xiě)的程序要容易給人看得懂的 Always write your application as ifyou would write it for another.當(dāng)你回頭看你幾前寫(xiě)的代碼，發(fā)現(xiàn)你根本不記得寫(xiě)過(guò)什么的時(shí)候，就會(huì)明白這個(gè)道理，并養(yǎng)成編碼的好習(xí)慣。接著是要指向你服務(wù)器的填充圖片，如不指定則默認(rèn) 。每次運(yùn)行程序的時(shí)候都，不推薦這樣，應(yīng)該先修改這個(gè)常量值指向到本地。/* Application Layout* by