1、EXT 中文手冊開發(fā)必備該文檔內(nèi)容取自互聯(lián)網(wǎng)，詳細的介紹了 EXT 的各部分內(nèi)容，希望對大家有所幫助pjq 2008-5-25 2 EXT 中文手冊EXT 中文手冊前言本手冊所有內(nèi)容均粘貼自互聯(lián)網(wǎng)，如有錯誤，請多見諒。EXT 中文手冊 pjq 收集整理20083 EXT 中文手冊目錄EXT 中文手冊 1 EXT 簡介 5 目 錄 5 下載 Ext 6 開始！ 6 Element：Ext 的核心 6 獲取多個 DOM 的節(jié)點 7 響應(yīng)事件 7 使用 Widgets 9 使用 Ajax 11 EXT 源碼概述 13 揭示源代碼 13 發(fā)布 Ext 源碼時的一些細節(jié) 14 我應(yīng)該從哪里開始？ 15

2、適配器 Adapters 15 核心 Core 15 Javascript 中的作用域（scope） 15 事前準(zhǔn)備 15 定義 15 正式開始 16 window 對象 16 理解作用域 17 變量的可見度 17 EXT 程序規(guī)劃入門 18 事前準(zhǔn)備 18 需要些什么？ 18 applayout.html 18 applayout.js 19 公開 Public 、私有 Private、特權(quán)的 Privileged？ 21 重寫公共變量 23 重寫（Overriding）公共函數(shù) 23 DomQuery 基礎(chǔ) 24 DomQuery 基礎(chǔ) 24 擴展 EXT 組件 31 文件的創(chuàng)建 31 L

3、ets go 35 完成 37 EXT 的布局（Layout） 39 簡單的例子 40 加入內(nèi)容 43 開始使用 Grid 53 EXT 中文手冊 pjq 收集整理20084 EXT 中文手冊步驟一 定義數(shù)據(jù)(Data Definition) 53 步驟二 列模型（Column Model） 54 Grid 組件的簡易分頁 55 G r i d 數(shù) 據(jù) 55 怎 么 做 一 個 分 頁 的 G r i d 56 分 頁 欄 T o o l b a r 56 EXT Menu 組件 57 創(chuàng) 建 簡 易 菜 單 57 各 種 I t e m 的 類 型 59 I t e m 屬 性 59 在 U

4、 I 中 擺 放 菜 單 59 M e n u 的 分 配 方 式 ： 60 練 一 練 62 動 態(tài) 添 加 菜 單 按 鈕 到 T o o l b a r 62 更 方 便 的 是 63 下 一 步 是 63 模板（Templates）起步 63 第一步 您的 HTML 模板 63 第二步，將數(shù)據(jù)加入到模板中 64 下一步 64 學(xué)習(xí)利用模板（Templates）的格式化功能 64 正式開始 64 下一步 66 事件處理 66 非 常 基 礎(chǔ) 的 例 子 66 處 理 函 數(shù) 的 作 用 域 66 傳 遞 參 數(shù) 67 類設(shè)計 67 對 象 創(chuàng) 建 67 使 用 構(gòu) 造 器 函 數(shù) 68

5、方 法 共 享 68 表單組件入門 69 表單體 69 創(chuàng)建表單字段 69 完成表單 70 下一步 71 為一個表單填充或提交數(shù)據(jù) 71 讓我們開始吧 71 讀取我們的數(shù)據(jù) 72 EXT 中的繼承 73 補充資料 74 Ext 2概述 74 組件模型 Component Model 76 容器模型 Container Model 80 EXT 中文手冊 pjq 收集整理20085 EXT 中文手冊布局 Layouts 81 Grid 84 XTemplate 84 DataView 85 其它新組件 85 EXT2 簡介 86 下載 Ext 86 開始！ 87 Element：Ext 的核心

6、87 獲取多個 DOM 的節(jié)點 88 響應(yīng)事件 88 使用 Widgets 90 編輯 使用 Ajax 93 TabPanel 基礎(chǔ) 96 Step 1: 創(chuàng)建 HTML 骨架 96 Step 2: Ext 結(jié)構(gòu)的構(gòu)建 97 Step 3: 創(chuàng)建 Tab 控制邏輯 99 EXT 簡介無論你是 Ext 庫的新手，抑或是想了解 Ext 的人，本篇文章的內(nèi)容都適合你。本文將簡單地介紹 Ext的幾個基本概念，和如何快速地做出一個動態(tài)的頁面并運行起來，假設(shè)讀者已具備了一些JavaScript經(jīng)驗和初級了解 HTML Dom。目 錄1 下載 Ext 2 開始！ 3 Element：Ext 的核心 4 獲取

7、多個 DOM 的節(jié)點 5 響應(yīng)事件 6 使用 Widgets o6.1 MessageBox o6.2 Grid o6.3 還有更多的. 7 使用 Ajax o7.1 PHP o7.2 ASP.Net o7.3 Cold Fusion EXT 中文手冊 pjq 收集整理2008下載 Ext EXT 中文手冊20086 如果你未曾下載過，那應(yīng)從這里下載最新版本的 Ext /downloads 。針對你的下載需求，有幾個不同的彈性選項。通常地，最穩(wěn)定的版本，是較多人的選擇。下載解包后，那個 example 文件夾便是一個探索 Ext 的好地方！開始！Download Example FileInt

