ExtJS培訓進階教程

1、PAGE Extjjs入門門培訓軟件就是是服務Extjs培訓 SUBJECT * MERGEFORMAT PAGE ii目錄TOC o 1-3 h z u HYPERLINK l _Toc382414606 1什么是ExtJs 頁 共17頁什么是EExtJJsExttJs是可以以用來開開發(fā)帶有有華麗外外觀的富富客戶端端應用，使使得我們們的b/s應用用更加具具有活力力及生命命力，提提高用戶戶體驗。ExtJJs是一個個用jaavasscriipt編編寫，與與后臺技技術無關關的前端端ajaax框架架。因此此，可以以把ExxtJss用在.NNet、Javva、Phpp等各種種開發(fā)語語言開發(fā)發(fā)的應用用中

2、。ExtJJs的使使用獲取ExxtJss獲取ExxtJss網址：htttp:/exxtjss.coom.ccn/ddownnloaad公司使用用ExttJs版版本為22.0應用Exxtjss應用exxtjss需要在在頁面中中引入eextjjs的樣樣式及eextjjs庫文文件，樣樣式文件件為reesouurcees/ccss/extt-alll.ccss，exttjs的的js庫文文件主要要包含兩兩個，aadappterr/exxt/eext-basse.jjs及extt-alll.jjs(eext/buiild/loccalee/exxt-llangg-zhh_CNN.jss)，其中中extt-

3、baase.js表表示框架架基礎庫庫，exxt-aall.js是是 exxtjss的核心心庫。eext-basse.jjs順序序必須在在extt-alll.jjs的前前面，resoourcces/csss/exxt-aall.csss位置隨隨意。在ExttJs庫庫文件及及頁面內內容加載載完后，ExtJS會執(zhí)行Ext.onReady中指定的函數，一般情況下每一個用戶的ExtJS應用都是從Ext.onReady開始的。演示HeellooWorrldget,gettDOMM,geetCmmp要學習習及應用用好Exxt框架架，必須須需要理理解Httml DOMM、Extt Ellemeent及及Com

4、mponnentt三者之之間的區(qū)區(qū)別。每每一個HHTMLL頁面都都有一個個層次分分明的DDOM樹樹模型，瀏瀏覽器中中的所有有內容都都有相應應的DOOM對象象，動態(tài)態(tài)改變頁頁面的內內容，正正是通過過使用腳腳本語言言來操作作DOMM對象實實現。(通常使使用geetEllemeentBByIdd/Exxt.ggetDDOM獲獲得DOOM對象象)僅僅僅有DOOM是不不夠的，比比如要把把頁面中中的某一一個節(jié)點點移到其其它位置置，要給給某一個個節(jié)點添添加陰影影效果，要要隱藏或或顯示某某一個節(jié)節(jié)點等，我我們都需需要通過過幾句jjavaascrriptt才能完完成。因因此，EExt在在DOMM的基礎礎上，創(chuàng)創(chuàng)

