深入淺出extjsEXTJS通常簡(jiǎn)稱為EXT它是一個(gè)非常優(yōu)秀的Ajax框架可以

1、前言EXT JS通常簡(jiǎn)稱為EXT，它是一個(gè)非常優(yōu)秀的Ajax框架，可以用來開發(fā)具有炫麗外觀的富客戶端應(yīng)用。它是一個(gè)用JavaScript編寫的與技術(shù)無(wú)關(guān)的Ajax框架。EXT絢麗多彩的界面吸引了許多程序員的眼球，同時(shí)也吸引了眾多客戶，它似乎統(tǒng)，尤其是MIS類型的系統(tǒng)而言，EXT非常適用。之間就迅速流行開來。對(duì)于企業(yè)應(yīng)用系當(dāng)?shù)谝淮问褂肊XT時(shí)，就被它深深地吸引住了。對(duì)于像這樣的沒有美術(shù)功底的程序員來說，EXT為解決了一題，因?yàn)樗焐鷵碛徐披惖耐獗?。同時(shí)，有很多用其他技術(shù)無(wú)法實(shí)現(xiàn)或極難實(shí)現(xiàn)的功能，卻能用EXT輕易實(shí)現(xiàn)，比如EXT中的表格、樹形、布局等控件能為我們的日常開發(fā)工作節(jié)約大量的時(shí)間和精力，

2、這些都堅(jiān)定了使用EXT的決心。在學(xué)習(xí)EXT的過程中做了大量筆記，記下了學(xué)習(xí)過程中的一些心得和體會(huì)，同時(shí)也寫了很多示例程序，但是從未想過會(huì)將這些資料付諸。EXT的參考資料很缺乏，發(fā)現(xiàn)身邊很多學(xué)習(xí)EXT的朋友都在中摸索，尤其是英文不太好的朋友，學(xué)習(xí)起來非常吃力。EXT的中文資料就更少了，雖然有人把EXT的API文檔中文化了，但是API文檔中只有一些基礎(chǔ)簡(jiǎn)單示例，并不能指導(dǎo)快速地去實(shí)踐是實(shí)用主義者，本書的最大特點(diǎn)就是以實(shí)例為基礎(chǔ)，在實(shí)例的基礎(chǔ)上講解EXT的各種用法。這樣既便于讀者理解，也方便讓讀者親自實(shí)踐，從而迅速地將所學(xué)到的知識(shí)運(yùn)用到實(shí)際項(xiàng)目中去。本書適合有一定CSS和HTML基礎(chǔ)的開發(fā)者閱讀，它

3、的主要目的是讓開發(fā)者能快速學(xué)會(huì)EXT，并立即付諸實(shí)踐。本示例代碼都是以EXT 2.2為基礎(chǔ)的，也包含了即將發(fā)布的EXT 3.0中的新特性，對(duì)EXT的相關(guān)知識(shí)進(jìn)行了深入而全面的闡述。EXT發(fā)布包中有一個(gè)examples目錄，是專門用來放置各種演示示例的，本書附帶的所有示例也可以直接放在這個(gè)目錄下使用。使用時(shí)，請(qǐng)將對(duì)應(yīng)目錄放在EXT發(fā)布包的examples目錄下，可以用瀏覽器打開示例HTML文件效果（見圖0-1）。示例中使用了localXHR.js，無(wú)需服務(wù)器就可以 從而可以直接在本地瀏覽大部分示例。對(duì)于那些需要據(jù)的示例，最簡(jiǎn)單的方法是將整個(gè)EXT 發(fā)布包JSON數(shù)據(jù)， JSP提供數(shù)到Tomcat

4、 的圖0-1 examples目錄展開圖 這些示例可以從公司上與本書對(duì)應(yīng)的頁(yè)面。編者注2前言webapps目錄下，啟動(dòng)Tomcat后，可通過瀏覽器examples下的示例。出于對(duì)EXT的喜愛，又承蒙廣大EXT的朋友的錯(cuò)愛，寫作了本書。如果有不恰當(dāng)之處，敬請(qǐng)批評(píng)指正。為了便于與讀者朋友交流，特為本書在的上開辟了專門的頁(yè)面。歡迎大家把對(duì)本書的意見和建議發(fā)到這個(gè)頁(yè)面上來，論，在此深表感謝。會(huì)積極參與討最后，要感謝所有在本書的寫作期間給予幫助和鼓勵(lì)的朋友們，還有那些志同道合的EXT者們。2008年10月20日 http:/extjsEXT 1EXT發(fā)布包1如看EXT自帶的API和示例1為有些示例乏放在

5、服務(wù)器上 能看到效果2o World2決定每列的寬度33讓Grid支持按列排序35解決中文排序35顯示日期類型數(shù)據(jù)371 ..5和3在單格示的、給Grid的行和置買41自動(dòng)示行和復(fù)框421.4的發(fā)布包21.4.1 直接使用自動(dòng)顯示行號(hào)43復(fù)選框4.2在項(xiàng)目中使用EXT1.6為頁(yè)面提示不到型4助開發(fā)4 46表格圖Ex t .g r id . Gr idView調(diào)試工具Firebug4開發(fā)利器Spket.2表格分頁(yè)47為Grid添加分頁(yè)工具條483.9