8、roToExt.zip 我們將使用 Ext，來完成一些 JavaScript 任務(wù)。Zip 文件包括三個文件：ExtStart.html,ExtStart.js 和 ExtStart.css。解包這三個文件到 Ext 的安裝目錄中（例如，Ext 是在C:codeExtv1.0 中，那應(yīng)該在v1.0里面新建目錄tutorial 。雙擊 ExtStart.htm，接著你的瀏覽器打開啟動頁面，應(yīng)該會有一條消息告訴你配置已完畢。如果是一個 Javascript 錯誤，請按照頁面上的指引操作。在你常用的 IDE 中或文本編輯器中，打開 ExtStart.js 看看：Ext.onReady可能是你接觸的第

9、一個方法。這個方法是指當(dāng)前 DOM加載完畢后，保證頁面內(nèi)的所有元素能被 Script 引用（reference）。你可刪除 alert()那行，加入一些實際用途的代碼試試：Ext.onReady(function() alert(Congratulations! You have Ext configured correctly!); ); Element：Ext 的核心大多數(shù)的 JavaScript 操作都需要先獲取頁面上的某個元素（reference）,好讓你來做些實質(zhì)性的事情。傳統(tǒng)的 JavaScript 方法，是通過 ID 獲取 Dom 節(jié)點的：var myDiv = document

10、.getElementById(myDiv); 這毫無問題，不過這樣單單返回一個對象（DOM節(jié)點），用起來并不是太實用和方便。為了要用那節(jié)點干點事情，你還將要手工編寫不少的代碼；另外，對于不同類型瀏覽器之間的差異，要你處理起來可真頭大了。進入 Ext.element 對象。元素（element）的的確確是 Ext 的心臟地帶，-無論是訪問元素（elements）還是完成一些其他動作，都要涉及它。Element的 API 是整個 Ext 庫的基礎(chǔ)，如果你時間不多，只是想了解 Ext 中的一兩個類的話，Element 一定是首選！由 ID 獲取一個 Ext Element 如下（首頁 ExtSta

11、rt.htm 包含一個 div，ID 名字為myDiv，然后，在 ExtStart.js中加入下列語句）：EXT 中文手冊 pjq 收集整理7 EXT 中文手冊Ext.onReady(function() var myDiv = Ext.get(myDiv);); 再回頭看看 Element 對象，發(fā)現(xiàn)什么有趣的東東呢？Element包含了常見的DOM方法和屬性，提供一個快捷的、統(tǒng)一的、跨瀏覽器的接口（若使用Element.dom 的話，就可以直接訪問底層 DOM 的節(jié)點。）；Element.get()方法內(nèi)置緩存處理（Cache)，多次訪問同一對象效率上有極大優(yōu)勢；內(nèi)置常用的 DOM 節(jié)點的

12、動作，并且是跨瀏覽器的定位的位置、大小、動畫、拖放等等（add/remove CSS classes, add/remove event handlers, positioning, sizing, animation, drag/drop ）。這意味著你可用少量的代碼來做各種各樣的事情，這里僅僅是一個簡單的例子（完整的列表在ElementAPI 中）。繼續(xù)在 ExtStart.js 中，在剛才我們獲取好 myDiv 的位置中加入：myDiv.highlight(); /黃色高亮顯示然后漸退myDiv.addClass(red); /添加自定義 CSS 類 (在 ExtStart.css 定義

13、) myDiv.center(); /在視圖中將元素居中myDiv.setOpacity(.25); /使元素半透明獲取多個 DOM 的節(jié)點通常情況下，想獲取多個 DOM 的節(jié)點，難以依靠 ID 的方式來獲取。有可能因為沒設(shè)置 ID,或者你不知道 ID,又或者直接用 ID方式引用有太多元素了。這種情況下，你就會不用 ID來作為獲取元素的依據(jù)，可能會用屬性（attribute）或 CSS Classname 代替?；谝陨系脑?，Ext 引入了一個功能異常強大的 Dom Selector 庫，叫做 DomQuery。DomQuery 可作為單獨的庫使用，但常用于 Ext，你可以在上下文環(huán)境中（C

14、ontext）獲取多個元素，然后通過 Element 接口調(diào)用。令人欣喜的是，Element 對象本身便有 Element.selcect 的方法來實現(xiàn)查詢，即內(nèi)部調(diào)用 DomQuery 選取元素。這個簡單的例子中， ExtStart.htm 包含若干段落（標(biāo)簽），沒有一個是有ID的，而你想輕松地通過一次操作馬上獲取每一段，全體執(zhí)行它們的動作，可以這樣做：/每段高亮顯示Ext.select(p).highlight(); DomQuery 的選取參數(shù)是一段較長的數(shù)組，其中包括 W3C CSS3 Dom 選取器、基本 XPatch、HTML屬性和更多，請參閱 DomQuery API 文檔以了解

