EXT中文手冊說課材料

1、Good is good, but better carries it.精益求精，善益求善。EXT中文手冊EXT中文手冊開發(fā)必備該文檔內(nèi)容取自互聯(lián)網(wǎng)，詳細的介紹了EXT的各部分內(nèi)容，希望對大家有所幫助pjq2008-5-252EXT中文手冊EXT中文手冊前言本手冊所有內(nèi)容均粘貼自互聯(lián)網(wǎng)，如有錯誤，請多見諒。EXT中文手冊pjq收集整理20083EXT中文手冊目錄HYPERLINK#1EXTHYPERLINK#1中文手冊HYPERLINK#11HYPERLINK#5EXTHYPERLINK#5簡介HYPERLINK#55HYPERLINK#5目錄HYPERLINK#55HYPERLINK#6下載

2、HYPERLINK#6Ext6HYPERLINK#6開始！HYPERLINK#66HYPERLINK#6ElementHYPERLINK#6：HYPERLINK#6ExtHYPERLINK#6的核心HYPERLINK#66HYPERLINK#7獲取多個HYPERLINK#7DOMHYPERLINK#7的節(jié)點HYPERLINK#77HYPERLINK#7響應事件HYPERLINK#77HYPERLINK#9使用HYPERLINK#9Widgets9HYPERLINK#11使用HYPERLINK#11Ajax11HYPERLINK#13EXTHYPERLINK#13源碼概述HYPERLINK#13

3、13HYPERLINK#13揭示源代碼HYPERLINK#1313HYPERLINK#14發(fā)布HYPERLINK#14ExtHYPERLINK#14源碼時的一些細節(jié)HYPERLINK#1414HYPERLINK#15我應該從哪里開始？HYPERLINK#1515HYPERLINK#15適配器HYPERLINK#15Adapters15HYPERLINK#15核心HYPERLINK#15Core15HYPERLINK#15JavascriptHYPERLINK#15中的作用域（HYPERLINK#15scopeHYPERLINK#15）HYPERLINK#1515HYPERLINK#15事前準備

4、HYPERLINK#1515HYPERLINK#15定義HYPERLINK#1515HYPERLINK#16正式開始HYPERLINK#1616HYPERLINK#16windowHYPERLINK#16對象HYPERLINK#1616HYPERLINK#17理解作用域HYPERLINK#1717HYPERLINK#17變量的可見度HYPERLINK#1717HYPERLINK#18EXTHYPERLINK#18程序規(guī)劃入門HYPERLINK#1818HYPERLINK#18事前準備HYPERLINK#1818HYPERLINK#18需要些什么？HYPERLINK#1818HYPERLINK#

5、18applayout.html18HYPERLINK#19applayout.js19HYPERLINK#21公開HYPERLINK#21PublicHYPERLINK#21、私有HYPERLINK#21PrivateHYPERLINK#21、特權(quán)的HYPERLINK#21PrivilegedHYPERLINK#21？HYPERLINK#2121HYPERLINK#23重寫公共變量HYPERLINK#2323HYPERLINK#23重寫（HYPERLINK#23OverridingHYPERLINK#23）公共函數(shù)HYPERLINK#2323HYPERLINK#24DomQueryHYPER

6、LINK#24基礎(chǔ)HYPERLINK#2424HYPERLINK#24DomQueryHYPERLINK#24基礎(chǔ)HYPERLINK#2424HYPERLINK#31擴展HYPERLINK#31EXTHYPERLINK#31組件HYPERLINK#3131HYPERLINK#31文件的創(chuàng)建HYPERLINK#3131HYPERLINK#35Letsgo35HYPERLINK#37完成HYPERLINK#3737HYPERLINK#39EXTHYPERLINK#39的布局（HYPERLINK#39LayoutHYPERLINK#39）HYPERLINK#3939HYPERLINK#40簡單的例子