6、..33.9.4本10EXT 11EXT的件和類111.7獲得分頁(yè)數(shù)據(jù)49顯示在Grid的頂部51通過分頁(yè)2 2.1讓EXT支持前臺(tái)排序52序53自定義事件11瀏覽器事件.23.103.11rid55rid55可編表格控件Edit 132.1.3 Ex t . l ib . Even t1.5制作一個(gè)簡(jiǎn)單的EditExt.util.Observable142.1.4添加一行數(shù)據(jù)56保存修改結(jié)果58驗(yàn)證EditGrid中的數(shù)據(jù)59限制輸入數(shù)據(jù)的類型60 172.1.5 Ex t .Even tManage

7、 rEx t .Even tOb j ec t19件202.1.6EXT的 .. 20ponen t性表格控件PropertyGrid633.12 22ponen tPropertyGrid64只能看不能動(dòng)的PropertyGrid65強(qiáng)制對(duì)name列排序65根據(jù)name獲得va l ue66自定義編輯器62.5 23Ex t .Con t a ine r 24Ex t .Pane lEx t .TabPane l24本272.328Grid的特性簡(jiǎn)28制作一個(gè)簡(jiǎn)單的Grid29Grid

8、常用功能解323 分表格控件group663.13分組表格簡(jiǎn)介67分組表格視圖3.2V i ew68Ex t .g r id . Grou可放的表格69部分屬性功能32目錄拖放改變表格的大小69在同一個(gè)表格里拖放70表格之間的拖放72表格與樹之間的拖放73平行分列布局91在布局中使用fieldset9..4 在fieldset中使用布局95964.6.5自定義布局：在表單中加入Grid與右鍵菜單73本章小結(jié)74表單與輸入控件76ComboBox、datefield和

9、timefield詳解973.153.16第4 章4.7ComboBox簡(jiǎn)介9...64.7.7boBox99轉(zhuǎn)換成ComboBox結(jié)構(gòu)詳解9976制作一個(gè)表單數(shù)據(jù)101使用FormPanel和BasicForm詳解77EXT支持的控件77ComboBox的高級(jí)配置102用戶選擇了哪條數(shù)據(jù)104使用本地?cái)?shù)據(jù)實(shí)現(xiàn)省、市、縣級(jí)聯(lián)104控件繼承圖77表單控件78基本輸入控件Ext.form.Field78文本輸入控件Ext.form.TextField79多行文本輸入控件Ext.form.TextArea80日期輸入控件Ext.

10、form.DateField80時(shí)間輸入控件Ext.form.TimeField81編輯器Ext.form.HtmlEditor81隱藏域Ext.form.Hidden82下拉輸入框..8使用數(shù)據(jù)實(shí)現(xiàn)省、市、縣級(jí)聯(lián)107復(fù)選框和單選框1復(fù)選框110單選框Radio1.24.3.5文件上傳112自動(dòng)把數(shù)據(jù)填充到表單中113本章小結(jié)114樹形結(jié)構(gòu)116TreePanel的基本使用1.7第5 章創(chuàng)建一棵樹116為樹生枝展葉117tree的配置118使用TreeLoade

11、r獲得數(shù)據(jù)119本地JSON數(shù)據(jù)121Struts 2的JsonPlugin1....94.3.10Ext.form.TriggerField82使用表單提交數(shù)據(jù)834.4EXT默認(rèn)的提交形式83使用HTML原始的提交形式85單純Ajax8.24.4.3數(shù)據(jù)122使用JSP提供樹的事件125右鍵菜單126修改節(jié)點(diǎn)的默認(rèn)圖標(biāo)125.85.9數(shù)據(jù)校驗(yàn)864.5輸入不能為空86最大長(zhǎng)度和最小長(zhǎng)度87借助vtype88自定義校驗(yàn)規(guī)則8..

12、4框128從節(jié)點(diǎn)彈出節(jié)點(diǎn)提示信息129129為節(jié)點(diǎn)設(shè)置超4.5.5 算不上校驗(yàn)的NumberField88直接修改樹節(jié)點(diǎn)名稱130樹形的拖放131返回的校驗(yàn)信息894.5.6使用表單布局90節(jié)點(diǎn)拖放的三種形式131葉子不能append135.9.2默認(rèn)的平鋪布局904.6.13目錄判斷拖放的目標(biāo)132樹之間的拖放134設(shè)置窗口中的按鈕169窗口的其他配置選項(xiàng)170..6樹形過濾器TreeFilter135利用TreeSorter對(duì)樹進(jìn)行排序137樹形節(jié)點(diǎn)視圖Ext.tree.TreeNodeUI138表格與樹形的結(jié)合Ext.tree.Colu

13、mnTree139本章小結(jié)142拖放143拖放簡(jiǎn)介143拖放的簡(jiǎn)單應(yīng)用143拖放組件體系144拖放的事件146高級(jí)拖放148窗口分組171向窗口中放入各種控件1727.47.5在窗口中加入表格172在窗口中加入表單173復(fù)雜布局17.3本章小結(jié)176布局177布局的用途177最簡(jiǎn)單的布局FitLayout179常用的邊框布局BorderLayout1827.65.14第8 章第6 章6.46.5設(shè)置子區(qū)域的大小184使用split并限制它的范圍185子區(qū)域的展開和折疊18.28.3

14、.3制作伸縮菜單的布局Accordion191實(shí)現(xiàn)操作向?qū)У牟季諧ardLayout192控制位置和大小的布局Basic148Handle14....8Top150Onayout194Proxy151Group152Grid154AnchorLayout和Absolu的布局FormLayout198.10表單分列式的布局ColumnLayout200表格狀的布局TableLayout202與布局相關(guān)的其他知識(shí)204Circle155Region157本章小結(jié)15超類