15、這功能強大的庫個中細節(jié)。響應(yīng)事件到這范例為止，我們所寫的代碼都是放在onReady中，即當(dāng)頁面加載后總會立即執(zhí)行，功能較單一這樣的話，你便知道，如何響應(yīng)某個動作或事件來執(zhí)行你希望做的事情，做法是，先分配一個 function，再定義一個 event handler 事件處理器來響應(yīng)。我們由這個簡單的范例開始，打開 ExtStart.js，編輯下列的代EXT 中文手冊 pjq 收集整理2008碼：Ext.onReady(function() EXT 中文手冊2008); Ext.get(myButton).on(click, function() alert(You clicked the bu

16、tton); ); 加載好頁面，代碼依然會執(zhí)行，不過區(qū)別是，包含 alert()的 function 是已定義好的，但它不會立即地8 被執(zhí)行，是分配到按鈕的單擊事件中。用淺顯的文字解釋，就是：獲取 ID 為myDottom元素的引用，監(jiān)聽任何發(fā)生這個元素上被單擊的情況，并分配一個 function,以準(zhǔn)備任何單擊元素的情況。正路來說，Element.select也能做同樣的事情，即作用在獲取一組元素上。下一例中，演示了頁面中的某一段落被單擊后，便有彈出窗口：Ext.onReady(function() Ext.select(p).on(click, function() alert(You c

17、licked a paragraph); ); ); 這兩個例子中，事件處理的 function 均是簡單幾句，沒有函數(shù)的名稱，這種類型函數(shù)稱為 匿名函數(shù)（anonymous function） ，即是沒有名的的函數(shù)。你也可以分配一個有名字的 event handler,這對于代碼的重用或多個事件很有用。下一例等效于上一例：Ext.onReady(function() var paragraphClicked = function() alert(You clicked a paragraph); Ext.select(p).on(click, paragraphClicked); ); 到目

18、前為止，我們已經(jīng)知道如何執(zhí)行某個動作。但當(dāng)事件觸發(fā)時，我們?nèi)绾蔚弥@個event handler執(zhí)行時是作用在哪一個特定的元素上呢？要明確這一點非常簡單，Element.on方法傳入到 even handler的function 中（我們這里先討論第一個參數(shù)，不過你應(yīng)該瀏覽 API 文檔以了解 even handler 更多的細節(jié)）。在我們之前的例子中，function 是忽略這些參數(shù)的，到這里可有少許的改變，我們在功能上提供了更深層次的控制。必須先說明的是，這實際上是 Ext 的事件對象（event object）,一個跨瀏覽器和擁有更多控制的事件的對象。例如，可以用下列的語句，得到這個事件

19、響應(yīng)所在的 DOM 節(jié)點：Ext.onReady(function() var paragraphClicked = function(e) Ext.get(e.target).highlight(); Ext.select(p).on(click, paragraphClicked); EXT 中文手冊 pjq 收集整理); EXT 中文手冊注意得到的 e.target 是 DOM 節(jié)點，所以我們首先將其轉(zhuǎn)換成為 EXT 的 Elemnet 元素，然后執(zhí)行欲完20089 成的事件，這個例子中，我們看見段落是高亮顯示的。使用 Widgets (Widget 原意為“小器件”，現(xiàn)指頁面中 UI

20、控件) 除了我們已經(jīng)討論過的核心 JavaScript 庫，當(dāng)前的 Ext 亦包括了一系列的最前端的 JavaScirptUI 組件庫。文本以一個常用的 widget 為例子，作簡單的介紹。MessageBox 比起略為沉悶的HelloWolrd 消息窗口，我們做少許變化，前面我們寫的代碼是，單擊某個段落便會高亮顯示，現(xiàn)在是單擊段落，在消息窗口中顯示段落內(nèi)容出來。在上面的 paragraphClicked 的 function 中，將這行代碼：Ext.get(e.target).highlight(); 替換為：var paragraph = Ext.get(e.target); paragr

21、aph.highlight(); Ext.MessageBox.show( title: Paragraph Clicked, msg: paragraph.dom.innerHTML, width:400, buttons: Ext.MessageBox.OK, animEl: paragraph ); 這里有些新的概念需要討論一下。在第一行中我們創(chuàng)建了一個局部變量（Local Variable）來保存某個元素的引用，即被單擊的那個 DOM 節(jié)點（本例中，DOM 節(jié)點指的是段落 paragrah,事因我們已經(jīng)定義該事件與標(biāo)簽發(fā)生關(guān)聯(lián)的了）。為什么要這樣做呢？嗯.觀察上面的代碼，我們需要引用同

22、一元素來高亮顯示，在 MessageBox 中也是引用同一元素作為參數(shù)使用。一般來說，多次重復(fù)使用同一值（Value）或?qū)ο?，是一個不好的方式，所以，作為一個具備良好 OO 思維的開發(fā)者，應(yīng)該是將其分配到一個局部變量中，反復(fù)使用這變量！現(xiàn)在，為了我們接下來闡述新概念的演示，請觀察 MessageBox 的調(diào)用。乍一看，這像一連串的參數(shù)傳入到方法中，但仔細看，這是一個非常特別的語法。實際上，傳入到 MessageBox.show 的只有一個參數(shù)：一個 Object literal,包含一組屬性和屬性值。在 Javascript 中，Object Literal 是動態(tài)的，你可在任何時候用和創(chuàng)建一