7、HYPERLINK#4040HYPERLINK#43加入內(nèi)容HYPERLINK#4343HYPERLINK#53開始使用HYPERLINK#53Grid53EXT中文手冊pjq收集整理20084EXT中文手冊HYPERLINK#53步驟一HYPERLINK#53HYPERLINK#53定義數(shù)據(jù)HYPERLINK#53(DataDefinition)53HYPERLINK#54步驟二HYPERLINK#54HYPERLINK#54列模型（HYPERLINK#54ColumnModelHYPERLINK#54）HYPERLINK#5454HYPERLINK#55GridHYPERLINK#55組件

8、的簡易分頁HYPERLINK#5555HYPERLINK#55Grid數(shù)據(jù)HYPERLINK#5555HYPERLINK#56怎么做一個分頁的GridHYPERLINK#5656HYPERLINK#56分頁欄ToolbarHYPERLINK#5656HYPERLINK#57EXTMenuHYPERLINK#57組件HYPERLINK#5757HYPERLINK#57創(chuàng)建簡易菜單HYPERLINK#5757HYPERLINK#59各種Item的類型HYPERLINK#5959HYPERLINK#59Item屬性HYPERLINK#5959HYPERLINK#59在UI中擺放菜單HYPERLINK

9、#5959HYPERLINK#60Menu的分配方式：HYPERLINK#6060HYPERLINK#62練一練HYPERLINK#6262HYPERLINK#62動態(tài)添加菜單按鈕到ToolbarHYPERLINK#6262HYPERLINK#63更方便的是HYPERLINK#6363HYPERLINK#63下一步是HYPERLINK#6363HYPERLINK#63模板（HYPERLINK#63TemplatesHYPERLINK#63）起步HYPERLINK#6363HYPERLINK#63第一步HYPERLINK#63HYPERLINK#63您的HYPERLINK#63HTMLHYPER

10、LINK#63模板HYPERLINK#6363HYPERLINK#64第二步，將數(shù)據(jù)加入到模板中HYPERLINK#6464HYPERLINK#64下一步HYPERLINK#6464HYPERLINK#64學習利用模板（HYPERLINK#64TemplatesHYPERLINK#64）的格式化功能HYPERLINK#6464HYPERLINK#64正式開始HYPERLINK#6464HYPERLINK#66下一步HYPERLINK#6666HYPERLINK#66事件處理HYPERLINK#6666HYPERLINK#66非?；A(chǔ)的例子HYPERLINK#6666HYPERLINK#66處理

11、函數(shù)的作用域HYPERLINK#6666HYPERLINK#67傳遞參數(shù)HYPERLINK#6767HYPERLINK#67類設(shè)計HYPERLINK#6767HYPERLINK#67對象創(chuàng)建HYPERLINK#6767HYPERLINK#68使用構(gòu)造器函數(shù)HYPERLINK#6868HYPERLINK#68方法共享HYPERLINK#6868HYPERLINK#69表單組件入門HYPERLINK#6969HYPERLINK#69表單體HYPERLINK#6969HYPERLINK#69創(chuàng)建表單字段HYPERLINK#6969HYPERLINK#70完成表單HYPERLINK#7070HYPER

12、LINK#71下一步HYPERLINK#7171HYPERLINK#71為一個表單填充或提交數(shù)據(jù)HYPERLINK#7171HYPERLINK#71讓我們開始吧HYPERLINK#7171HYPERLINK#72讀取我們的數(shù)據(jù)HYPERLINK#7272HYPERLINK#73EXTHYPERLINK#73中的繼承HYPERLINK#7373HYPERLINK#74補充資料HYPERLINK#7474HYPERLINK#74Ext2HYPERLINK#74概述HYPERLINK#7474HYPERLINK#76組件模型HYPERLINK#76ComponentModel76HYPERLINK#

13、80容器模型HYPERLINK#80ContainerModel80EXT中文手冊pjq收集整理20085EXT中文手冊HYPERLINK#81布局HYPERLINK#81Layouts81HYPERLINK#84Grid84HYPERLINK#84XTemplate84HYPERLINK#85DataView85HYPERLINK#85其它新組件HYPERLINK#8585HYPERLINK#86EXT2HYPERLINK#86簡介HYPERLINK#8686HYPERLINK#86下載HYPERLINK#86Ext86HYPERLINK#87開始！HYPERLINK#8787HYPERLI