15、Ext.Conaer的公共配置與xtype的概念204layout的超類Ext.layout. ContainerLayout205彈出窗口159Ext.MessageBox159第7 章 159Ext.MessageBox.alert()Ext.MessageBox.8.10.3不指定任何布局時(shí)會(huì)發(fā)生的情況206使用Viewport對(duì)整個(gè)頁(yè)面進(jìn)行布局206使用嵌套實(shí)現(xiàn)復(fù)雜布局207confirm()160.3 Ext.MessageBmpt(). 160配置1617.2框的8.10.5可以輸入多行的輸入框1617.2.1本章小結(jié)210和菜單211簡(jiǎn)單菜單2

16、11向菜單中添加分隔線212多級(jí)菜單213高級(jí)菜單2148.11框的按鈕1627.2.2 自定義第9 章9.4進(jìn)度條162動(dòng)畫效果16.4Ext.window的常用屬性1647.3創(chuàng)建一個(gè)窗口164窗口的最大化和最小化165窗口的隱藏與銷毀167防止窗口超出瀏覽器16..4多選菜單和單選菜單214日期菜單2.24目錄顏色菜單216EXT中的Ajax24.410.8最容易看到的Ext.Ajax24610.8.1Ext.Adapter菜單適配器21710.8.2 Ext.lib.Ajax是

17、更底層的封裝247關(guān)于scope和createDelegate() 247DWR與EXT整合2499.4.510.910.10使用Ext.Mgr管理菜單220組件詳解220Ext.Toolbar.Button221在EXT中直接使用DWR249DWRProxy250DWRTreeLoader2529.5....79.5.8221Ext.Toolbar.TextboBox253Ext.Toolbar.Spacer222Ext.Toolbar.Separator222Ext.Tool

18、bar.Fill223Ext.Toolbar.SplitButton 223和localXHR支持本地使用Ajax254本章小結(jié)255實(shí)用工具25610.1110.12第11 章11.1224為工具條添加HTML256EXT提供的常用函數(shù)為工具條添加輸入控件225onReady函數(shù)256get函數(shù)257query函數(shù)和select函數(shù)260. 分頁(yè)工具條Ext.PagingToolbar225Ext.PagingToolbar的基本用法22.2 向Ext.PagingToolbar添加按鈕組件226右鍵彈出菜單227本章小結(jié)22911.

19、1.4 encode函數(shù)和decode函數(shù).26326511.1.5extend函數(shù)9.79.811.1.6 apply和applyIf函數(shù)266namespace函數(shù)266Ext.isEmpty函數(shù)267Ext.each函數(shù)268Ext.DomQuery26911.1.711.1.811.1.911.1.10與傳輸230第10 章 數(shù)據(jù)Ext.data簡(jiǎn)介23010.4onnection230Ext.dExt.data.Record23211.2用DomHelper和Template動(dòng)態(tài)生成HTML272Ext.data.Store233基本應(yīng)用233對(duì)數(shù)據(jù)進(jìn)行排序2

20、34從store中獲取數(shù)據(jù)234更新store中的數(shù)據(jù)236加載及顯示數(shù)據(jù)237其他功能238用DomHelper生成小片段.272Ext.DomHelper. applyStyles函數(shù)275Template模板276Ext.DomHelper. createTemplate函數(shù)278復(fù)雜模板XTemplate279.210.4.310.4.410.4.510.4.6.211.2.311.2.4常用proxy23910.511.2.5281MemoryProxy239HttpProxy24011.311.4用Ext.Utils.CSS切換10.5.11

21、.3懸停提示282初始化282提示283提示283全局配置283配置284ScriptTagProxy240.211.4.311.4.411.4.5常用Reader24110.6ArrayReader241JsonReader24.210.6.3XmlReader243高級(jí)store245e保存狀態(tài)28510.711.5使用Ext.s5目錄一個(gè)完整的 EXT 應(yīng)用317確定整體布局317使用HTML和CSS設(shè)置靜態(tài)信息319對(duì)學(xué)生信息進(jìn)行數(shù)據(jù)建模320在頁(yè)面中顯示學(xué)生信息列表324添加表單編輯學(xué)生信息329為表單添加提交事件332清空

22、表單信息335刪除指定的學(xué)生信息336fx實(shí)現(xiàn)的動(dòng)畫效果288局部更新網(wǎng)頁(yè)內(nèi)容288Ext.util.Format290使用Ext.util.CSS管理CSS樣式290使用Ext.util.ClickRepeater處理點(diǎn)擊事件291使用Ext.util.DelayedTask延時(shí)執(zhí)行函數(shù)293使用Ext.util.TaskRunner執(zhí)行循環(huán)任務(wù)294混合型集合Ext.util. MixedCollection295使用Ext.util.TextMetri獲得文本所占的高度和寬度299Ext.KeyNav處理導(dǎo)航按鍵300Ext.KeyMap為對(duì)象綁定按鍵功能302擴(kuò)展304第12 章12.

23、112.212.312.412.512.612.712.812.912.1011.611.711.811.911.1011.1111.12 337在Grid和Form之間進(jìn)行數(shù)據(jù)交互11.13本章小結(jié)338第13 章 通過Ext Framework 合理地應(yīng)用 EXT33911.14Ext Framework簡(jiǎn)介33911.1511.1611.1713.113.2 342包342Ext Framework架構(gòu).213.2.3主要的第擴(kuò)展Date304擴(kuò)展String306擴(kuò)展Function306擴(kuò)展Number308擴(kuò)展Array3087.211.1