23、個典型的對象 (object)。其中的字符由一系列的name/value組成的屬性，屬性的格式是 propertyname:property value。在整個 Ext 中，你將會經(jīng)常遇到這種語法，因此你應(yīng)該馬上消化并吸收這個知識點！EXT 中文手冊 pjq 收集整理EXT 中文手冊使用 Object Literal 的原因是什么呢？主要的原因是 可伸縮性（flexibility） 的考慮，隨時可新增、刪除屬性，亦可不管順序地插入。而方法不需要改變。這也是多個參數(shù)的情況下，為最終開發(fā)者帶來不少的方便（本例中的 MessageBox.show()。例如，我們說這兒的 foo.action 方法，

24、有四個參數(shù)，而只有一個是你必須傳入的。本例中，你想像中的代碼可能會是這樣的foo.action(null, null, null, hello).,若果那方法用Object Literal 來寫，卻是這樣， foo.action( param4: hello )，這更易用和易讀。Grid Grid是 Ext中人們最想先睹為快的和最為流行Widgets之一。好，讓我們看看怎么輕松地創(chuàng)建一個Grid 并運行。用下列代碼替換 ExtStart.js 中全部語句：Ext.onReady(function() var myData = Apple,29.89,0.24,0.81,9/1 12:00am,

25、 Ext,83.81,0.28,0.34,9/12 12:00am, Google,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.MemoryProxy(myData), reader: new Ext.data.ArrayReader(id: 0, name: company, name: price, type: float,

26、name: change, type: float, name: pctChange, type: float, name: lastChange, type: date, dateFormat: n/j h:ia ) ); ds.load(); var colModel = new Ext.grid.ColumnModel( header: Company, width: 120, sortable: true, dataIndex: company, header: Price, width: 90, sortable: true, dataIndex: price, header: Ch

27、ange, width: 90, sortable: true, dataIndex: change, header: % Change, width: 90, sortable: true, dataIndex: pctChange, header: Last Updated, width: 120, sortable: true, EXT 中文手冊 pjq 收集整理10 2008lastChange ); renderer: EXT 中文手冊Ext.util.Format.dateRenderer(m/d/Y), dataIndex: 2008var grid = new Ext.grid

28、.Grid(grid-example, ds: ds, cm: colModel); grid.render(); grid.getSelectionModel().selectFirstRow(); ); 這看上去很復(fù)雜，但實際上加起來，只有七行代碼。第一行創(chuàng)建數(shù)組并作為數(shù)據(jù)源。實際案例中，你很可能從數(shù)據(jù)庫、或者 WebService 那里得到動態(tài)的數(shù)據(jù)。接著，我們創(chuàng)建并加載 data store， data store將會告訴Ext的底層庫接手處理和格式化這些數(shù)據(jù)。接著，我們定義一個column模型，用來輕松地調(diào)配Grid 的每一列參數(shù)。最后我們生成這個 Grid,傳入 data stor

29、e 和 column 模型兩個對象，進行渲染并選好第一行。不是太困難吧？如果一切順利，完成之后你會看到像這樣的：當(dāng)然，你可能未掌握這段代碼的某些細節(jié)（像 M emoryProxy究竟是什么？）但先不要緊，這個例子的目的是告訴你，用少量的代碼，創(chuàng)建一個富界面的多功能的 UI 組件而已這是完全可能的，只要讀者您有興趣學(xué)習(xí)。這兒有許多學(xué)習(xí) Grid 的資源。Ext Grid 教程、交叉 Gird 演示和 Grid API 文檔。還有更多的. 這只是冰山一角。還有一打的 UI Widgets 可以供調(diào)用，如 layouts, tabs, menus, toolbars, dialogs, tree v

30、iew 等等。請參閱 API 文檔中范例演示。使用 Ajax 在弄好一些頁面后，你已經(jīng)懂得在頁面和腳本之間的交互原理（interact）。接下來，你應(yīng)該掌握的是，怎樣與遠程服務(wù)器（remote server）交換數(shù)據(jù)，常見的是從數(shù)據(jù)庫加載數(shù)據(jù)（load）或是保存數(shù)據(jù)（save）到數(shù)據(jù)庫中。通過 JavaScript 異步無刷新交換數(shù)據(jù)的這種方式，就是所謂的 Ajax。Ext 內(nèi)建卓越的 Ajax 支持，例如，一個普遍的用戶操作就是，異步發(fā)送一些東西到服務(wù)器，然后，UI 元素根據(jù)回應(yīng)（Response）作出更新。這是一個包含 text input 的表單，一個 div 用于顯示消息（注意，你可以

31、在 ExtStart.html 中加入下列代碼，但這必須要訪問服務(wù)器）： EXT 中文手冊 pjq 收集整理11 EXT 中文手冊Name: 接著，我們加入這些處理交換數(shù)據(jù)的 JavaScript 代碼到文件 ExtStart.js 中(用下面的代碼覆蓋)：Ext.onReady(function() Ext.get(oKButton).on(click, function() var msg = Ext.get(msg); msg.load( url: server url, /換成你的 URL params: name= + Ext.get(name).dom.value, text: U

32、pdating. ); msg.show(); ); ); 這種模式看起來已經(jīng)比較熟悉了吧！先獲取按鈕元素，加入單擊事件的監(jiān)聽。在事件處理器中（event handler），我們使用一個負責(zé)處理 Ajax 請求、接受響應(yīng)（Response）和更新另一個元素的 Ext 內(nèi)建類，稱作 UpdateManager。 UpdateManager 可以直接使用，或者和我們現(xiàn)在的做法一樣，通過 Element 的 load 方法來引用（本例中該元素是 id 為msg的 div）。當(dāng)使用 Element.load 方法，請求（request)會在加工處理后發(fā)送，等待服務(wù)器的響應(yīng)（Response），來自動替