14、NK#87ElementHYPERLINK#87：HYPERLINK#87ExtHYPERLINK#87的核心HYPERLINK#8787HYPERLINK#88獲取多個HYPERLINK#88DOMHYPERLINK#88的節(jié)點HYPERLINK#8888HYPERLINK#88響應事件HYPERLINK#8888HYPERLINK#90使用HYPERLINK#90Widgets90HYPERLINK#93編輯HYPERLINK#93HYPERLINK#93使用HYPERLINK#93Ajax93HYPERLINK#96TabPanelHYPERLINK#96基礎(chǔ)HYPERLINK#9696

15、HYPERLINK#96Step1:HYPERLINK#96創(chuàng)建HYPERLINK#96HTMLHYPERLINK#96骨架HYPERLINK#9696HYPERLINK#97Step2:ExtHYPERLINK#97結(jié)構(gòu)的構(gòu)建HYPERLINK#9797HYPERLINK#99Step3:HYPERLINK#99創(chuàng)建HYPERLINK#99TabHYPERLINK#99控制邏輯HYPERLINK#9999EXT簡介無論你是Ext庫的新手，抑或是想了解Ext的人，本篇文章的內(nèi)容都適合你。本文將簡單地介紹Ext的幾個基本概念，和如何快速地做出一個動態(tài)的頁面并運行起來，假設(shè)讀者已具備了一些Java

16、Script經(jīng)驗和初級了解HTMLDom。目錄HYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#.E4.B8.8B.E8.BD.BDExt1HYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#.E4.B8.8B.E8.BD.BDExt下載HYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#.E4.B8.8B.E8.BD.BDExtExtHYPERLINK/learn/Tutorial:Introd

17、uction_to_Ext_%28Chinese%29#.E4.B8.8B.E8.BD.BDExtHYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#.E5.BC.80.E5.A7.8B.EF.BC.812HYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#.E5.BC.80.E5.A7.8B.EF.BC.81開始！HYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#.E5.BC.80.E5.A7.

18、8B.EF.BC.81HYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#Element.EF.BC.9AExt.E7.9A.84.E6.A0.B8.E5.BF.833ElementHYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#Element.EF.BC.9AExt.E7.9A.84.E6.A0.B8.E5.BF.83：HYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#Element.EF.

19、BC.9AExt.E7.9A.84.E6.A0.B8.E5.BF.83ExtHYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#Element.EF.BC.9AExt.E7.9A.84.E6.A0.B8.E5.BF.83的核心HYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#Element.EF.BC.9AExt.E7.9A.84.E6.A0.B8.E5.BF.83HYPERLINK/learn/Tutorial:Introduction_to_Ext_%28C

20、hinese%29#.E8.8E.B7.E5.8F.96.E5.A4.9A.E4.B8.AADOM.E7.9A.84.E8.8A.82.E7.82.B94HYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#.E8.8E.B7.E5.8F.96.E5.A4.9A.E4.B8.AADOM.E7.9A.84.E8.8A.82.E7.82.B9獲取多個HYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#.E8.8E.B7.E5.8F.96.E5.A4.9A.E4.B8.A

21、ADOM.E7.9A.84.E8.8A.82.E7.82.B9DOMHYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#.E8.8E.B7.E5.8F.96.E5.A4.9A.E4.B8.AADOM.E7.9A.84.E8.8A.82.E7.82.B9的節(jié)點HYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#.E8.8E.B7.E5.8F.96.E5.A4.9A.E4.B8.AADOM.E7.9A.84.E8.8A.82.E7.82.B9HYPERLINK/lea

22、rn/Tutorial:Introduction_to_Ext_%28Chinese%29#.E5.93.8D.E5.BA.94.E4.BA.8B.E4.BB.B65HYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#.E5.93.8D.E5.BA.94.E4.BA.8B.E4.BB.B6響應事件HYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#.E5.93.8D.E5.BA.94.E4.BA.8B.E4.BB.B6HYPERLINK/learn/Tutoria