24、7.311.17.411.17.5類關(guān)系圖342前臺(tái)組件關(guān)系圖344本章小結(jié)347EXT 常見問題348EXT 對(duì)AIR 的支持355EXT 的版本變遷36413.3附錄A附錄B附錄CExt.ux.Portal309Ext.Desktop312本章小結(jié)31611.1811.1911.20本章內(nèi)容Ext.data簡(jiǎn)介Ext.donnectionExt.data.Record Ext.data.Store常用proxy常用reader高級(jí)store EXT中的Ajax關(guān)于scope和createDelegate()DWR與EXT整合Ext.data 簡(jiǎn)介10.1Ext.data在命名空間中定義了一

25、系列store、和。和boxBox都是以Ext.data為媒介獲取數(shù)據(jù)的，它包含異步加載、類型轉(zhuǎn)換、分頁(yè)等功能。Ext.data默認(rèn)支持 Array、JSON、XML等數(shù)據(jù)格式，可以通過Memory、HTTP、ScriptTag等方式獲得這些格式的數(shù)據(jù)。如果要實(shí)現(xiàn)新的協(xié)議和新的數(shù)據(jù)結(jié)構(gòu)，只需要擴(kuò)展reader和proxy即可。DWRProxy就實(shí)現(xiàn)了自身的proxy和reader，讓EXT可以直接從DWR獲得數(shù)據(jù)。10.2Ext.donnectiononnection是對(duì)Ext.lib.Ajax的封裝，它提供了配置使用Ajax的通用方式，它Ext.d在內(nèi)部通過Ext.lib.Ajax實(shí)現(xiàn)與的異

26、步調(diào)用。與底層的Ext.lib.Ajax相比，Ext.data.Connection提供了更簡(jiǎn)潔的配置方式，使用起來更方便。onnection主要用于在Ext.data.HttpProxy和Ext.data.ScriptTagProxyExt.d中執(zhí)行與交互的任務(wù)，它會(huì)從指定的URL獲得數(shù)據(jù)，并把返回的數(shù)據(jù)交給HttpProxy或10-1所示。ScriptTagProxy處理，Ext.donnection的使用方式如代碼數(shù)據(jù)與傳輸?shù)?10章 10.2Ext.donnection231varconn = new Ext.d autoAbort: false, defaultHeaders: re

27、ferer: ,onnection(disableCaching : false, extraParams : name: name,method : GET, timeout : 300, url : 01-01.txt);在使用Ext.donnection之前，都要像上面這樣創(chuàng)建一個(gè)新的Ext.Connection實(shí)例?？梢栽跇?gòu)造方法里配置對(duì)應(yīng)的參數(shù)，比如autoAbort表示是否會(huì)自動(dòng)斷開、default-Headers參數(shù)表示請(qǐng)求的默認(rèn)首部信息、disableCaching參數(shù)表示請(qǐng)求是否會(huì)禁用緩存、extraParams參數(shù)代表請(qǐng)求的額外參數(shù)、method參數(shù)表示請(qǐng)求方法、timeo

28、ut參數(shù)表示連接的超時(shí)時(shí)間、url參數(shù)表示請(qǐng)求的等。在創(chuàng)建了conn之后，可以調(diào)用request()函數(shù)發(fā)送請(qǐng)求，處理返回的結(jié)果，如下面的代碼所示。conn.request(sucs: function(response) Ext.Msg.alert(info, response.responseText);,failure: function() Ext.Msg.alert(warn, failure););Request()函數(shù)中可以設(shè)置sucs和failure兩個(gè)回調(diào)函數(shù)，分別在請(qǐng)求成功和請(qǐng)求失敗時(shí)調(diào)用。請(qǐng)求成功時(shí)，sucs函數(shù)的參數(shù)就是返回的信息。10再來看一下request函數(shù)中的其

29、他參數(shù)。url:String：請(qǐng)求url。 params:Object/String/Function：請(qǐng)求傳遞的參數(shù)。method:String：請(qǐng)求方法，通常為GET或T。callback:Function：請(qǐng)求完成后的回調(diào)函數(shù)，無(wú)論是成功還是失敗，都會(huì)執(zhí)行。sucs:Function：請(qǐng)求成功時(shí)的回調(diào)函數(shù)。failure:Function：請(qǐng)求失敗時(shí)的回調(diào)函數(shù) scope:Object：回調(diào)函數(shù)的作用域。form:Object/String：綁定的form表單。isUpload:：是否執(zhí)行文件上傳。代碼10-1 使用Ext.donnection232第 10 章數(shù)據(jù)與傳輸headers:

30、Object：請(qǐng)求首部信息。xmlData:Object：XML文檔對(duì)象，可以通過URL附加參數(shù)的方式發(fā)起請(qǐng)求。：是否禁用緩存，默認(rèn)為禁用。disableCaching:onnection還提供了abort(Number tranionId)函數(shù)，當(dāng)同時(shí)有多個(gè)Ext.d請(qǐng)求發(fā)生時(shí)，根據(jù)指定的事務(wù)id放棄其中的某一個(gè)請(qǐng)求。如果不指定事務(wù)id，就會(huì)放棄最后一個(gè)請(qǐng)求。isLoading(Number tranionId)函數(shù)的用法與abort()類似，可以根據(jù)事務(wù)id判斷對(duì)應(yīng)的請(qǐng)求是否完成。如果未指定事務(wù)id，就判斷最后一個(gè)請(qǐng)求是否完成。10.3Ext.data.RecordExt.data.Rec

