EXT中文手冊(cè)說(shuō)課材料

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

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

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

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

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

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

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

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

9、#5959HYPERLINK#60Menu的分配方式：HYPERLINK#6060HYPERLINK#62練一練HYPERLINK#6262HYPERLINK#62動(dòng)態(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學(xué)習(xí)利用模板（HYPERLINK#64TemplatesHYPERLINK#64）的格式化功能HYPERLINK#6464HYPERLINK#64正式開(kāi)始HYPERLINK#6464HYPERLINK#66下一步HYPERLINK#6666HYPERLINK#66事件處理HYPERLINK#6666HYPERLINK#66非?；A(chǔ)的例子HYPERLINK#6666HYPERLINK#66處理

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

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

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

14、NK#87ElementHYPERLINK#87：HYPERLINK#87ExtHYPERLINK#87的核心HYPERLINK#8787HYPERLINK#88獲取多個(gè)HYPERLINK#88DOMHYPERLINK#88的節(jié)點(diǎn)HYPERLINK#8888HYPERLINK#88響應(yīng)事件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簡(jiǎn)介無(wú)論你是Ext庫(kù)的新手，抑或是想了解Ext的人，本篇文章的內(nèi)容都適合你。本文將簡(jiǎn)單地介紹Ext的幾個(gè)基本概念，和如何快速地做出一個(gè)動(dòng)態(tài)的頁(yè)面并運(yùn)行起來(lái)，假設(shè)讀者已具備了一些Java

16、Script經(jīng)驗(yàn)和初級(jí)了解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開(kāi)始！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獲取多個(gè)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é)點(diǎn)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響應(yīng)事件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、中文手冊(cè)pjq收集整理2008下載ExtEXT中文手冊(cè)20086如果你未曾下載過(guò)，那應(yīng)從這里下載最新版本的ExtHYPERLINK/downloadsHYPERLINK/downloads/downloadsHYPERLINK/downloads。針對(duì)你的下載需求，有幾個(gè)不同的彈性選項(xiàng)。通常地，最穩(wěn)定的版本，是較多人的選擇。下載解包后，那個(gè)example文件夾便是一個(gè)探索Ext的好地方！開(kāi)始！DownloadExampleFileHYPERLINK/downloads/tutorial/introduction-ext/IntroToExt.zipIntroToExt.zipHYPERLINK

30、/downloads/tutorial/introduction-ext/IntroToExt.zip我們將使用Ext，來(lái)完成一些JavaScript任務(wù)。Zip文件包括三個(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看

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

32、tElementById(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ú)論是訪(fǎng)問(wèn)元素（elements）還是完成一些其他動(dòng)作，都要涉及它。Element的API是整個(gè)Ext庫(kù)的基礎(chǔ)，如果你時(shí)間不多，只是想了解Ext中的一兩個(gè)類(lèi)的話(huà)，Element一定是首選！由ID獲取一個(gè)ExtElement如下（首頁(yè)ExtStart.htm包含一個(gè)div，ID名字為my

33、Div，然后，在ExtStart.js中加入下列語(yǔ)句）：EXT中文手冊(cè)pjq收集整理7EXT中文手冊(cè)Ext.onReady(function()varmyDiv=Ext.get(myDiv););再回頭看看Element對(duì)象，發(fā)現(xiàn)什么有趣的東東呢？Element包含了常見(jiàn)的DOM方法和屬性，提供一個(gè)快捷的、統(tǒng)一的、跨瀏覽器的接口（若使用Element.dom的話(huà)，就可以直接訪(fǎng)問(wèn)底層DOM的節(jié)點(diǎn)。）；Element.get()方法內(nèi)置緩存處理（Cache)，多次訪(fǎng)問(wèn)同一對(duì)象效率上有極大優(yōu)勢(shì)；內(nèi)置常用的DOM節(jié)點(diǎn)的動(dòng)作，并且是跨瀏覽器的定位的位置、大小、動(dòng)畫(huà)、拖放等等（add/removeCSSc

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

35、點(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）或CSSClassname代替?；谝陨系脑?，Ext引入了一個(gè)功能異常強(qiáng)大的DomSelector庫(kù)，叫做DomQuery。DomQuery可作為單獨(dú)的庫(kù)使用，但常用于Ext，你可以在上下文環(huán)境中（Context）獲取多個(gè)元素，然后通過(guò)Element接口調(diào)用。令人欣喜的是，Element對(duì)象本身便有Element.selcect的方法來(lái)實(shí)現(xiàn)查詢(xún)，即內(nèi)部調(diào)用DomQuery

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

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

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

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

40、在我們之前的例子中，function是忽略這些參數(shù)的，到這里可有少許的改變，我們?cè)诠δ苌咸峁┝烁顚哟蔚目刂?。必須先說(shuō)明的是，這實(shí)際上是Ext的事件對(duì)象（eventobject）,一個(gè)跨瀏覽器和擁有更多控制的事件的對(duì)象。例如，可以用下列的語(yǔ)句，得到這個(gè)事件響應(yīng)所在的DOM節(jié)點(diǎn)：Ext.onReady(function()varparagraphClicked=function(e)Ext.get(e.target).highlight();Ext.select(p).on(click,paragraphClicked);EXT中文手冊(cè)pjq收集整理);EXT中文手冊(cè)注意得到的e.target是