23、l:Introduction_to_Ext_%28Chinese%29#.E4.BD.BF.E7.94.A8Widgets6HYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#.E4.BD.BF.E7.94.A8Widgets使用HYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#.E4.BD.BF.E7.94.A8WidgetsWidgetsHYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#.E

24、4.BD.BF.E7.94.A8WidgetsoHYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#MessageBox6.1MessageBoxHYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#MessageBoxoHYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#Grid6.2GridHYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chines

25、e%29#GridoHYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#.E8.BF.98.E6.9C.89.E6.9B.B4.E5.A4.9A.E7.9A.84.6.3HYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#.E8.BF.98.E6.9C.89.E6.9B.B4.E5.A4.9A.E7.9A.84.還有更多的HYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#.E8.BF.98.E6.

26、9C.89.E6.9B.B4.E5.A4.9A.E7.9A.84.HYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#.E8.BF.98.E6.9C.89.E6.9B.B4.E5.A4.9A.E7.9A.84.HYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#.E4.BD.BF.E7.94.A8Ajax7HYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#.E4.BD.BF.E7.94.A8Aja

27、x使用HYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#.E4.BD.BF.E7.94.A8AjaxAjaxHYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#.E4.BD.BF.E7.94.A8AjaxoHYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#PHP7.1PHPHYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#PHP

28、oHYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#ASP.Net7.2ASP.NetHYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#ASP.NetoHYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#Cold_Fusion7.3ColdFusionHYPERLINK/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#Cold_FusionEXT

29、中文手冊pjq收集整理2008下載ExtEXT中文手冊20086如果你未曾下載過，那應從這里下載最新版本的ExtHYPERLINK/downloadsHYPERLINK/downloads/downloadsHYPERLINK/downloads。針對你的下載需求，有幾個不同的彈性選項。通常地，最穩(wěn)定的版本，是較多人的選擇。下載解包后，那個example文件夾便是一個探索Ext的好地方！開始！DownloadExampleFileHYPERLINK/downloads/tutorial/introduction-ext/IntroToExt.zipIntroToExt.zipHYPERLINK

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

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

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

33、Div，然后，在ExtStart.js中加入下列語句）：EXT中文手冊pjq收集整理7EXT中文手冊Ext.onReady(function()varmyDiv=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é)點的動作，并且是跨瀏覽器的定位的位置、大小、動畫、拖放等等（add/removeCSSc

34、lasses,add/removeeventhandlers,positioning,sizing,animation,drag/drop）。這意味著你可用少量的代碼來做各種各樣的事情，這里僅僅是一個簡單的例子（完整的列表在ElementAPI中）。繼續(xù)在ExtStart.js中，在剛才我們獲取好myDiv的位置中加入：myDiv.highlight();/黃色高亮顯示然后漸退myDiv.addClass(red);/添加自定義CSS類(在ExtStart.css定義)myDiv.center();/在視圖中將元素居中myDiv.setOpacity(.25);/使元素半透明獲取多個DOM的節(jié)

35、點通常情況下，想獲取多個DOM的節(jié)點，難以依靠ID的方式來獲取。有可能因為沒設(shè)置ID,或者你不知道ID,又或者直接用ID方式引用有太多元素了。這種情況下，你就會不用ID來作為獲取元素的依據(jù)，可能會用屬性（attribute）或CSSClassname代替?；谝陨系脑?，Ext引入了一個功能異常強大的DomSelector庫，叫做DomQuery。DomQuery可作為單獨的庫使用，但常用于Ext，你可以在上下文環(huán)境中（Context）獲取多個元素，然后通過Element接口調(diào)用。令人欣喜的是，Element對象本身便有Element.selcect的方法來實現(xiàn)查詢，即內(nèi)部調(diào)用DomQuery