5、建了EExt Eleemennt，可可以使用用Eleemennt來包包裝任何何DOMM，Ellemeent對對象中添添加了一一系列快快捷、簡簡便的實實用方法法。getDDom方方法getDDom方方法能夠夠得到文文檔中的的DOMM節(jié)點，該該方法中中包含一一個參數數，該參參數可以以是DOOM節(jié)點點的idd、DOOM節(jié)點點對象或或DOMM節(jié)點對對應的EExt元元素(EElemmentt)等。 (與與 geetEllemeentBByIdd是一個個效果)；Ext.onRReaddy(ffuncctioon()vaar ee=neew EExt.Eleemennt(helllo);EExt.gettD

6、omm(hhelllo);Exxt.ggetDDom(e);Extt.geetDoom(ee.doom); );/HHtmll頁面中中包含一一個idd為heelloo的diiv，代代碼如下下： aaaaget方方法get方方法中只只有一個個參數，這這個參數數是混合合參數，可可以是 DOMM節(jié)點的的id、也可以以是一個個Eleemennt、或或者是一一個DOOM 節(jié)節(jié)點對象象等。gget方方法其實實是Exxt.EElemmentt.geet的簡簡寫形式式。Ext.onRReaddy(ffuncctioon()varr e=neww Exxt.EElemmentt(hhelllo);Extt.ge

7、et(helllo);Extt.geet(ddocuumennt.ggetEElemmenttByIId(helllo);Extt.geet(ee); ); /HHtmll頁面中中包含一一個idd為heelloo的diivgetCCmp方方法getCCmp方方法用來來獲得一一個Exxt組件件，也就就是一個個已經在在頁面中中初始化化了的CCompponeent或或其子類類的對象象，geetCmmp方 法中只只有一個個參數，也也就是組組件的iid。 ggetCCmp方方法其實實是Exxt.CCompponeentMMgr.gett方法的的簡寫形形 式。 Extt.onnReaady(funncti

8、ion() varr myyPannel=neww Exxt.PPaneel( idd:“mmyFiirsttPannel”, tiitlee:“舊舊的標題題, rennderrTo:heelloo, widdth:3000, hheigght:2000 ); EExt.gettCmpp( myFFirsstPaanell ).seetTiitlee(新新的標題題); ); Extt.Ellemeent占占Extt Coore庫庫的篇幅幅很大，其其中方法法 就占占據了大大部份。因此我我們將這這些方法法可分為為下面幾幾類：DDOM查查詢或遍遍歷（如如queery、sellectt、fiindPP

9、areent） CSS（如setStyle、addClass） DOM操控（如createChild、remove） 方位、尺寸（如getHeight、getWidth）獲取下一個側邊節(jié)點，跳過文本節(jié)點。可選地可送入一個期待的選擇符。 Ext.get(elId).next(); 類似的還有: Ext.get(elId).prev();/上一個側邊節(jié)點 Ext.get(elId).first();/第一個節(jié)點 Ext.get(elId).last();/最后一個節(jié)點 Ext.get(elId).parent();/父節(jié)點,等等。 比如要獲取頁面上所有的p標簽,則可以使用:var ps = Ext

10、.select(p);這樣你就可以對所要獲取的元素進行操了,select()方法返回的是 Ext.CompositeElement對象,可以通過其中的each()方法對其所包含的元素進 行遍歷:ps.each(function(el) el.highlight();/高亮 );當然,如果你要是對獲取的所有元素進行相同的操作,可以直接應用于 CompositeElement對象上,如:ps.highlight();/select方法返回的結果可直接如同Element般地操作 Extt.quueryy和Exxt.sseleect的的作用同同是根據據CSSS選擇符符,基本本的XPPathh,HTTM

11、L屬屬性等 查找出出一個或或多個元元素。區(qū)區(qū)別在于于返回類類型上。分別是是：quueryy方法返返回的是是JavvaSccrippt標準準的數組組類型；sellectt方法返返回的是是CommpossiteeEleemennt類型型。 CommpossiteeEleemennt類型型屬于EExt自自定義的的類型，簡簡單地說說是以一一個 EExt.Eleemennt實例例代表集集合中多多個元素素，可實實現Ellemeent對對象上所所有的接接口， 也就是是說CoompoositteEllemeent在在Extt中用于于表示元元素的集集合中不不論有多多少個元元 素，均均被視為為一個單單獨元素素處理

12、。 它它的用法法和單個個的Ellemeent對對象一樣樣。seelecct方法法返回的的結果可可直接如如同 EElemmentt般地操操作，一一般比qquerry方法法常用。 DDomQQuerry是EExt Corre提供供的HTTML或或XMLL文檔選選擇器，它它支持大大部分的的CSSS 3選選擇器規(guī)規(guī)則，同同時提供供了一些些自定義義方式. DoomQuueryy主要有有4種選選擇方式式：元素素標記、元素屬屬性、偽偽對象、CSSS值1.通通過元素素標記選選擇，主主要有以以下6種種方法：（1）*：選擇擇任何元元素。其其使用方方法請看看下面代代碼。 Extt.seelecct(*); （22）

13、E：元素的的標記為為E。其其使用方方法請看看下面代代碼。 Extt.seelecct(divv); （33）E F：選選擇包含含在標記記E中的的標記FF。其使使用方法法請看下下面代碼碼。 EExt.sellectt(ddiv a);/將選擇擇divv下的aa元素 （4）EEF：選擇包包含在標標記E中中的直接接子標記記F。其其使用方方法請看看下面代代碼。 Extt.seelecct(divva);/將選選擇diiv下的的直接子子元素aa （55）E+F：選選擇所有有緊接在在元素EE后的元元素F。其使用用方法請請看下面面代碼。 Exxt.sseleect(diiv+aa);/將將選擇緊緊接在ddi

14、v下下的元素素a 2.通通過元素素屬性選選擇，主主要有以以下7種種語法。（1）EEfooo：選擇帶帶有屬性性fooo的元素素。其使使用語法法請看下下面代碼碼。 EExt.sellectt(ddivid);/選選擇有iid屬性性的diiv元素素 （22）Efooo=baar：選擇ffoo的的屬性值值為baar的元元素。其其使用語語法請看看下面代代碼。 Extt.seelecct(inpputcheeckeed=ttruee);/選擇cchecckedd屬性值值為trrue的的元素 （3）EEfooo=barr：選選擇fooo的屬屬性值以以barr開頭的的元素。其使用用語法請請看下面面 代碼碼。

15、EExt.sellectt(iinpuutnnamee=fformm1); /選選擇naame屬屬性值以以forrm1開開頭的元元素 （44）Efooo$=bbar：選擇擇fooo的屬性性值以bbar結結尾的元元素。其其使用語語法請看看下面 代碼。 Exxt.sseleect(innputtnaame$=foorm11); /選擇擇namme屬性性值以fformm1結尾尾的元素素 （55）Efooo*=bbar：選擇擇fooo的屬性性值包含含字符串串barr的元素素。其使使用語法法請看 下面代代碼。 Extt.seelecct(inpputnamme*=forrm1); /選擇nnamee屬性

16、值值包含字字符串fformm1的元元素 （66）Efooo%=22：選選擇fooo的屬屬性值能能整除22的元素素。其使使用語法法請看下下面代碼碼。3.通過偽偽對象選選擇，主主要有以以下188種語法法。 （11）Exxt.sseleect(ull lii:fiirstt-chhildd); /選擇所所有ull下的第第一個lli子節(jié)節(jié)點 （22）Exxt.sseleect(ull lii:laast-chiild); /選選擇所有有ul下下的最后后一個lli子節(jié)節(jié)點 （33）Exxt.sseleect(ull lii:ntth-cchilld(22); /選擇擇所有uul下的的第2個個li子子節(jié)點

17、 （4）EExt.sellectt(uul lli:nnth-chiild(oddd); /選擇擇所有uul下的的奇數行行l(wèi)i子子節(jié)點 （5）EExt.sellectt(uul lli:nnth-chiild(evaan); /選選擇所有有ul下下的偶數數行l(wèi)ii子節(jié)點點 （66）Exxt.sseleect(ull lii:onnly-chiild); /選選擇所有有ul下下只有一一個子節(jié)節(jié)點的lli節(jié)點點 （77）Exxt.sseleect(innputt:chheckked);/選擇擇所有cchecckedd屬性值值為trrue的的元素 （8）EExt.sellectt(iinpuut:f

18、firsst); /選擇擇第一個個inpput元元素 （99）Exxt.sseleect(innputt:laast); /選選擇最后后一個iinpuut元素素 （110）EE:ntth(nn)：選選擇匹配配的第nn（n1）個個元素EE。其使使用語法法請看下下面代碼碼。 EExt.sellectt(iinpuut:nnth(2); /選選擇第22個innputt元素 （111）E:oddd：是語語法“:nthh-chhildd(oddd)”的的簡寫。 （112）EE:evvan：是語法法“:nnth-chiild(evaan)”的的簡寫。（133）Exxt.sseleect(diiv:ccon

19、ttainns(llistt); /選擇擇innnerHHTMLL屬性包包含“l(fā)listt”的ddiv （144）Exxt.sseleect(diiv:nnodeeVallue(tesst); /選選擇包含含文本節(jié)節(jié)點且值值為“ttestt”的4.通過過CSSS值進行行選擇。主要有有以下66種語法法。 （1）EE:ddispplayy=noone：選擇擇dissplaay值為為nonne的元元素E。其使用用語法請請看下 面代碼碼。Exxt.sseleect(diiv:dissplaay=nnonee); /選擇擇dissplaay值為為nonne的元元素E （2）EExt.sellectt(d

20、div:diispllay=noone); /選擇ddispplayy值以nnonee開始的的元素EE（3）EExt.sellectt(ddiv:diispllay$=noone); /選擇ddispplayy值以nnonee結尾的的元素EE （4）EExt.sellectt(ddiv:diispllay*=noone); /選擇ddispplayy值包含含字符串串nonne的元元 素EE （5）EExt.sellectt(ddiv:diispllay%=noone); /選擇ddispplayy值整除除2的元元素E （6）EExt.sellectt(ddiv:diispllay!=noone

21、); /選擇ddispplayy值不等等于noone的的元素EE Doomquueryy的語法法可以單單獨使用用，也可可以組合合在一起起使用，例例如以下下代碼： Exxt.sseleect(diiv,sspann); /選擇所所有diiv元素素與sppan元元素 EExt.sellectt(ddiv.redd:fiirstt-chhildddiispllay=nonne); /選選擇cllasss為reed，且且是第11個子節(jié)節(jié)點，ddispplayy屬性為為nonne的ddiv如果沒有有指定選選擇器開開始搜索索的根節(jié)節(jié)點，默默認是從從boddy節(jié)點點開始，這這就等于于 每次次都要做做全文搜搜

22、索，其其性能可可想而知知，是相相當低效效的事件HTMLL元素的的標準事事件是指指mouuseooverr、moouseedowwn、cclicck、bblurr、foocuss、 cchannge等等能夠直直接對HHTMLL元素發(fā)發(fā)生的事事件。在在ExttJS中中，這些些事件的的處理可可以用如如下的代代碼：注注冊一個個事件處處理函數數使用： Extt.geet(myEElemmentt).on(cllickk, myHHanddlerr, mmySccopee); myEElemmentt是要注注冊 的的元素的的ID，cclicck是事事件的名名稱（注注意，和和HTMML元素素中的聲聲明onn

23、XXXX不同， 這里不不需要oon），mmyHaandller是是處理函函數的函函數名稱稱，myyScoope是是一個可可選的參參數，指指定處理理函數綁綁定的對對象，也也就是處處理函數數的作用用域，如如果不提提供 這這個參數數，則是是默認的的winndoww。撤銷銷一個事事件處理理函數： Exxt.gget(myEElemmentt).uun(cliick, mmyHaandller, myyScoope) 參數數的意義義同上。ExtJJs所包包含組件件ExtJJS組件件分類EXTJJS有近40種組組件，而而這些組組件又可可以大致致分成三三大類，即即基本組組件、工工具欄組組件、表表單及元元素組

24、件件。EXIIJS的的基本組組件：xtyppe Cllasss 說明 boxx Extt.BooxCoompoonennt 具有邊邊框屬性性的組件件butttonn Exxt.BButtton 按鈕coolorrpallettte Extt.CoolorrPallettte調色色板coompoonennt Exxt.CCompponeent 組件coontaaineer Extt.Coontaaineer 容器器cyccle EExt.CyccleBButttonddataavieew Extt.DaataVVieww 數據顯顯示視圖圖dattepiickeer Exxt.DDateePicc

25、kerr 日期期選擇面面板edditoor EExt.Ediitorr 編編輯器eedittorggridd Extt.grrid.EdiitorrGriidPaanell 可編編輯的表表格ggridd Extt.grrid.GriidPaanell 表表格paaginng EExt.PagginggTooolbaar 工具欄欄中的間間隔paanell EExt.Pannel 面板板proogreess EExt.ProogreessBBar 進進度條sspliitbuuttoon Exxt.SSpliitBuuttoon可可分裂的的按鈕ttabppaneel Exxt.TTabPPaneel

26、 選選項面板板treeepaanell EExt.treee.TTreeePannel 樹vieewpoort EExt.VieewPoort 視圖wiindoow Extt.Wiindoow 窗口口 工工具欄組組件是為為了構造造工具欄欄而準備備的，在在Winndowws桌面面軟件中中，工具具欄隨處處可見，以以其方便便性與集集成性為為用戶所所稱道。EXTTJS的的工具欄欄組件能能夠在WWeb上上構造其其表現和和功能與與桌面軟軟件完全全一樣的的工具欄欄。工具欄組組件有：tooolbaar EExt.Tooolbaar 工工具欄ttbbuuttoon Exxt.TToollbarr.Buuttoo

27、n按鈕鈕tbffilll EExt.Tooolbaar.FFilll 文文件tbbiteemEExt.Tooolbaar.IItemm 工具條條項目ttbseeparratoor Exxt.TToollbarr.Seeparratoor工具具欄分隔隔符tbbspaacerrEExt.Tooolbaar.SSpaccer工具欄欄空白ttbspplitt Exxt.TToollbarr.SpplittButttonn工工具欄分分隔按鈕鈕tbttextt Exxt.TToollbarr.TeextIItemm 工工具欄文文本項 在傳傳統(tǒng)Weeb UUI中，表表單時重重要的界界面元素素了。EExtJJ

28、S的表表單組件件對普通通HTMML的表表單進行行了封裝裝，不僅僅提供了了更靚麗麗的外觀觀表現，同同時也擴擴充了功功能。使使用EXXTJSS時限Weeb應用用，表單單組件也也是使用用最為頻頻繁的組組件了。表單及字字段組件件包含：forrm EExt.ForrmPaanell Foorm面面板cchecckboox Exxt.fformm.Chheckkboxxcheeckbbox錄錄入框ccombbo Exxt.fformm.CoombooBoxxcommbo選選擇項ddateefieeld Exxt.fformm.DaateFFielld日期期選擇項項fieeld EExt.forrm.FFi

29、elld表表單字段段fieeldsset EExt.forrm.FFielldSeet 表表單字段段組hiiddeen Extt.foorm.Hidddenn表單隱隱藏域hhtmllediitorr Exxt.fformm.HttmlEEdittorhhtmll編輯器器nummberrfieeld Extt.foorm.NummberrFieeld數數字編輯輯器raadioo Extt.foorm.Raddio 單選選按鈕ttexttareea Exxt.fformm.TeextAAreaa 區(qū)域域文本框框texxtfiieldd EExt.forrm.TTexttFieeld 表單單文本框框

30、timmefiieldd EExt.forrm.TTimeeFieeld 時間錄錄入項ttrigggerr Exxt.fformm.TrrigggerFFielld觸發(fā)發(fā)錄入項項ExtJJs常用用組件介介紹Paneel組件件面板本身身是一個個容器，應應用程序序界面一一般由一一個個面面板，通通過不同同的方式式組合而而成，里里面可以以包含各各種其他他的組件件；面板板一般由由以下幾幾個部分分組成：一個頂頂部工具具欄、一一個底部部工具欄欄、面板板頭部（即即tittle）、面板底底部、面面板主區(qū)區(qū)域。paneel示例例簡單的ppaneeltabPPaneel paneel的組組成paneel的布布局pa

31、neel的布布局主要要有十種種之多，主主要包括括ConntaiinerrLayyoutt (容器布布局)、FittLayyoutt (自適應應布局)、AcccorddionnLayyoutt (折疊布布局)、CarrdLaayouutLaayouut (卡片式式布局)、AbssoluuteLLayoout (絕對位位置布局局)、ForrmLaayouut(表表單布局局)、ColuumnLLayoout (列布局)、BodeerLaayouut (邊框布布局)、TablleLaayouut (表格布布局），下面面介紹幾幾個常用用的布局局方式：ConttainnerLLayoout (容器器布局)

32、提供容器器作為布布局的基基礎邏輯輯，通常常會被擴擴展而不不通過nnew 關鍵字字直接創(chuàng)創(chuàng)建，一一般作為為默認布布局存在在;ColuumnLLayoout (列布布局)TablleLaayouut (表格布布局）BodeerLaayouut (邊框布布局)BordderLLayoout邊邊框布局局將布局局分為5部分：easst,ssoutth,wwestt,noorthh,ceenteerpaneel屬性性簡介1.auutoLLoadd：有效效的urrl字符符串，把把那個uurl中中的boody中中的數據據自動加載載顯示2.aautooScrrolll:設為為truue則內內容溢出出的時候候產生

33、滾滾動條，默默認為ffalsse3.bbbarr:底部部條，顯顯示在主主體內，/代碼：bbar:text:底部工具欄bottomToolbar,工具條中也可以放置相應的按鈕，以及其他的組件，分頁條等等4.ttbarr:頂部部條，顯顯示在主主體內，/代碼:tbar:text:頂部工具欄topToolbar,5.bbutttonss:按鈕鈕集合，自自動添加加到foooteer中（foooteer參數數，顯示示在主體體外）/代碼碼：buuttoons:ttextt:按按鈕位于于foooterr;buuttoons:neew EExt.Butttonn(ttextt:確確定)6.bbutttonAAl

34、iggn:ffootter中中按鈕的的位置，枚枚舉值為為：lleftt,rigght,ccentter,默認認為riightt面板中中按鈕的的顯示位位置，不不過按鈕鈕的顯示示并沒有有在paanell的主體體中，而是顯顯示在底底部的工工具條上上7.ccolllapssiblle：設設為trrue，顯顯示右上上角的收收縮按鈕鈕，默認認為faalsee8.ddragggabble:truue則可可拖動，但但需要你你提供操操作過程程，默認認為faalsee9.httml:主體的的內容10.id：id值，通通過idd可以找找到這個個組件，建建議一般般加上這這個idd值；注注：頁面面中不能能出現兩兩個id

35、d相同的的組件否否則頁面面就會發(fā)發(fā)生沖突突，導致致某些組組件的位位置等顯顯示不正正確。11.widdth：寬度12.heiightt：高度度13.tittle:標題14.tittleCColllapsse：設設為trrue，則則點擊標標題欄的的任何地地方都能能收縮，默默認為ffalsse.15.appplyTTo：（idd）渲染染到某個個htmml元素素中16.conntenntEll：（idd）將某某個httml元元素里面面的內容容在paanell中呈現現出來，17.rennderrTo：（idd）渲染染到某個個htmml元素素/aappllyToo,reendeerToo這兩個個和coon

36、teentEEl方向向是相反反的，在在表面上上看appplyyTo和和rennderrTo沒沒有太大大的區(qū)別別。ViewwPorrt組件件在前面的的示例中中，為了了顯示一一個面板板，我們們需要在在頁面上上添加一一個，然然后把 Extt控件渲渲染到這這個diiv上。VeiiwPoort代代表整個個瀏覽器器顯示區(qū)區(qū)域，該該對象渲渲染到頁頁面的bbodyy區(qū)域，并并會隨著著瀏覽器器顯示區(qū)區(qū)域的大大小自動動改變，一一個頁面面中只能能有一個個VieewPoort實實例，Vieewpoort不不需要再再指定rrendderTTo。在Vieewpoort 上常用用的布局局有fiit、borrderr 等。f

37、it布布局示例例：bordder布布局示例例：表格控件件及其內內部屬性性EXT中中的表格格功能非非常強大大，包括括排序、緩存、拖動、隱藏某某一列、自動顯顯示行號號、列匯匯總、單單元格編編輯等使使用功能能。簡單的GGridd首先，ggridd表格是是二維的的，橫著著的是行行，豎著著的是列列，就像像設計數數據庫表表一樣，要要設置我我們的表表有幾列列。1、創(chuàng)建建表格的的列信息息：代碼如下下:var cm=neww Exxt.ggridd.CoolummnMoodell( heaaderr:編編號,dattaInndexx:iid, heaaderr:名名稱,dattaInndexx:nnamee,

38、heaaderr:描描述,dattaInndexx:ddesnn ); 2、添加加數據信信息：代碼如下下:var datta= 1,nnamee1,deesn11, 2,nnamee2,dessn2, 3,nnamee3,dessn3, 4,nnamee4,dessn4, 5,nnamee5,dessn5 ; 此處定義義了一個個二維數數組，顯顯示到ggridd中就應應該是55行3列，其其中的列列，分別別對應iid、namme、dessn。3、創(chuàng)建建數據存存儲對象象：（列列和數據據聯(lián)系的的橋梁）代碼如下下:var ds=neww Exxt.ddataa.Sttoree( proxxy:nnew

39、Extt.daata.MemmoryyProoxy(datta), readder:neww Exxt.ddataa.ArrrayyReaaderr(, namme:id, namme:namme, namme:dessn ) ); ds.lloadd();/這個個相當的的重要Ext.datta.SStorre有兩兩個屬性性，prroxyy：定義義從哪里里獲得數數據，此此處為從從內存獲獲取數據據；reaaderr定義如如何解析析數據。ds.loaad()用于進進行數據據的初始始化。若與后臺臺結合，proxy定義如下：proxxy:neww Exxt.ddataa.HtttpPProxxy( u

40、url:urll),readder定定義如下下：readder : nnew Extt.daata.JsoonReeadeer( tottalPProppertty: tootallCouunt, rooot: rooot, fieeldss: eextFFiellds/對應應需要顯顯示的實實體屬性性，如:/vaar eextFFiellds =id,naame,ddesnn;)注:后臺臺返回數據據形式為為：jsonn = ttotaalCoountt: + ccounnt + ,rooot: +jjsonnArrray + ;jsonnArrray的的格式為為rooot:idd:iid,na

41、mme:namme,deesn:dessn；可用如下下形式進進行轉化化：JsonnConnfigg jssonCConffig = nnew JsoonCoonfiig();jsonnConnfigg.reegissterrJsoonVaalueeProocesssorr(Daate.claass, neew DDateeJsoonVaalueeProocesssorr(yyyyy-MMM-ddd);JSONNArrray jsoonArrrayy = JSOONArrrayy.frromOObjeect(lisst, jsoonCoonfiig);導入jaar包為為：jsson-libb-2

42、.3-jjdk115.jjar、commmonns-bbeannutiils-1.88.0.jarr、commmonns-ccolllecttionns-33.2.1.jjar、commmonns-llangg-2.3.jjar、coommoons-loggginng-11.1.1.jaar、ezmmorpph-11.0.6.jaar4、表格格的列模模型定義義好了，原原始數據據和數據據的轉換換也已經經完成，剩剩下的只只需要把把它們裝裝配在一一起，我我們的GGridd就創(chuàng)建建成功了了。代碼如下下:var griid=nnew Extt.grrid.GriidPaanell( rendderTTo

43、:griid, storre: ds, cm:ccm); 5、注意意：Exxt.ggridd.Grrid的的rennderrTo屬屬性指示示EXTT將表格格渲染到到什么地地方，所所以，在在HTMML里應應該有一一個與之之對應。Gridd的功能能詳解部分功能能屬性1、默認認情況下下，Grrid是是可以拖拖放列，也也可以改改變列的的寬度，如如果要禁禁用這兩兩個功能能，在定定義Grrid對對象時分分別設置置enaableeCollumnnMovve和enaableeCollumnnRessizee為fallse即即可。2、如果果希望顯顯示斑馬馬線效果果，可以以加上sstriipeRRowss:trr

44、ue 自主決定定每列的的寬度1、如果果要定義義寬度，只只要設置置該列的的widdth屬屬性即可可，如下下面的代代碼所示示。效果果圖如圖圖2所示。代碼如下下:var cm=neww Exxt.ggridd.CoolummnMoodell( heaaderr:編編號,dattaInndexx:iid,widdth:60, heaaderr:名名稱,dattaInndexx:nnamee,wwidtth:1180, heaaderr:描描述,dattaInndexx:ddesnn,wwidtth:2200 );2、這樣樣需要自自己去計計算每列列的寬度度，如果果想讓每每列自動動填滿GGridd,只需需

45、要viiewCConffig中中的foorceeFitt即可。使用fforcceFiit后，Grrid會會根據你你在cmm里設置置的wiidthh按比例例分配，非非常智能能。實現現代碼如如下：代碼如下下:var griid=nnew Extt.grrid.GriidPaanell( rendderTTo:griid, striipeRRowss:trrue,/斑斑馬線效效果loaddMassk:ttruee, storre: ds, heigght:6000, cm:ccm, viewwConnfigg: forcceFiit:ttruee ); 3、我們們也可以以考慮aautooExppan

46、ddCollumnn,它可可以讓指指定列的的寬度自自動伸展展，從而而填充整整個表格格。代碼碼如下代碼如下下:var griid=nnew Extt.grrid.GriidPaanell( rendderTTo:griid, striipeRRowss:trrue,/斑斑馬線效效果loaddMassk:ttruee, storre: ds, heigght:6000, cm:ccm, autooExppanddCollumnn:ddesnn / vviewwConnfigg: / fforcceFiit:ttruee / ); 注意：aautooExppanddCollum只只能指定定一列的的i

47、d,注意，必必須是iid,原原來我們們設置的的cm里面面都沒有有id,現在為為了使用用auttoExxpanndCoolummn,要要給cmm的dessn設置置id.于是在在渲染時時dessn就可可以自動動延伸，否否則會出出錯。代碼如下下:var cm=neww Exxt.ggridd.CoolummnMoodell( heaaderr:編編號,dattaInndexx:iid,widdth:60, heaaderr:名名稱,dattaInndexx:nnamee,wwidtth:1180, id:deesn,heeadeer:描述,dattaInndexx:ddesnn,wwidtth:22

48、00 ); Gridd支持按按列排序序在EXTT中可以以很方便便地實現現排序功功能，只只需要在在定義列列模型時時增加ssorttablle屬性性，如下下面代碼碼所示：代碼如下下:var cm=neww Exxt.ggridd.CoolummnMoodell( heaaderr:編編號,dattaInndexx:iid,widdth:60,sorrtabble:truue, heaaderr:名名稱,dattaInndexx:nnamee,wwidtth:1180, id:deesn,heeadeer:描述,dattaInndexx:ddesnn,wwidtth:2200 );gridd在后臺臺

49、進行排排序，除除了在列列中增加加sorrtabble屬屬性外，還還要在EExt.datta.SStorre中添添加reemotteSoort:truue屬性性，代碼碼如下：var ds = nnew Extt.daata.Stoore(urll : grrid11.jssp,reaaderr : exttReaaderr,remmoteeSorrt:ttruee);設置reemotteSoort后后，加載載數據時時，會向向后臺傳傳遞兩個個參數：sorrt、dirrsortt：表示示需要排排序的字字段dir：表示排排序ASSC/DDESCC正序或或逆序顯示時間間類型數數據盡管返回回的JSSON里

50、里都是數數字和字字符串，但但是在EEXT中中我們同同樣可以以從后臺臺取得日日期類型型的數據據，然后后交給GGridd進行格格式化。1、首先先定義一一組數據據，其中中最后一一列是日日期格式式的數據據。代碼如下下:var datta= 1,nnamee1,deesn11,20009-009-117T002:558:004, 2,nnamee2,deesn11,20009-009-117T002:558:004, 3,nnamee3,deesn11,20009-009-117T002:558:004, 4,nnamee4,deesn11,20009-009-117T002:558:004, 5,nn

51、amee5,deesn11,20009-009-117T002:558:004 ; 2、接著著我們在在reaaderr里面增增加一行行配置，除除了設置置namme以外外，還設設置了ttypee和datteFoormaat兩個個屬性。代碼如如下：代碼如下下:var stoore11= nnew Extt.daata.Stoore( proxxy:nnew Extt.daata.MemmoryyProoxy(datta), readder:neww Exxt.ddataa.ArrrayyReaaderr(, namme:id, namme:namme, namme:dessn, namme:dat

52、te,typpe:datte,datteFoormaat:Y-mm-dTTH:ii:s ) ); 3、同樣樣的，我我們還需需要在ccm里面面增加一一行配置置：代碼如下下:var cm=neww Exxt.ggridd.CoolummnMoodell( heaaderr:編編號,dattaInndexx:iid,widdth:60,sorrtabble:truue, heaaderr:名名稱,dattaInndexx:nnamee,wwidtth:1180, id:deesn,heeadeer:描述,dattaInndexx:ddesnn,wwidtth:2200, heaaderr:時時間,d

53、attaInndexx:ddatee,ttypee:ddatee,rrenddereer:EExt.utiil.FFormmat.datteReendeererr(YY年m月d日) );單元格中中改變字字的顏色色及顯示示按鈕我們在ccm中增增加性別別及操作作一列，并并為這兩兩列增加reendeererr屬性，代代碼如下下：var cm=neww Exxt.ggridd.CoolummnMoodell( heeadeer:序號,dattaInndexx:iid,sorrtabble:truue, heeadeer:名稱,dattaInndexx:nnamee, heeadeer:性別,datta

54、Inndexx:ssex,reendeererr:shhowSSex,idd:ddesnn,hheadder:描述述,ddataaInddex:deesn, heeadeer:時間,dattaInndexx:ddatee,ttypee:ddatee,rrenddereer:EExt.utiil.FFormmat.datteReendeererr(YY年m月d日),heeadeer:操作,dattaInndexx:ddesnn,rrenddereer:sshowwDessn );funcctioon sshowwSexx(vaaluee)if (vaaluee = 男男) retturnn 男男

55、; eelsee retturnn 女;funcctioonshhowDDesnn(vaaluee,ceellmmetaa,reecorrd,rrowIIndeex,ccoluumnIIndeex,sstorre) var strr = ;retturnn sttr;1.vaaluee是當前前單元格格的值2.reecorrd是獲獲得這行行的所有有數據，此此行的值值可以用用reccordd.daataidd來來獲得3.roowInndexx是行號號，從零零開始4.coolummnInndexx是列號號，從零零開始5.sttoree表格里里的所有有數據都都可以通通過它來來調用，stoore.get

56、tAt(0)取得的的為第11行的reecorrd值；自動顯示示行號和和復選框框實際上，行行號和復復選框都都是reendeererr的延伸伸。當然然，復選選框的功功能要復復雜得多多。 1、自動動顯示行行號：修修改列模模型cmm,加入入RowwNummberrer對對象；2、復選選框：我我們創(chuàng)建建一個CChecckbooxSeelecctioonMoodell()代碼如下下:var sm=neww Exxt.ggridd.ChheckkboxxSellecttionnModdel(); var cm=neww Exxt.ggridd.CoolummnMoodell( new Extt.grrid.

57、RowwNummberrer(), sm, heaaderr:編編號,dattaInndexx:iid,widdth:40,sorrtabble:truue, heaaderr:名名稱,dattaInndexx:nnamee,wwidtth:1180, id:deesn,heeadeer:描述,dattaInndexx:ddesnn,wwidtth:2200, heaaderr:時時間,dattaInndexx:ddatee,ttypee:ddatee,rrenddereer:EExt.utiil.FFormmat.datteReendeererr(YY年m月d日) ); gridd加載時時的

58、遮罩罩效果定義遮罩罩效果mmaskk：var massk = neew EExt.LoaadMaask(grrid, msgg:正正在加載載數據，請請稍侯); maskk.shhow();當加載完完成時，取取消掉遮遮罩ds.oon(loaad, fuuncttionn() Extt.geet(griid).unnmassk(););同時，在在griid中添添加maask屬屬性：var griid=nnew Extt.grrid.GriidPaanell( rendderTTo:griid, striipeRRowss:trrue,/斑斑馬線效效果loaddMassk:ttruee, storr

59、e: ds, heigght:6000, cm:ccm, loaddMassk : mmsg:正在在加載數數據，請請稍侯);表格分頁頁表格分頁頁Griid控件件對性能能要求較較高，如如果在一一個Grrid里里面顯示示上千條條記錄，效效率會有有明顯下下降，所所以必須須考慮分分頁問題題。1、為GGridd添加分分頁工具具條：在在前面代代碼的基基礎上修修改grrid代代碼：代碼如下下:var griid1=neww Exxt.ggridd.GrridPPaneel( rendderTTo:griid1, striipeRRowss:trrue,/斑斑馬線效效果loaddMassk:ttruee, s

60、torre: stoore11, heigght:2000, cm:ccm, viewwConnfigg: forcceFiit:ttruee , bbarr:neew EExt.PagginggTooolbaar( pageeSizze:110, storre: stoore11, dispplayyInffo:ttruee, dispplayyMsgg:顯顯示第0條條到11條記記錄,一共22條, empttyMssg:沒有記記錄 ) );pageeSize，是每頁顯示幾條數據。dispplayyInffo，跟跟下面的的配置有有關，如如果是ffalsse就不不會顯示示提示信信息。disppl