33、換元素的 innerHTML。簡單傳入服務(wù)器 url 地址，加上字符串參數(shù)，便可以處理這個請求（本例中，參數(shù)值來自name元素的 value),而 text 值是請求發(fā)送時提示的文本，完畢后顯示那個 msg 的 div（因為開始時默認隱藏）。當(dāng)然，和大多數(shù) Ext 組件一樣，UpdateManager有許多的參數(shù)可選，不同的 Ajax 請求有不同的方案。而這里僅演示最簡單的那種。PHP ASP.Net protected void Page_Load(object sender, EventArgs e) if (Requestname != null) EXT 中文手冊 pjq 收集整理12

34、 2008 EXT 中文手冊Response.Write(From Server: + Requestname); Response.End(); 2008Cold Fusion From Server: # 最后一個關(guān)于 Ajax 隱晦的地方就是，服務(wù)器實際處理請求和返回（Resposne）是具體過程。這個過程會是一個服務(wù)端頁面，一個 Servlet，一個 Http 調(diào)度過程，一個 WebService,甚至是 Perl 或 CGI 腳本，即不指定一個服務(wù)器都可以處理的 http請求。讓人無法預(yù)料的是，服務(wù)器返回什么是服務(wù)器的事情，無法給一個標(biāo)準(zhǔn)的例子來覆蓋闡述所有的可能性。(這段代碼輸出剛

35、才我們傳入name的那個值到客戶端，即發(fā)送什么，返回什么）。使用 Ajax 的真正挑戰(zhàn)，是需要進行適當(dāng)?shù)氖止ぞ幋a，并相應(yīng)格式化為服務(wù)端可用接受的數(shù)據(jù)結(jié)構(gòu)。有幾種格式供人們選擇（最常用為 JSON/XML)。正因 Ext 是一種與服務(wù)器語言免依賴的機制，使得其它特定語言的庫亦可用于 Ext 處理 Ajax 服務(wù)。只要頁面接受到結(jié)果是 EXT 能處理的數(shù)據(jù)格式，Ext 絕不會干涉服務(wù)器其他的事情！要全面討論這個問題，已超出本文的范圍。推薦正在 Ajax 環(huán)境下開發(fā)的您，繼續(xù)深入閱讀 Ext Ajax 教程。下一步是？現(xiàn)在你已經(jīng)一睹 Ext 其芳容，知道她大概能做些什么了。下面的資源有助您進一步深入