31、ord就是一個(gè)設(shè)定了內(nèi)部數(shù)據(jù)類型的對(duì)象，它是Ext.data.Store的最基本組成部分。如果把Ext.data.Store看作是一張二維表，那么它的每一行就對(duì)應(yīng)一個(gè)Ext.data. Record實(shí)例。Ext.data.Record的主要功能是保存數(shù)據(jù)，并且在內(nèi)部數(shù)據(jù)發(fā)生改變時(shí)它還可以保留修改之前的原始值。修改的狀態(tài)，使用Ext.data.Record時(shí)通常都是由create()函數(shù)開始，首先用create()函數(shù)創(chuàng)建一個(gè)自定義的Record類型，如下面的代碼所示。varRecord = Ext.data.Record.create(name: name, type: string,name

32、: sex, type: );Record就是定義的新類型，包含字符串類型的name和整數(shù)類型的sex兩個(gè)屬性，然后使用new關(guān)鍵字創(chuàng)建Record的實(shí)例，如下面的代碼所示。var boy = newname: boy, sex: 0);Record(創(chuàng)建對(duì)象時(shí)，可以直接通過構(gòu)造方法為對(duì)象賦予初始值，將boy賦值給name，0賦值給sex。現(xiàn)在，得到了Record的實(shí)例boy，如何才能得到它的屬性呢？以下三種方式都可以獲得boy中name屬性的數(shù)據(jù)，如下面的代碼所示。alert(); alert(boy.dataname);alert(boy.get(name);這里涉及Ext.data.Re

33、cord的data屬性，這是定義在Ext.data.Record中的一個(gè)公共屬性，用于保存當(dāng)前record對(duì)象的所有數(shù)據(jù)。它是一個(gè)JSON對(duì)象，可以直接從它里面獲得需要的數(shù)據(jù)?？梢酝ㄟ^Ext.data.Record的get()函數(shù)方便地從data屬性中獲得指定的屬性值。如果需要修改boy中的數(shù)據(jù)，請(qǐng)不要使用以下方式直接操作data，如下面的代碼所示。 = boy name; boy.dataname = boy name;10.4Ext.data.Store233而應(yīng)該使用set()函數(shù)，如下面的代碼所示。boy.set(name, body name);set()函數(shù)會(huì)判斷屬性值是否發(fā)生了改

34、變，如果改變了，就要將當(dāng)前對(duì)象的dirty屬性設(shè)置為true，并將修改之前的原始值放入modified對(duì)象中，供其他函數(shù)使用。如果直接操作data中的值，record就無(wú)法屬性數(shù)據(jù)的修改情況。Record的屬性數(shù)據(jù)被修改后，可以執(zhí)行如下幾種操作。commit()（提交）：這個(gè)函數(shù)的效果是設(shè)置dirty為false，并刪除modified中保存的原始數(shù)據(jù)。reject()（撤銷）：這個(gè)函數(shù)的效果是將data中已經(jīng)修改了的屬性值都恢復(fù)成modified中保存的原始數(shù)據(jù)，然后設(shè)置dirty為false，并刪除保存原始數(shù)據(jù)的modified對(duì)象。 getChanges()獲得修改的部分：這個(gè)函數(shù)會(huì)把d

35、ata中經(jīng)過修改的屬性和數(shù)據(jù)放在一個(gè) JSON對(duì)象里并返回。例如上例中，getChanges()返回的結(jié)果是name:body name。還可以調(diào)用isModified()判斷當(dāng)前record中的數(shù)據(jù)是否被修改。Ext.data.Record還提供了用于var copyBoy = boy.copy();record實(shí)例的函數(shù)copy()。這樣就得到了boy的一個(gè)副本，它里面包含了boy的data數(shù)據(jù)，但copy()函數(shù)不會(huì)dirty和modified等額外的屬性值。Ext.data.Record中其他的參數(shù)大多與Ext.data.Store有關(guān)，請(qǐng)參考與Ext.data.Store相關(guān)的。10

36、.4Ext.data.StoreExt.data.Store是EXT中用來進(jìn)行和數(shù)據(jù)交互的標(biāo)準(zhǔn)中間件，無(wú)論是Grid還是ComboBox，都是通過它實(shí)現(xiàn)數(shù)據(jù)、類型轉(zhuǎn)換、排序分頁(yè)和搜索等操作的。Ext.data.Store中有一個(gè)Ext.data.Record數(shù)組，所有數(shù)據(jù)都存放在這些Ext.data.Record實(shí)例中，為后面的10.4.1基本應(yīng)用和修改操作做準(zhǔn)備。10在使用之前，首先要?jiǎng)?chuàng)建一個(gè)Ext.data.Store的實(shí)例，如下面的代碼所示。var data = boy, 0,girl, 1;var store = new Ext.data.Store(proxy: new Ext.da

37、ta.MemoryProxy(data), reader: new Ext.data.ArrayReader(,);store.load();Record)234第 10 章數(shù)據(jù)與傳輸每個(gè)store最少需要兩個(gè)組件的支持，分別是proxy和read原始數(shù)據(jù)，reader用于將原始數(shù)據(jù)轉(zhuǎn)換成Record實(shí)例。roxy用于從某個(gè)途徑這里使用的是Ext.data.MemoryProxy和Ext.data.ArrayReader，將data數(shù)組中的數(shù)據(jù)轉(zhuǎn)換成對(duì)應(yīng)的幾個(gè)Record實(shí)例，然后放入store中。store創(chuàng)建完畢之后，執(zhí)行store.load()實(shí)現(xiàn)這個(gè)轉(zhuǎn)換過程。經(jīng)過轉(zhuǎn)換之后，Store的