41、DOM節(jié)點(diǎn)，所以我們首先將其轉(zhuǎn)換成為EXT的Elemnet元素，然后執(zhí)行欲完20089成的事件，這個(gè)例子中，我們看見(jiàn)段落是高亮顯示的。使用Widgets(Widget原意為“小器件”，現(xiàn)指頁(yè)面中UI控件)除了我們已經(jīng)討論過(guò)的核心JavaScript庫(kù)，當(dāng)前的Ext亦包括了一系列的最前端的JavaScirptUI組件庫(kù)。文本以一個(gè)常用的widget為例子，作簡(jiǎn)單的介紹。MessageBox比起略為沉悶的HelloWolrd消息窗口，我們做少許變化，前面我們寫(xiě)的代碼是，單擊某個(gè)段落便會(huì)高亮顯示，現(xiàn)在是單擊段落，在消息窗口中顯示段落內(nèi)容出來(lá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)建了一個(gè)局部變量（LocalVariable）來(lái)保存某個(gè)元素的引用，即被單擊的那個(gè)DOM節(jié)點(diǎn)（本例中，DOM節(jié)點(diǎn)指

43、的是段落paragrah,事因我們已經(jīng)定義該事件與標(biāo)簽發(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è)Objectliteral,包含一組屬性和

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

45、.show()。例如，我們說(shuō)這兒的foo.action方法，有四個(gè)參數(shù)，而只有一個(gè)是你必須傳入的。本例中，你想像中的代碼可能會(huì)是這樣的foo.action(null,null,null,hello).,若果那方法用ObjectLiteral來(lái)寫(xiě)，卻是這樣，foo.action(param4:hello)，這更易用和易讀。GridGrid是Ext中人們最想先睹為快的和最為流行Widgets之一。好，讓我們看看怎么輕松地創(chuàng)建一個(gè)Grid并運(yùn)行。用下列代碼替換ExtStart.js中全部語(yǔ)句：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中文手冊(cè)pjq收集整理102008lastChange);renderer:EXT中文手冊(cè)Ext.util.Format.dateRenderer(m/d/Y),dataIndex:2008vargrid=newExt.grid.Grid(grid-example,ds:ds,cm:colModel);grid.render();grid.getSelectionModel().selectFirstRow();)

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

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

51、過(guò)JavaScript異步無(wú)刷新交換數(shù)據(jù)的這種方式，就是所謂的Ajax。Ext內(nèi)建卓越的Ajax支持，例如，一個(gè)普遍的用戶(hù)操作就是，異步發(fā)送一些東西到服務(wù)器，然后，UI元素根據(jù)回應(yīng)（Response）作出更新。這是一個(gè)包含textinput的表單，一個(gè)div用于顯示消息（注意，你可以在ExtStart.html中加入下列代碼，但這必須要訪(fǎng)問(wèn)服務(wù)器）：EXT中文手冊(cè)pjq收集整理11EXT中文手冊(cè)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();););這種模式看起來(lái)已經(jīng)比較熟悉了吧！先獲取按鈕元素，加入單擊事件的監(jiān)聽(tīng)。在事件處理器中（eventhandler），我們使用一個(gè)負(fù)責(zé)處理Ajax請(qǐng)求、接受響應(yīng)（Response）和更新另一個(gè)元素的Ext內(nèi)建類(lèi)，稱(chēng)作UpdateManager。UpdateManager可以直接使用，或者和我們現(xiàn)在的做法一樣，通過(guò)Element的lo

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

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

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

56、些什么了。下面的資源有助您進(jìn)一步深入了解：EXT源碼概述揭示源代碼Javascript是一門(mén)解釋型的語(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)和注釋?zhuān)蚧煜鹊姆椒?，以減小文件大小。仔細(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/*ExtJSLibrary1.1

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

58、ebug像HYPERLINK/learn/Manual:Resources#FirebugFirebugHYPERLINK/learn/Manual:Resources#Firebug的工具能夠可以讓你一步一步地、一行一行地調(diào)試代碼。你也會(huì)發(fā)現(xiàn)文件的體積將近大了一倍之多，這便是沒(méi)有壓縮或混淆的緣故。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庫(kù)運(yùn)行到哪一步，但是你還是會(huì)錯(cuò)過(guò)一個(gè)有價(jià)值的.代碼注釋?zhuān)∫暾乜吹酱a，就要閱讀真正的原始代碼！發(fā)布Ext源碼時(shí)的一些細(xì)節(jié)HYPERLINK/download你在HYPERLINK/downloaddownloadHYPERLINK/download得到的壓縮文檔，包含在這些文件夾之中的，有一source的子目錄。在這個(gè)文件夾里面，正如所料，是全部的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開(kāi)源的協(xié)議HYPERLINK/licenses/lgpl.html。對(duì)于EXT開(kāi)發(fā)者來(lái)說(shuō)應(yīng)該非常適合。用你日常使用文本編輯器打開(kāi)源代碼的任意一個(gè)文件（推薦有高亮顯