36、選取元素。這個簡單的例子中，ExtStart.htm包含若干段落（標簽），沒有一個是有ID的，而你想輕松地通過一次操作馬上獲取每一段，全體執(zhí)行它們的動作，可以這樣做：/每段高亮顯示Ext.select(p).highlight();DomQuery的選取參數(shù)是一段較長的數(shù)組，其中包括W3CCSS3Dom選取器、基本XPatch、HTML屬性和更多，請參閱DomQueryAPI文檔以了解這功能強大的庫個中細節(jié)。響應事件到這范例為止，我們所寫的代碼都是放在onReady中，即當頁面加載后總會立即執(zhí)行，功能較單一這樣的話，你便知道，如何響應某個動作或事件來執(zhí)行你希望做的事情，做法是，先分配一個fun

37、ction，再定義一個eventhandler事件處理器來響應。我們由這個簡單的范例開始，打開ExtStart.js，編輯下列的代EXT中文手冊pjq收集整理2008碼：Ext.onReady(function()EXT中文手冊2008);Ext.get(myButton).on(click,function()alert(Youclickedthebutton););加載好頁面，代碼依然會執(zhí)行，不過區(qū)別是，包含alert()的function是已定義好的，但它不會立即地8被執(zhí)行，是分配到按鈕的單擊事件中。用淺顯的文字解釋，就是：獲取ID為myDottom元素的引用，監(jiān)聽任何發(fā)生這個元素上被單

38、擊的情況，并分配一個function,以準備任何單擊元素的情況。正路來說，Element.select也能做同樣的事情，即作用在獲取一組元素上。下一例中，演示了頁面中的某一段落被單擊后，便有彈出窗口：Ext.onReady(function()Ext.select(p).on(click,function()alert(Youclickedaparagraph);););這兩個例子中，事件處理的function均是簡單幾句，沒有函數(shù)的名稱，這種類型函數(shù)稱為匿名函數(shù)（anonymousfunction），即是沒有名的的函數(shù)。你也可以分配一個有名字的eventhandler,這對于代碼的重用或多個

39、事件很有用。下一例等效于上一例：Ext.onReady(function()varparagraphClicked=function()alert(Youclickedaparagraph);Ext.select(p).on(click,paragraphClicked););到目前為止，我們已經(jīng)知道如何執(zhí)行某個動作。但當事件觸發(fā)時，我們?nèi)绾蔚弥@個eventhandler執(zhí)行時是作用在哪一個特定的元素上呢？要明確這一點非常簡單，Element.on方法傳入到evenhandler的function中（我們這里先討論第一個參數(shù)，不過你應該瀏覽API文檔以了解evenhandler更多的細節(jié)）。

40、在我們之前的例子中，function是忽略這些參數(shù)的，到這里可有少許的改變，我們在功能上提供了更深層次的控制。必須先說明的是，這實際上是Ext的事件對象（eventobject）,一個跨瀏覽器和擁有更多控制的事件的對象。例如，可以用下列的語句，得到這個事件響應所在的DOM節(jié)點：Ext.onReady(function()varparagraphClicked=function(e)Ext.get(e.target).highlight();Ext.select(p).on(click,paragraphClicked);EXT中文手冊pjq收集整理);EXT中文手冊注意得到的e.target是

41、DOM節(jié)點，所以我們首先將其轉(zhuǎn)換成為EXT的Elemnet元素，然后執(zhí)行欲完20089成的事件，這個例子中，我們看見段落是高亮顯示的。使用Widgets(Widget原意為“小器件”，現(xiàn)指頁面中UI控件)除了我們已經(jīng)討論過的核心JavaScript庫，當前的Ext亦包括了一系列的最前端的JavaScirptUI組件庫。文本以一個常用的widget為例子，作簡單的介紹。MessageBox比起略為沉悶的HelloWolrd消息窗口，我們做少許變化，前面我們寫的代碼是，單擊某個段落便會高亮顯示，現(xiàn)在是單擊段落，在消息窗口中顯示段落內(nèi)容出來。在上面的paragraphClicked的function