38、最基本用法。里的數(shù)據(jù)就可以提供給或boBox使用了，這就是Ext.data.10.4.2對(duì)數(shù)據(jù)進(jìn)行排序Ext.data.Store提供了一系列屬性和函數(shù)，利用它們對(duì)數(shù)據(jù)進(jìn)行排序操作?？梢栽趧?chuàng)建Ext.data.Store時(shí)使用sortInfo參數(shù)指定排序的字段和排序方式，如下面的代碼所示。var store = new Ext.data.Store(proxy: new Ext.data.MemoryProxy(data),reader: new Ext.data.ArrayReader(,Record),sortInfo: field: name, direction: DESC);這樣，在

39、store加載數(shù)據(jù)之后， 就會(huì)自動(dòng)根據(jù)name字段進(jìn)行降序排列。對(duì)store使用store.setDefaultSort(name,DESC);也會(huì)達(dá)到同樣效果。也可以在任何時(shí)候調(diào)用sort()函數(shù)，比如store.sort(name, DESC);，對(duì)store中的數(shù)據(jù)進(jìn)行排序。如果希望獲得store的排序信息，可以調(diào)用getSortSe()函數(shù)，返回的是類似field: name, direction: DESC的JSON對(duì)象。與排序相關(guān)的參數(shù)還有remoteSort，這個(gè)參數(shù)是用來實(shí)現(xiàn)排序功能的。當(dāng)設(shè)置為remoteSort:true時(shí)，store會(huì)在向請(qǐng)求數(shù)據(jù)時(shí)自動(dòng)加入sort和dir

40、兩個(gè)參數(shù)，分別對(duì)應(yīng)排序的字段和排序的方式，由獲取并處理這兩個(gè)參數(shù)，在對(duì)所需數(shù)據(jù)進(jìn)行排序操作。remoteSort:true也會(huì)導(dǎo)致每次執(zhí)行sort()時(shí)都要去進(jìn)行排序。詳細(xì)的用法可以參考第2章。重新加載數(shù)據(jù)，而不能只對(duì)本地?cái)?shù)據(jù)10.4.3從 store 中獲取數(shù)據(jù)從store中獲取數(shù)據(jù)有很多種途徑，可以依據(jù)不同的要求選擇不同的函數(shù)。最直接的方法是根據(jù)record在store中的行號(hào)獲得對(duì)應(yīng)的record，得到了record就可以使用get()函數(shù)獲得里面的數(shù)據(jù)了，如下面的代碼所示。store.ge(0).get(name)通過這種方式，所示?？梢员闅vstore中所有的record，依次得到它們