36、了解：EXT 源碼概述揭示源代碼Javascript是一門解釋型的語言，意味著在運行之前代碼是沒有經(jīng)過編譯的。按照這種理論，在你網(wǎng)站上所發(fā)播的 Ext 代碼是我們看的懂的（human-readible）。我這里說 理論上 ，是因為實際情況中，很多源代碼是經(jīng)過某些自動化步驟的處理，生成很小幾行的文件最終發(fā)布的，通過剔除空白符號和注釋，或混淆等的方法，以減小文件大小。仔細看看EXT標(biāo)準(zhǔn)源碼 ext-core.js，你會發(fā)現(xiàn)這是一段超長的源碼。這是剛才提及的自動化步驟生成的結(jié)果對瀏覽器來說不錯！可是對于我們是難以閱讀的。ext-core.js/* * Ext JS Library 1.1 * Cop

37、yright(c) 2006-2007, Ext JS, LLC. EXT 中文手冊 pjq 收集整理13 * licensing * */ EXT 中文手冊2008Ext.DomHelper=function()var _1=null;var _2=/(?:br|frame. Ext.Template=function(_1)if(_1 instanceof Array)_1. . 接著看下去的是 ext-core-debug.js （注意在文件名后面加上-debug 的 JS 文件）， 我會發(fā)現(xiàn)是全部已格式化好的源代碼。這個文件是配合調(diào)時器所使用的，像 Firebug 的工具能夠可以讓你一

38、步一步地、一行一行地調(diào)試代碼。你也會發(fā)現(xiàn)文件的體積將近大了一倍之多，這便是沒有壓縮或混淆的緣故。ext-core-debug.js/* * Ext JS Library 1.1 * Copyright(c) 2006-2007, Ext JS, LLC. * licensing * */ Ext.DomHelper = function() var tempTableEl = null; var emptyTags = /(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i; var tableRe = /

39、table|tbody|tr|td$/i; . 該調(diào)試版本可以在調(diào)試階段方便地檢查EXT庫運行到哪一步，但是你還是會錯過一個有價值的.代碼注釋！要完整地看到代碼，就要閱讀真正的原始代碼！發(fā)布 Ext 源碼時的一些細節(jié)你在 download 得到的壓縮文檔，包含在這些文件夾之中的，有一 source 的子目錄。在這個文件夾里面，正如所料，是全部的 EXT的源文件，遵從 Lesser GNU （LGPL） 開源的協(xié)議。對于 EXT 開發(fā)者來說應(yīng)該非常適合。用你日常使用文本編輯器打開源代碼的任意一個文件（推薦有高亮顯示的編輯器，或是在這里full-featured IDE 看看），便可以開始我們的探

40、險！EXT 中文手冊 pjq 收集整理14 我應(yīng)該從哪里開始？EXT 中文手冊2008Ext代碼庫里面包含了許多各種各樣的文件，甚至令人覺得有點望而生畏。好在，Ext是一個通過充分考慮后而設(shè)計的 JavaScript 庫，在底層的代碼為各項應(yīng)用提供穩(wěn)健的基礎(chǔ)如跨瀏覽器的各種 DOM 操控，使得在上層的類 classes 運行于一個較高級的抽象層面（class一術(shù)語與我們已習(xí)慣的 Java 和 C+語言稍微有所不同，但一些概念如繼承則可是如此類推去理解的有關(guān)面向?qū)ο蟮腏avaScript的更多資料，請參見 Introduction to object-oriented (OO) JavaScri

41、pt）。這意味著，當(dāng)瀏覽源碼的時候，采取 自頂向下（bottom-up） 還是 自下向頂（top-down） 的方式，都是無關(guān)緊要的。你所熟悉 API 里面的代碼已經(jīng)是屬于最高的抽象層面的范疇，你可以根據(jù)你的興趣，順著這些你熟悉的 API 逐步深入。但是你若贊同我的看法，并打算深入了解其個中原理，最理想的地方是從底層代碼開始。適配器 Adapters 瀏覽器讀取第一個源文件，當(dāng)中的一個任務(wù)就是創(chuàng)建 Ext 對象本身。Ext.jsExt = ; Ext 成型于 YahooUI 的 Javascript 庫的擴展。在當(dāng)時，Ext 須依賴 YUI 的底層代碼來處理跨瀏覽器的問題。現(xiàn)在 ExtJS 已

42、經(jīng)是獨立、免依賴的庫了（standalone ），你可將YUI 替換為另外你所選擇 javascript庫，如 prototype、jQuery、或者是這些之中的最佳選擇,Ext 自帶的底層庫。負責(zé)將這些庫（包括 Ext 自帶的底層庫）映射為 Ext 底層庫的這部分代碼，我們稱之為適配器（Adapters）。這部分源碼位于 source/adapter的子目錄。當(dāng)項目引入 Ext 的時候便需要選擇好你準(zhǔn)備使用的適配器。核心 Core source/core中的文件是構(gòu)建于適配器API 之上的 相對 最底層的源碼。有些的源碼甚至 底層 到直接為獨立庫的代碼直接使用。這意味著應(yīng)先了解和學(xué)習(xí)這整個庫

43、，再學(xué)習(xí)剩余的部分也不遲。要了解Ext的各種 Magic和核心層面，就應(yīng)該把重點放在 source/core 目錄下的各個源代碼。Javascript 中的作用域（scope）事前準(zhǔn)備學(xué)習(xí)本教程的最佳方法是隨手準(zhǔn)備好 Firefox中的工具 Firebug。這樣使得您可以即刻測試教程的例子。如果機子上還沒有 FireFox 和 FireBug，就應(yīng)該盡快安裝一套來用。定義作用域 scopeEXT 中文手冊 pjq 收集整理15 EXT 中文手冊1.（名詞）某樣事物執(zhí)行、操作、擁有控制權(quán)的那么一個區(qū)域 1 2.（名詞）編寫程序時，程序之中變量的可見度；例如，一個函數(shù)能否使用另外一個函數(shù)所創(chuàng)建的變

44、量。2 可是這能夠說明什么問題呢？每當(dāng)有人在說 這是作用域的問題 或 作用域搞錯了 的時候，那就是說某個函數(shù)運行起來的時候，找不到正確變量的位置。這樣我們便知道應(yīng)該從哪一方面入手，查找出問題所在。正式開始實際上每一個你定義的函數(shù)都是某個對象的方法。甚至是這樣的寫法：function fn() alert(11); 老兄你不是故弄玄虛吧。做一個這樣的演示可真得是簡單得要命。沒錯！本例不需要任何 Javascript文件，服務(wù)器或 html。你只要打開 firefox，彈出 firebug,點擊 console tab。在 Firefox 狀態(tài)欄上面看到有提示的地方就可以輸入了。輸入：functi

45、on fn() alert(11); ; 然后回車。一切安然.你剛才做的實際上是定義了一個函數(shù) fn。接著試試：fn(); 然后回車。得到 11 的警告窗口？還不錯吧？接著試試：window.fn(); this.fn(); 得到一樣的結(jié)果吧？這是因為函數(shù) fn 是 window 對象的一個方法，在第二行的this的作用域?qū)嶋H指向了 windows 對象。不過多數(shù)情況中你不需要像這樣 window.myFunction(.)地調(diào)用函數(shù)，這樣太麻煩了，程序員工作起來會很不方便。window 對象window對象總是存在的，你可理解其為一個瀏覽器窗口對象。它包含了其它所有的對象如 document