42、中，將這行代碼：Ext.get(e.target).highlight();替換為：varparagraph=Ext.get(e.target);paragraph.highlight();Ext.MessageBox.show(title:ParagraphClicked,msg:paragraph.dom.innerHTML,width:400,buttons:Ext.MessageBox.OK,animEl:paragraph);這里有些新的概念需要討論一下。在第一行中我們創(chuàng)建了一個局部變量（LocalVariable）來保存某個元素的引用，即被單擊的那個DOM節(jié)點（本例中，DOM節(jié)點指

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

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

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

46、9/112:00am,Ext,83.81,0.28,0.34,9/1212:00am,Google,71.72,0.02,0.03,10/112:00am,Microsoft,52.55,0.01,0.02,7/412:00am,Yahoo!,29.01,0.42,1.47,5/2212:00am;vards=newExt.data.Store(proxy:newExt.data.MemoryProxy(myData),reader:newExt.data.ArrayReader(id:0,name:company,name:price,type:float,name:change,type:

47、float,name:pctChange,type:float,name:lastChange,type:date,dateFormat:n/jh:ia);ds.load();varcolModel=newExt.grid.ColumnModel(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:%Chang

48、e,width:90,sortable:true,dataIndex:pctChange,header:LastUpdated,width:120,sortable:true,EXT中文手冊pjq收集整理102008lastChange);renderer:EXT中文手冊Ext.util.Format.dateRenderer(m/d/Y),dataIndex:2008vargrid=newExt.grid.Grid(grid-example,ds:ds,cm:colModel);grid.render();grid.getSelectionModel().selectFirstRow();)

49、;這看上去很復雜，但實際上加起來，只有七行代碼。第一行創(chuàng)建數(shù)組并作為數(shù)據(jù)源。實際案例中，你很可能從數(shù)據(jù)庫、或者WebService那里得到動態(tài)的數(shù)據(jù)。接著，我們創(chuàng)建并加載datastore，datastore將會告訴Ext的底層庫接手處理和格式化這些數(shù)據(jù)。接著，我們定義一個column模型，用來輕松地調(diào)配Grid的每一列參數(shù)。最后我們生成這個Grid,傳入datastore和column模型兩個對象，進行渲染并選好第一行。不是太困難吧？如果一切順利，完成之后你會看到像這樣的：當然，你可能未掌握這段代碼的某些細節(jié)（像MemoryProxy究竟是什么？）但先不要緊，這個例子的目的是告訴你，用少量的

50、代碼，創(chuàng)建一個富界面的多功能的UI組件而已這是完全可能的，只要讀者您有興趣學習。這兒有許多學習Grid的資源。ExtGrid教程、交叉Gird演示和GridAPI文檔。還有更多的.這只是冰山一角。還有一打的UIWidgets可以供調(diào)用，如layouts,tabs,menus,toolbars,dialogs,treeview等等。請參閱API文檔中范例演示。使用Ajax在弄好一些頁面后，你已經(jīng)懂得在頁面和腳本之間的交互原理（interact）。接下來，你應該掌握的是，怎樣與遠程服務器（remoteserver）交換數(shù)據(jù)，常見的是從數(shù)據(jù)庫加載數(shù)據(jù)（load）或是保存數(shù)據(jù)（save）到數(shù)據(jù)庫中。通

51、過JavaScript異步無刷新交換數(shù)據(jù)的這種方式，就是所謂的Ajax。Ext內(nèi)建卓越的Ajax支持，例如，一個普遍的用戶操作就是，異步發(fā)送一些東西到服務器，然后，UI元素根據(jù)回應（Response）作出更新。這是一個包含textinput的表單，一個div用于顯示消息（注意，你可以在ExtStart.html中加入下列代碼，但這必須要訪問服務器）：EXT中文手冊pjq收集整理11EXT中文手冊Name:接著，我們加入這些處理交換數(shù)據(jù)的JavaScript代碼到文件ExtStart.js中(用下面的代碼覆蓋)：Ext.onReady(function()Ext.get(oKButton).on

52、(click,function()varmsg=Ext.get(msg);msg.load(url:serverurl,/換成你的URLparams:name=+Ext.get(name).dom.value,text:Updating.);msg.show();););這種模式看起來已經(jīng)比較熟悉了吧！先獲取按鈕元素，加入單擊事件的監(jiān)聽。在事件處理器中（eventhandler），我們使用一個負責處理Ajax請求、接受響應（Response）和更新另一個元素的Ext內(nèi)建類，稱作UpdateManager。UpdateManager可以直接使用，或者和我們現(xiàn)在的做法一樣，通過Element的lo