41、的數(shù)據(jù)，如下面的代碼10.4Ext.data.Store235for (var i = 0; i store.getCount(); i+) var record = store.ge(i);alert(record.get(name);Store.getCount()返回的是store中的所有數(shù)據(jù)，然后使用for循環(huán)遍歷整個(gè)store，從而得到每條。除了使用getCount()的方法外，還可以使用each()函數(shù)，如下面的代碼所示。store.each(function(record) alert(record.get(name););Each()可以接受一個(gè)函數(shù)作為參數(shù)，遍歷內(nèi)部recor

42、d，并將每個(gè)record作為參數(shù)傳遞給 function()處理。如果希望停止遍歷，可以讓function()返回false。也可以使用getRange()函數(shù)連續(xù)獲得多個(gè)record，只需要指定開始和結(jié)束位置的索引值，如下面的代碼所示。var records = store.getRange(0, 1);for (var i = 0; i records.length; i+) var record = recordsi; alert(record.get(name);如果確實(shí)不知道record的id，也可以根據(jù)record本身的id從store中獲得對(duì)應(yīng)的record，如下面的代碼所示。s

43、tore.getById(1001).get(name)EXT還提供了函數(shù)find()和findBy()，可以利用它們對(duì)store中的數(shù)據(jù)進(jìn)行搜索，如下面的代碼所示。find( String property, String/RegExp value, Number startIndex, anyMatch,caseSensitive )在這5個(gè)參數(shù)中，只有前兩個(gè)是必須的。第一個(gè)參數(shù)property代表搜索的字段名；第二個(gè)參數(shù)value是匹配用字符串或正則表達(dá)式；第三個(gè)參數(shù)startIndex表示從第幾行開始搜索，第四個(gè)參數(shù)anyMatch為true時(shí)，不必從頭開始匹配；第五個(gè)參數(shù)caseSe

44、nsitive為true時(shí)，會(huì)區(qū)分大小寫。如下面的代碼所示：var index = store.find(name,g);10alert(store.ge(index).get(name);與find()函數(shù)對(duì)應(yīng)的findBy()函數(shù)的定義格式如下：findBy( Function fn, Object scope, Number startIndex ) : NumberfindBy()函數(shù)允許用戶使用自定義函數(shù)對(duì)內(nèi)部數(shù)據(jù)進(jìn)行搜索。fn返回true時(shí)，表示查找成功，于是停止遍歷并返回行號(hào)。fn返回false時(shí)，表示查找失?。次凑业剑^續(xù)遍歷，如下236第 10 章數(shù)據(jù)與傳輸面的代碼所示。

45、index = store.findBy(function(record, id) return record.get(name) = girl & record.get(sex) = 1;);alert(store.ge(index).get(name);通過findBy()函數(shù)，可以同時(shí)判斷record中的多個(gè)字段，在函數(shù)中實(shí)現(xiàn)復(fù)雜邏輯。還可以使用query和queryBy函數(shù)對(duì)store中的數(shù)據(jù)進(jìn)行查詢。與find和findBy不同的是，query和queryBy返回的是一個(gè)MixCollection對(duì)象，里面包含了搜索得到的數(shù)據(jù)，如下面的代碼所示。alert(store.query(n

46、ame, boy); alert(store.queryBy(function(record) return record.get(name) = girl & record.get(sex) = 1;);10.4.4更新 store 中的數(shù)據(jù)可以使用add(Ext.data.Record records)向store末尾添加一個(gè)或多個(gè)record，使用的參數(shù)可以是一個(gè)record實(shí)例，如下面的代碼所示。store.add(newname: other, sex: 0);Record(Add()的也可以添加一個(gè)record數(shù)組，如下面的代碼所示：store.add(new name: othe

47、r1, sex: 0Record(), newRecord(name: other2, sex: 0);Add()函數(shù)每次都會(huì)將新數(shù)據(jù)添加到store的末尾，這就有可能破壞store原有的排序方式。如果希望根據(jù)store原來的排序方式將新數(shù)據(jù)到對(duì)應(yīng)的位置，可以使用addSorted()函數(shù)。它會(huì)在添加新數(shù)據(jù)之后立即對(duì)store進(jìn)行排序，這樣就可以保證store中的數(shù)據(jù)有序地顯示，如下面的代碼所示。store.addSorted(new name: lili, sex: 1);Record(store會(huì)根據(jù)排序信息查找這條record應(yīng)該的索引位置，然后根據(jù)得到的索引位置數(shù)據(jù)，從而實(shí)現(xiàn)對(duì)整體進(jìn)行

48、排序。這個(gè)函數(shù)需要預(yù)先為store設(shè)置本地排序，否則會(huì)不起作用。如果希望自己指定數(shù)據(jù)的索引位置，可以使用insert()函數(shù)。它的第一個(gè)參數(shù)表示插入數(shù)據(jù)的索引位置，可以使用record實(shí)例或record實(shí)例的數(shù)組作為參數(shù)，之后，后面的數(shù)10.4Ext.data.Store237據(jù)自動(dòng)后移，如下面的代碼所示。store.insert(3, new name: other, sex: 0);Record(store.insert(3, new name: other1, sex: 0Record(), newRecord(name: other2, sex: 0);刪除操作可以使用remove()

49、和removeAll()函數(shù)，它們分別可以刪除指定的record和清空整個(gè)store中的數(shù)據(jù)，如下面的代碼所示。store.remove(store.ge store.removeAll();(0);store中沒有專門提供修改某一行record的操作，需要先從store中獲取一個(gè)record。對(duì)這個(gè)record內(nèi)部數(shù)據(jù)的修改會(huì)直接反映到store上，如下面的代碼所示。store.ge(0).set(name, x);修改record的內(nèi)部數(shù)據(jù)之后有兩種選擇：執(zhí)行rejectChanges()撤銷所有修改，將修改過的record恢復(fù)到原來的狀態(tài)；執(zhí)行commitChanges()提交數(shù)據(jù)修改。

50、在執(zhí)行撤銷和提交操作之前，可以使用getModifiedRecords()獲得store中修改過的record數(shù)組。與修改數(shù)據(jù)相關(guān)的參數(shù)是pruneModifiedRecords，如果將它設(shè)置為true，當(dāng)每次執(zhí)行刪除或reload 操作時(shí)，都會(huì)清空所有修改。這樣，在每次執(zhí)行刪除或reload 操作之后， getModifiedRecords()返回的就是一個(gè)空數(shù)組，否則仍然會(huì)得到上次修改過的record10.4.5加載及顯示數(shù)據(jù)。store創(chuàng)建好后，需要調(diào)用load()函數(shù)加載數(shù)據(jù)，加載成功后才能對(duì)store中的數(shù)據(jù)進(jìn)行操作。load()調(diào)用的完整過程如下面的代碼所示。store.load(

51、params: start:0,limit:20,10callback: function(records, options, suc Ext.Msg.alert(info, 加載完畢);,scope: store, add: trues);params是在store加載時(shí)發(fā)送的附加參數(shù)。callback是加載完畢時(shí)執(zhí)行的回調(diào)函數(shù)，它包含3個(gè)參數(shù)：records參數(shù)表示獲得的數(shù)據(jù)，options表示執(zhí)行l(wèi)oad()時(shí)傳遞的參數(shù)，sucs表示是否加載成功。238第 10 章數(shù)據(jù)與傳輸Scope用來指定回調(diào)函數(shù)執(zhí)行時(shí)的作用域。Add為true時(shí)，load()得到的數(shù)據(jù)會(huì)添加在原來的store數(shù)據(jù)的

52、末尾，否則會(huì)先清除之前的數(shù)據(jù)，再將得到的數(shù)據(jù)添加到store中。一般來說，為了對(duì)store中的數(shù)據(jù)進(jìn)行初始化，load()函數(shù)只需要執(zhí)行一次。如果用params參數(shù)指定了需要使用的參數(shù)，以后再次執(zhí)行reload()重新加載數(shù)據(jù)時(shí)，store會(huì)自動(dòng)使用上次 load()中包含的params參數(shù)內(nèi)容。如果有一些需要固定傳遞的參數(shù)，也可以使用baseParams參數(shù)執(zhí)行，它是一個(gè)JSON對(duì)象，里面的數(shù)據(jù)會(huì)作為參數(shù)發(fā)送給store.baseParams.start =處理，如下面的代碼所示。0;store.baseParams.limit = 20;為store加載數(shù)據(jù)之后，有時(shí)不需要把所有數(shù)據(jù)都顯示

53、出來，這時(shí)可以使用函數(shù)filter和filterBy對(duì)store中的數(shù)據(jù)進(jìn)行過濾，只顯示符合條件的部分，如下面的代碼所示。filter( String field, String/RegExp value, anyMatch,caseSensitive ) : voidfilter()函數(shù)的用法與之前談到的find()相似，如下面的代碼所示。store.filter(name, boy);對(duì)應(yīng)的filterBy()與findBy()類似，也可以在自定義的函數(shù)中實(shí)現(xiàn)各種復(fù)雜判斷，如下面的代碼所示。store.filterBy(function(record) return record.get(

54、name) = girl & record.get(sex) = 1;);如果想取消過濾并顯示所有數(shù)據(jù)，那么可以調(diào)用clearFilter()函數(shù)，如下面的代碼所示。store.clearFilter();如果想知道store上是否設(shè)置了過濾器，可以通過isFiltered()函數(shù)進(jìn)行判斷。10.4.6其他功能除了上面提到的數(shù)據(jù)獲取、排序、更新、顯示等功能外，store還提供了其他一些功能函數(shù)。collect( String dataIndex, allowNull, bypassFilter ) : Arraycollect函數(shù)獲得指定的dataIndex對(duì)應(yīng)的那一列的數(shù)據(jù)，當(dāng)allowNu

55、ll參數(shù)為true時(shí)，返回的結(jié)果中可能會(huì)包含null、undefined或空字符串，否則collect函數(shù)會(huì)自動(dòng)將這些空數(shù)據(jù)過濾掉。當(dāng)bypassFilter參數(shù)為true時(shí)，collect的結(jié)果不會(huì)受查詢條件的影響，無(wú)論查詢條件是什么都會(huì)忽略掉，返回的信息是所有的數(shù)據(jù)，如下面的代碼所示。alert(store.collect(name);這樣會(huì)獲得所有name列的值，示例中返回的是包含了boy和girl的數(shù)組。getTotalCount()用于在翻頁(yè)時(shí)獲得傳遞過來的數(shù)據(jù)總數(shù)。如果沒有設(shè)置翻頁(yè)，get-10.5常用 proxy239TotalCount()的結(jié)果與getCount()相同，都是

56、返回當(dāng)前的數(shù)據(jù)總數(shù)，如下面的代碼所示。alert(store.getTotalCount();indexOf(Ext.data.Record record) 和 indexOfId(String id) 函數(shù)根據(jù) record 或record的id獲得record對(duì)應(yīng)的行號(hào)，如下面的代碼所示。alert(store.indexOf(store.ge(1); alert(store.indexOfId(1001);append)從本地JavaScript變量中l(wèi)oadData(object data, 數(shù)據(jù)，append為true時(shí)，將的數(shù)據(jù)附加到原數(shù)據(jù)后，否則執(zhí)行整體更新，如下面的代碼所示。s

57、tore.loadData(data, true);Sum(String property, Number start, Number end):Number用于計(jì)算某一個(gè)列從start到end的總和，如下面的代碼所示。alert(store.sum(sex);如果省略參數(shù)start和end，就計(jì)算全部數(shù)據(jù)的總和。store還提供了一系列事件（見表10-1），讓可以為對(duì)應(yīng)操作設(shè)定操作函數(shù)。表10-1 store提供的事件事件名參數(shù)addbeforelaod clear( Store this, Ext.data.Record records, Number index ) ( Store th

58、is, Object options )( Store this ) ( Store this )( Store this, Ext.data.Record records, Object options ) ()( Store this, Object meta. )( Store this, Ext.data.Record record, Number index )( Store this, Ext.data.Record record, String operation )dloadhangedloadexception metachange removeupdate至此，store和

59、record等組件已經(jīng)講解完畢，下面組件。主要一下常用的proxy和reader1010.5常用 proxy10.5.1MemoryProxyMemoryProxy只能從JavaScript對(duì)象獲得數(shù)據(jù)，可以直接把數(shù)組，或JSON和XML格式的數(shù)據(jù)交給它處理，如下面的代碼所示。var proxy = new Ext.data.MemoryProxy(id1,name1,id2,name2,1,2);240第 10 章數(shù)據(jù)與傳輸10.5.2HttpProxyHttpProxy使用HTTP協(xié)議，通過Ajax去數(shù)。這里的url可以替換成任何一個(gè)合法的面的代碼所示。取數(shù)據(jù)，構(gòu)造它時(shí)需要設(shè)置url:.j

60、sp參，這樣HttpProxy才知道去哪里獲取數(shù)據(jù)，如下var proxy = new Ext.data.HttpProxy(url:.jsp);需要返回EXT所需要的JSON格式的數(shù)據(jù)，下面的內(nèi)容就是下面的代碼所示。response.setContentType(application/x-json); Writer out = response.getWriter();out.pr( +使用JSP的一個(gè)范例，如id1,name1,id2,name2, );1 +2 +請(qǐng)注意，這里的HttpProxy不支持跨域，它只能從同一域中獲得數(shù)據(jù)。如果想跨域，請(qǐng)參考下面的ScriptTagProxy。