46、和所有的全局變量。你可以打開Firebug，切換到Script頁面并在Firebug右側(cè)的New watch expression.里面輸入window。觀察 window 對象究竟有什么在里面。接著，嘗試找出我們之前定義過的 fn 函數(shù)。另外，每個 frame 或 iframe 擁有其自身的 window 對象，其自身的全局空間。EXT 中文手冊 pjq 收集整理16 2008理解作用域EXT 中文手冊2008接下的內(nèi)容開始有點復(fù)雜了。切換到 Firebug Console 標(biāo)簽頁然后輸入：var o1 = testvar:22, fun:function() alert(o1: + thi

47、s.testvar); ; var o2 = testvar:33, fun:function() alert(o2: + this.testvar); ; 結(jié)果是什么？你聲明了 o1和o2 兩個對象，分別都有一些屬性和方法，但值不同。接著試試：fun(); window.fun(); this.fun(); 出錯了，是吧？因為 window 對象（等價于 this）并沒有 fun 的方法。試一試下面的：o1.fun(); o2.fun(); 22 和 33 出來了？非常好！接下來這部分的內(nèi)容最復(fù)雜啦?；谶@個原始的函數(shù)，如果對象的數(shù)量多的話，你必須為每個對象加上這個函數(shù)明顯是重復(fù)勞動了。這樣

48、說吧，o1.fun寫得非常清晰的而且為了搞掂它已經(jīng)占用了我一個星期的開發(fā)時間。想象一下代碼到處散布著 this 變量，怎么能不頭疼？如果要將調(diào)用（執(zhí)行）的 o1.fun 方法但 this 會執(zhí)行 o2,應(yīng)該怎么實現(xiàn)呢？試一試下面的：o1.fun.call(o2); 明白了嗎？當(dāng)執(zhí)行 o1 的 fun 方法時你強行將變量 this 指向到 o2 這個對象，換句話說，更加嚴謹?shù)卣f:o1.fun 的方法在對象 o2 的作用域下運行。當(dāng)運行一個函數(shù)，一個對象的方法時，你可將作用域當(dāng)作 this 值的變量。變量的可見度變量的可見度和作用域的關(guān)系非常密切。我們已經(jīng)了解到，可在任何對象的外部，聲明變量，或在

49、全局的函數(shù)（函數(shù)也是變量的一種）也可以，更嚴格說，它們是全局對象 window 的屬性。全局變量在任何地方都可見；無論函數(shù)的內(nèi)部還是外部。如果你在某一個函數(shù)內(nèi)修改了一個全局變量，其它函數(shù)也會得知這個值是修改過的。對象可以有它自己的屬性（像上面的 testvar）,這些屬性允許從內(nèi)部或是外部均是可見的。試：alert(o1.testvar); / 從外部訪問 o1 的屬性 testvar 從內(nèi)部訪問的演示可在兩個測試對象的 fun 方法找到。用關(guān)鍵字 var 在內(nèi)部聲明，相當(dāng)于聲明局部變量（局部聲明也是在一條鏈上，即 Scope Chain作用域EXT 中文手冊 pjq 收集整理17 鏈上,Fr

50、ank 注）：i = 44; function fn2() var i = 55; alert(i); fn2(); EXT 中文手冊2008將得到什么？對了，55。聲明在函數(shù) fn2 的變量 i 是一個本地變量（局部變量），和等于 44 的全局變量 i 44 沒什么關(guān)系。 But: alert(i); 這會訪問全局變量 i，顯示 44。希望本文能幫助讀者徹底理解作用域變量可見性的含義。EXT 程序規(guī)劃入門事前準(zhǔn)備本教程假設(shè)你已經(jīng)安裝好 ExtJS 庫。安裝的目錄是 extjs并位于你程序的上一級目錄。如果安裝在其它地方你必須更改路徑，更改示例文件中 script 標(biāo)簽的 src 的屬性。需要

51、些什么？除 ExtJS 庫本身外，我們還需要兩個文件：applayout.html applayout.js 先看看一份 html 文檔，比較精簡。并附有詳細說明：applayout.html EXT 中文手冊 pjq 收集整理18 EXT 中文手冊 Ext.onReady(myNameSpace.app.init, myNameSpace.app); Application Layout Tutorial 開頭的兩行聲明了文檔的類型。程序可以不用 doctype,但是這樣的話瀏覽器可能默認其為 Quirks 怪僻類型，會導(dǎo)致處理跨瀏覽器這一問題上出現(xiàn)差異。我們采用 HTML 4.01 Tra

52、nsitional 的文檔類型，該類型在主流瀏覽器上支持得不錯。當(dāng)然，你也可以根據(jù)你的需求采用其它類型的 doctype，但是記住別忘了要加上 doctype。接著指定 HTML 頭部的 Content-Type。做這些事情其實很瑣碎，但總是有益處。然后引入 EXT 的樣式，適配器和 EXTJS 本身。有兩種版本的 ExtJS：ext-all.js - 不能直接閱讀，加載時更快，用于產(chǎn)品發(fā)布ext-all-debug.js - 便于閱讀，開發(fā)階段使用, 開發(fā)階段的時候便需要引入 debug 的版本。applayout.js 這個文件就是我們的程序，緊跟著的是本地化的腳本，這里可以換成 Extj