53、ad方法來引用（本例中該元素是id為msg的div）。當使用Element.load方法，請求（request)會在加工處理后發(fā)送，等待服務器的響應（Response），來自動替換元素的innerHTML。簡單傳入服務器url地址，加上字符串參數(shù)，便可以處理這個請求（本例中，參數(shù)值來自name元素的value),而text值是請求發(fā)送時提示的文本，完畢后顯示那個msg的div（因為開始時默認隱藏）。當然，和大多數(shù)Ext組件一樣，UpdateManager有許多的參數(shù)可選，不同的Ajax請求有不同的方案。而這里僅演示最簡單的那種。PHPASP.NetprotectedvoidPage_Load(

54、objectsender,EventArgse)if(Requestname!=null)EXT中文手冊pjq收集整理122008EXT中文手冊Response.Write(FromServer:+Requestname);Response.End();2008ColdFusionFromServer:#最后一個關(guān)于Ajax隱晦的地方就是，服務器實際處理請求和返回（Resposne）是具體過程。這個過程會是一個服務端頁面，一個Servlet，一個Http調(diào)度過程，一個WebService,甚至是Perl或CGI腳本，即不指定一個服務器都可以處理的http請求。讓人無法預料的是，服務器返回什么是

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

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

57、*Copyright(c)2006-2007,ExtJS,LLC.EXT中文手冊pjq收集整理13*licensing*/license*/EXT中文手冊2008Ext.DomHelper=function()var_1=null;var_2=/(?:br|frame.Ext.Template=function(_1)if(_1instanceofArray)_1.接著看下去的是ext-core-debug.js（注意在文件名后面加上-debug的JS文件），我會發(fā)現(xiàn)是全部已格式化好的源代碼。這個文件是配合調(diào)時器所使用的，HYPERLINK/learn/Manual:Resources#Fir

58、ebug像HYPERLINK/learn/Manual:Resources#FirebugFirebugHYPERLINK/learn/Manual:Resources#Firebug的工具能夠可以讓你一步一步地、一行一行地調(diào)試代碼。你也會發(fā)現(xiàn)文件的體積將近大了一倍之多，這便是沒有壓縮或混淆的緣故。ext-core-debug.js/*ExtJSLibrary1.1*Copyright(c)2006-2007,ExtJS,LLC.*licensing*/license*/Ext.DomHelper=function()vartempTableEl=null;varemptyTags=/(?:b

59、r|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i;vartableRe=/table|tbody|tr|td$/i;.該調(diào)試版本可以在調(diào)試階段方便地檢查EXT庫運行到哪一步，但是你還是會錯過一個有價值的.代碼注釋！要完整地看到代碼，就要閱讀真正的原始代碼！發(fā)布Ext源碼時的一些細節(jié)HYPERLINK/download你在HYPERLINK/downloaddownloadHYPERLINK/download得到的壓縮文檔，包含在這些文件夾之中的，有一source的子目錄。在這個文件夾里面，正如所料，是全部的EX

60、T的源文件，遵HYPERLINK/licenses/lgpl.html從HYPERLINK/licenses/lgpl.htmlLesserGNUHYPERLINK/licenses/lgpl.html（HYPERLINK/licenses/lgpl.htmlLGPLHYPERLINK/licenses/lgpl.html）HYPERLINK/licenses/lgpl.htmlHYPERLINK/licenses/lgpl.html開源的協(xié)議HYPERLINK/licenses/lgpl.html。對于EXT開發(fā)者來說應該非常適合。用你日常使用文本編輯器打開源代碼的任意一個文件（推薦有高亮顯