53、s 翻譯好的版本跟著我們開始分配事件句柄(event handler)，使得在文檔全部加載完畢后，程序就可以初始化（運行）。下面的這一行：Ext.onReady(myNameSpace.app.init, myNameSpace.app); 可 這 樣 說 ： 當(dāng) 文 檔 全 部 加 載 完 畢 , 就 運 行myNameSpace.app的init方 法 , 規(guī) 定 的 作 用 域 是myNameSpace.app。然后是標(biāo)題，頭部的結(jié)尾，body （當(dāng)前空）和結(jié)束標(biāo)簽。文檔的解說就說到這兒了。applayout.js /* EXT 中文手冊 pjq 收集整理19 2008 * Applic

54、ation Layout * by Jozef Sakalos, aka Saki EXT 中文手冊2008 * /learn/Tutorial:Application_Layout_for_Beginners_(Chinese) */ /填充圖片的本地引用Ext.BLANK_IMAGE_URL = ./extjs/resources/images/default/s.gif; /創(chuàng)建命名空間Espace(myNameSpace); /創(chuàng)建應(yīng)用程序myNameSpace.app = function() /元素還沒創(chuàng)建,未能訪問 /私有變量 /私有函數(shù) /公共空間 return /公共的屬性,

55、如,要轉(zhuǎn)換的字符串 /公共方法 init: function() alert(應(yīng)用程序初始化成功。); ; (); /程序底部/文件底部文件最開始的幾行是注釋，說明該文件的主要內(nèi)容，作者，作者相關(guān)的資訊。沒有任何注釋的程序也可以正常的運行，但請記住：每次寫的程序要容易給人看得懂的 Always write your application as if you would write it for another.當(dāng)你回頭看你幾個月前寫的代碼，發(fā)現(xiàn)你根本不記得自己寫過什么的時候，就會明白這個道理，并養(yǎng)成編碼的好習(xí)慣。接著是要指向你服務(wù)器的填充圖片，如不指定則默認 。每次運行程序的時候都訪問 ，不

56、推薦這樣，應(yīng)該先修改這個常量值指向到本地?，F(xiàn)在自定義命名空間。將所有變量和方法都劃分到一個全局對象下管理，這樣的好處是避免了變量名沖突和由不同函數(shù)干擾了全局變量的值。名字（namespace）可按自己的方案選擇。EXT 中文手冊 pjq 收集整理20 EXT 中文手冊整段代碼的重點是，我們創(chuàng)建了myNameSpace 對象的屬性 app，其值是一個函數(shù)立刻運行之后的返回值。如果運行我們的代碼：var o = function() return p1:11, p2:22; (); 實際上我們創(chuàng)建了一個匿名函數(shù)（沒有名字的函數(shù)），經(jīng)過解釋（預(yù)編譯？）之后讓它立刻運行（注意函數(shù)后面的()）。最后將函

57、數(shù)返回的對象（注意此時是一個 object變量）分配到變量 o。我們的程序便是這種思路去寫的。你可以把私有變量和私有函數(shù)直接定義在 function 和 return 這兩個聲明之間，但是請切記：此時不能訪問任何 html 頁面中的元素，那會導(dǎo)致錯誤，因為這段代碼在加載時頁面的 head 中就運行了，而這時候html 頁面中的其它元素還沒有被加載進來。另外一方面，函數(shù) init,是由匿名函數(shù)返回的對象的一個方法而已。它會在文檔全部加載后才運行。換言之整個 DOM 樹已經(jīng)是可用的了。一切都還好吧如果能正確運行 /applayout/applayout.html，不出現(xiàn)什么錯誤的話將出現(xiàn)一個警告。

58、 接下來是利用這個空白的模板，討論本文的重點。公開 Public、私有 Private、特權(quán)的 Privileged？讓我們加入一些有趣內(nèi)容到程序中去吧。在頁面 applayout.html 的 body 標(biāo)簽中加入： 空白的 div 會當(dāng)作按鈕的容器來使用。然后在 applayout.js 加入下來代碼：/* * Application Layout * by Jozef Sakalos, aka Saki * /learn/Tutorial:Application_Layout_for_Beginners_(Chinese) */ / 填充圖片的本地引用Ext.BLANK_IMAGE_UR

59、L = ./extjs/resources/images/default/s.gif; /創(chuàng)建命名空間Espace(myNameSpace); /創(chuàng)建應(yīng)用程序EXT 中文手冊 pjq 收集整理21 2008myNameSpace.app = function() / 元素還沒創(chuàng)建,未能訪問 /私有變量 var btn1; var privVar1 = 11; /私有函數(shù)EXT 中文手冊2008 var btn1Handler = function(button, event) alert(privVar1= + privVar1); alert(this.btn1Text= + this.bt

60、n1Text); ; /公共空間 return /公共的屬性,如,要轉(zhuǎn)譯的字符串 btn1Text: Button 1 /公共方法 , init: function() btn1 = new Ext.Button(btn1-ct, text: this.btn1Text , handler: btn1Handler ); ; (); /程序底部/文件底部變量 btn1和 pri vVar1是私有的。 那意味著在程序外部他們是不能夠被訪問的，而且也不可見。私有函數(shù) btn1Handler 也是同樣道理。另外一個方面，btn1Text 是公共變量所以可以被程序外部訪問或者是修改（我們稍后將會演示）