ExtJS培訓(xùn)進(jìn)階教程.docx

Extjs入門(mén)培訓(xùn)軟件就是服務(wù)30 / 30目錄1什么是ExtJs32ExtJs的使用32.1獲取ExtJs32.2應(yīng)用Extjs32.3演示HelloWorld43get,getDOM,getCmp43.1getDom方法43.2get方法53.3getCmp方法54事件105ExtJs所包含組件105.1ExtJS組件分類106ExtJs常用組件介紹126.1Panel組件126.1.1panel示例136.1.2panel的布局146.1.3panel屬性簡(jiǎn)介166.2ViewPort組件176.3表格控件及其內(nèi)部屬性186.3.1簡(jiǎn)單的Grid186.3.2Grid的功能詳解216.4按鈕287Ext.Ajax.request308Ext同步/異步請(qǐng)求311 什么是ExtJsExtJs是可以用來(lái)開(kāi)發(fā)帶有華麗外觀的富客戶端應(yīng)用，使得我們的b/s應(yīng)用更加具有活力及生命力，提高用戶體驗(yàn)。ExtJs是一個(gè)用javascript編寫(xiě)，與后臺(tái)技術(shù)無(wú)關(guān)的前端ajax框架。因此，可以把ExtJs用在.Net、Java、Php等各種開(kāi)發(fā)語(yǔ)言開(kāi)發(fā)的應(yīng)用中。2 ExtJs的使用2.1 獲取ExtJs獲取ExtJs網(wǎng)址：/download公司使用ExtJs版本為2.02.2 應(yīng)用Extjs 應(yīng)用extjs需要在頁(yè)面中引入extjs的樣式及extjs庫(kù)文件，樣式文件為resources/css/ext-all.css，extjs的js庫(kù)文件主要包含兩個(gè)，adapter/ext/ext-base.js及ext-all.js(ext/build/locale/ext-lang-zh_CN.js)，其中ext-base.js表示框架基礎(chǔ)庫(kù)，ext-all.js是 extjs的核心庫(kù)。ext-base.js順序必須在ext-all.js的前面，resources/css/ext-all.css位置隨意。在ExtJs庫(kù)文件及頁(yè)面內(nèi)容加載完后，ExtJS會(huì)執(zhí)行Ext.onReady中指定的函數(shù)，一般情況下每一個(gè)用戶的ExtJS應(yīng)用都是從Ext.onReady開(kāi)始的。2.3 演示HelloWorld3 get,getDOM,getCmpv 要學(xué)習(xí)及應(yīng)用好Ext框架，必須需要理解Html DOM、Ext Element及Component三者之間的區(qū)別。每一個(gè)HTML頁(yè)面都有一個(gè)層次分明的DOM樹(shù)模型，瀏覽器中的所有內(nèi)容都有相應(yīng)的DOM對(duì)象，動(dòng)態(tài)改變頁(yè)面的內(nèi)容，正是通過(guò)使用腳本語(yǔ)言來(lái)操作DOM對(duì)象實(shí)現(xiàn)。(通常使用getElementById/Ext.getDOM獲得DOM對(duì)象)僅僅有DOM是不夠的，比如要把頁(yè)面中的某一個(gè)節(jié)點(diǎn)移到其它位置，要給某一個(gè)節(jié)點(diǎn)添加陰影效果，要隱藏或顯示某一個(gè)節(jié)點(diǎn)等，我們都需要通過(guò)幾句javascript才能完成。因此，Ext在DOM的基礎(chǔ)上，創(chuàng)建了Ext Element，可以使用Element來(lái)包裝任何DOM，Element對(duì)象中添加了一系列快捷、簡(jiǎn)便的實(shí)用方法。3.1 getDom方法getDom方法能夠得到文檔中的DOM節(jié)點(diǎn)，該方法中包含一個(gè)參數(shù)，該參數(shù)可以是DOM節(jié)點(diǎn)的id、DOM節(jié)點(diǎn)對(duì)象或DOM節(jié)點(diǎn)對(duì)應(yīng)的Ext元素(Element)等。 (與 getElementById是一個(gè)效果)；Ext.onReady(function()var e=new Ext.Element(hello);Ext.getDom(hello);Ext.getDom(e);Ext.getDom(e.dom); );/Html頁(yè)面中包含一個(gè)id為hello的div，代碼如下： aaa3.2 get方法get方法中只有一個(gè)參數(shù)，這個(gè)參數(shù)是混合參數(shù)，可以是 DOM節(jié)點(diǎn)的id、也可以是一個(gè)Element、或者是一個(gè)DOM 節(jié)點(diǎn)對(duì)象等。get方法其實(shí)是Ext.Element.get的簡(jiǎn)寫(xiě)形式。Ext.onReady(function()var e=new Ext.Element(hello);Ext.get(hello);Ext.get(document.getElementById(hello);Ext.get(e); ); /Html頁(yè)面中包含一個(gè)id為hello的div3.3 getCmp方法getCmp方法用來(lái)獲得一個(gè)Ext組件，也就是一個(gè)已經(jīng)在頁(yè)面中初始化了的Component或其子類的對(duì)象，getCmp方 法中只有一個(gè)參數(shù)，也就是組件的id。 v getCmp方法其實(shí)是Ext.ComponentMgr.get方法的簡(jiǎn)寫(xiě)形 式。 v Ext.onReady(function() var myPanel=new Ext.Panel( id:“myFirstPanel”, title:“舊的標(biāo)題, renderTo:hello, width:300, height:200 ); Ext.getCmp( myFirstPanel ).setTitle(新的標(biāo)題); ); v vExt.Element占Ext Core庫(kù)的篇幅很大，其中方法 就占據(jù)了大部份。因此我們將這些方法可分為下面幾類：DOM查詢或遍歷（如query、select、findParent）v CSS（如setStyle、addClass）v DOM操控（如createChild、remove）v 方位、尺寸（如getHeight、getWidth）獲取下一個(gè)側(cè)邊節(jié)點(diǎn)，跳過(guò)文本節(jié)點(diǎn)?？蛇x地可送入一個(gè)期待的選擇符。 Ext.get(elId).next(); 類似的還有: Ext.get(elId).prev();/上一個(gè)側(cè)邊節(jié)點(diǎn) Ext.get(elId).first();/第一個(gè)節(jié)點(diǎn) Ext.get(elId).last();/最后一個(gè)節(jié)點(diǎn) Ext.get(elId).parent();/父節(jié)點(diǎn),等等。v 比如要獲取頁(yè)面上所有的p標(biāo)簽,則可以使用:var ps = Ext.select(p);這樣你就可以對(duì)所要獲取的元素進(jìn)行操了,select()方法返回的是 Ext.CompositeElement對(duì)象,可以通過(guò)其中的each()方法對(duì)其所包含的元素進(jìn) 行遍歷:ps.each(function(el) el.highlight();/高亮 );當(dāng)然,如果你要是對(duì)獲取的所有元素進(jìn)行相同的操作,可以直接應(yīng)用于 CompositeElement對(duì)象上,如:ps.highlight();/select方法返回的結(jié)果可直接如同Element般地操作 Ext.query和Ext.select的作用同是根據(jù)CSS選擇符,基本的XPath,HTML屬性等 查找出一個(gè)或多個(gè)元素。區(qū)別在于返回類型上。分別是：query方法返回的是JavaScript標(biāo)準(zhǔn)的數(shù)組類型；select方法返回的是CompositeElement類型。 v CompositeElement類型屬于Ext自定義的類型，簡(jiǎn)單地說(shuō)是以一個(gè) Ext.Element實(shí)例代表集合中多個(gè)元素，可實(shí)現(xiàn)Element對(duì)象上所有的接口， 也就是說(shuō)CompositeElement在Ext中用于表示元素的集合中不論有多少個(gè)元 素，均被視為一個(gè)單獨(dú)元素處理。v 它的用法和單個(gè)的Element對(duì)象一樣。select方法返回的結(jié)果可直接如同 Element般地操作，一般比query方法常用。v Dom Query是Ext Core提供的HTML或XML文檔選擇器，它支持大部分的CSS 3選擇器規(guī)則，同時(shí)提供了一些自定義方式. Dom Query主要有4種選擇方式：元素標(biāo)記、元素屬性、偽對(duì)象、CSS值1.通過(guò)元素標(biāo)記選擇，主要有以下6種方法：（1）*：選擇任何元素。其使用方法請(qǐng)看下面代碼。 Ext.select(*); （2）E：元素的標(biāo)記為E。其使用方法請(qǐng)看下面代碼。 Ext.select(div); （3）E F：選擇包含在標(biāo)記E中的標(biāo)記F。其使用方法請(qǐng)看下面代碼。 Ext.select(div a);/將選擇div下的a元素 （4）EF：選擇包含在標(biāo)記E中的直接子標(biāo)記F。其使用方法請(qǐng)看下面代碼。 Ext.select(diva);/將選擇div下的直接子元素a （5）E+F：選擇所有緊接在元素E后的元素F。其使用方法請(qǐng)看下面代碼。 Ext.select(div+a);/將選擇緊接在div下的元素av 2.通過(guò)元素屬性選擇，主要有以下7種語(yǔ)法。（1）Efoo：選擇帶有屬性foo的元素。其使用語(yǔ)法請(qǐng)看下面代碼。 Ext.select(divid);/選擇有id屬性的div元素 （2）Efoo=bar：選擇foo的屬性值為bar的元素。其使用語(yǔ)法請(qǐng)看下面代碼。 Ext.select(inputchecked=true);/選擇checked屬性值為true的元素 （3）Efoo=bar：選擇foo的屬性值以bar開(kāi)頭的元素。其使用語(yǔ)法請(qǐng)看下面 代碼。 Ext.select(inputname=form1); /選擇name屬性值以form1開(kāi)頭的元素 （4）Efoo$=bar：選擇foo的屬性值以bar結(jié)尾的元素。其使用語(yǔ)法請(qǐng)看下面 代碼。 Ext.select(inputname$=form1); /選擇name屬性值以form1結(jié)尾的元素 （5）Efoo*=bar：選擇foo的屬性值包含字符串bar的元素。其使用語(yǔ)法請(qǐng)看 下面代碼。 Ext.select(inputname*=form1); /選擇name屬性值包含字符串form1的元素 （6）Efoo%=2：選擇foo的屬性值能整除2的元素。其使用語(yǔ)法請(qǐng)看下面代碼。3.通過(guò)偽對(duì)象選擇，主要有以下18種語(yǔ)法。 （1）Ext.select(ul li:first-child); /選擇所有ul下的第一個(gè)li子節(jié)點(diǎn) （2）Ext.select(ul li:last-child); /選擇所有ul下的最后一個(gè)li子節(jié)點(diǎn) （3）Ext.select(ul li:nth-child(2); /選擇所有ul下的第2個(gè)li子節(jié)點(diǎn) （4）Ext.select(ul li:nth-child(odd); /選擇所有ul下的奇數(shù)行l(wèi)i子節(jié)點(diǎn) （5）Ext.select(ul li:nth-child(evan); /選擇所有ul下的偶數(shù)行l(wèi)i子節(jié)點(diǎn) （6）Ext.select(ul li:only-child); /選擇所有ul下只有一個(gè)子節(jié)點(diǎn)的li節(jié)點(diǎn) （7）Ext.select(input:checked);/選擇所有checked屬性值為true的元素 （8）Ext.select(input:first); /選擇第一個(gè)input元素 （9）Ext.select(input:last); /選擇最后一個(gè)input元素 （10）E:nth(n)：選擇匹配的第n（n1）個(gè)元素E。其使用語(yǔ)法請(qǐng)看下面代碼。 Ext.select(input:nth(2); /選擇第2個(gè)input元素 （11）E:odd：是語(yǔ)法“:nth-child(odd)”的簡(jiǎn)寫(xiě)。 （12）E:evan：是語(yǔ)法“:nth-child(evan)”的簡(jiǎn)寫(xiě)。（13） Ext.select(div:contains(list); /選擇innerHTML屬性包含“l(fā)ist”的div （14）Ext.select(div:nodeValue(test); /選擇包含文本節(jié)點(diǎn)且值為“test”的4.通過(guò)CSS值進(jìn)行選擇。主要有以下6種語(yǔ)法。 v （1）E:display=none：選擇display值為none的元素E。其使用語(yǔ)法請(qǐng)看下 面代碼。Ext.select(div:display=none); /選擇display值為none的元素E v （2）Ext.select(div:display=none); /選擇display值以none開(kāi)始的元素E（3）Ext.select(div:display$=none); /選擇display值以none結(jié)尾的元素E v （4）Ext.select(div:display*=none); /選擇display值包含字符串none的元 素E v（5）Ext.select(div:display%=none); /選擇display值整除2的元素E v （6）Ext.select(div:display!=none); /選擇display值不等于none的元素E Domquery的語(yǔ)法可以單獨(dú)使用，也可以組合在一起使用，例如以下代碼： Ext.select(div,span); /選擇所有div元素與span元素 Ext.select(div.red:first-childdisplay=none); /選擇class為red，且是第1個(gè)子節(jié)點(diǎn)，display屬性為none的div如果沒(méi)有指定選擇器開(kāi)始搜索的根節(jié)點(diǎn)，默認(rèn)是從body節(jié)點(diǎn)開(kāi)始，這就等于 每次都要做全文搜索，其性能可想而知，是相當(dāng)?shù)托У?4 事件HTML元素的標(biāo)準(zhǔn)事件是指mouseover、mousedown、click、blur、focus、 change等能夠直接對(duì)HTML元素發(fā)生的事件。在ExtJS中，這些事件的處理可以用如下的代碼：注冊(cè)一個(gè)事件處理函數(shù)使用： v Ext.get(myElement).on(click, myHandler, myScope); myElement是要注冊(cè) 的元素的ID，click是事件的名稱（注意，和HTML元素中的聲明onXXX不同， 這里不需要on），myHandler是處理函數(shù)的函數(shù)名稱，myScope是一個(gè)可選的參數(shù)，指定處理函數(shù)綁定的對(duì)象，也就是處理函數(shù)的作用域，如果不提供 這個(gè)參數(shù)，則是默認(rèn)的window。撤銷一個(gè)事件處理函數(shù)： Ext.get(myElement).un(click, myHandler, myScope) 參數(shù)的意義同上。 5 ExtJs所包含組件5.1 ExtJS組件分類EXTJS有近40種組件，而這些組件又可以大致分成三大類，即基本組件、工具欄組件、表單及元素組件。EXIJS的基本組件：xtype Class 說(shuō)明- - -box Ext.BoxComponent 具有邊框?qū)傩缘慕M件button Ext.Button 按鈕colorpalette Ext.ColorPalette 調(diào)色板component Ext.Component 組件container Ext.Container 容器cycle Ext.CycleButtondataview Ext.DataView 數(shù)據(jù)顯示視圖datepicker Ext.DatePicker 日期選擇面板e(cuò)ditor Ext.Editor 編輯器editorgrid Ext.grid.EditorGridPanel 可編輯的表格grid Ext.grid.GridPanel 表格paging Ext.PagingToolbar 工具欄中的間隔panel Ext.Panel 面板progress Ext.ProgressBar 進(jìn)度條splitbutton Ext.SplitButton 可分裂的按鈕tabpanel Ext.TabPanel 選項(xiàng)面板treepanel Ext.tree.TreePanel 樹(shù)viewport Ext.ViewPort 視圖window Ext.Window 窗口 工具欄組件是為了構(gòu)造工具欄而準(zhǔn)備的，在Windows桌面軟件中，工具欄隨處可見(jiàn)，以其方便性與集成性為用戶所稱道。EXTJS的工具欄組件能夠在Web上構(gòu)造其表現(xiàn)和功能與桌面軟件完全一樣的工具欄。工具欄組件有：-toolbar Ext.Toolbar 工具欄tbbutton Ext.Toolbar.Button 按鈕tbfill Ext.Toolbar.Fill 文件tbitem Ext.Toolbar.Item 工具條項(xiàng)目tbseparator Ext.Toolbar.Separator 工具欄分隔符tbspacer Ext.Toolbar.Spacer 工具欄空白tbsplit Ext.Toolbar.SplitButton工具欄分隔按鈕tbtext Ext.Toolbar.TextItem 工具欄文本項(xiàng) 在傳統(tǒng)Web UI中，表單時(shí)重要的界面元素了。ExtJS的表單組件對(duì)普通HTML的表單進(jìn)行了封裝，不僅提供了更靚麗的外觀表現(xiàn)，同時(shí)也擴(kuò)充了功能。使用EXTJS時(shí)限Web應(yīng)用，表單組件也是使用最為頻繁的組件了。表單及字段組件包含：-form Ext.FormPanel Form面板checkbox Ext.form.Checkboxcheckbox錄入框combo Ext.form.ComboBoxcombo選擇項(xiàng)datefield Ext.form.DateField 日期選擇項(xiàng)field Ext.form.Field 表單字段fieldset Ext.form.FieldSet 表單字段組hidden Ext.form.Hidden 表單隱藏域htmleditor Ext.form.HtmlEditor html編輯器numberfield Ext.form.NumberField 數(shù)字編輯器radio Ext.form.Radio 單選按鈕textarea Ext.form.TextArea 區(qū)域文本框textfield Ext.form.TextField 表單文本框timefield Ext.form.TimeField 時(shí)間錄入項(xiàng)trigger Ext.form.TriggerField 觸發(fā)錄入項(xiàng)6 ExtJs常用組件介紹6.1 Panel組件面板本身是一個(gè)容器，應(yīng)用程序界面一般由一個(gè)個(gè)面板，通過(guò)不同的方式組合而成，里面可以包含各種其他的組件；面板一般由以下幾個(gè)部分組成：一個(gè)頂部工具欄、一個(gè)底部工具欄、面板頭部（即title）、面板底部、面板主區(qū)域。6.1.1 panel示例 簡(jiǎn)單的panel tabPanel panel的組成6.1.2 panel的布局panel的布局主要有十種之多，主要包括ContainerLayout (容器布局)、FitLayout (自適應(yīng)布局)、AccordionLayout (折疊布局)、CardLayoutLayout (卡片式布局)、AbsoluteLayout (絕對(duì)位置布局)、FormLayout(表單布局)、ColumnLayout (列布局)、BoderLayout (邊框布局)、TableLayout (表格布局），下面介紹幾個(gè)常用的布局方式： ContainerLayout (容器布局)提供容器作為布局的基礎(chǔ)邏輯，通常會(huì)被擴(kuò)展而不通過(guò)new 關(guān)鍵字直接創(chuàng)建，一般作為默認(rèn)布局存在; ColumnLayout (列布局) TableLayout (表格布局） BoderLayout (邊框布局)BorderLayout邊框布局將布局分為5部分：east,south,west,north,center6.1.3 panel屬性簡(jiǎn)介1.autoLoad：有效的url字符串，把那個(gè)url中的body中的數(shù)據(jù)自動(dòng)加載顯示2.autoScroll:設(shè)為true則內(nèi)容溢出的時(shí)候產(chǎn)生滾動(dòng)條，默認(rèn)為false3.bbar:底部條，顯示在主體內(nèi)，/代碼：bbar:text:底部工具欄bottomToolbar,工具條中也可以放置相應(yīng)的按鈕，以及其他的組件，分頁(yè)條等等4.tbar:頂部條，顯示在主體內(nèi)，/代碼:tbar:text:頂部工具欄topToolbar,5.buttons:按鈕集合，自動(dòng)添加到footer中（footer參數(shù)，顯示在主體外）/代碼：buttons:text:按鈕位于footer;buttons:new Ext.Button(text:確定)6.buttonAlign:footer中按鈕的位置，枚舉值為：left,right,center,默認(rèn)為right面板中按鈕的顯示位置，不過(guò)按鈕的顯示并沒(méi)有在panel的主體中，而是顯示在底部的工具條上7.collapsible：設(shè)為true，顯示右上角的收縮按鈕，默認(rèn)為false8.draggable:true則可拖動(dòng)，但需要你提供操作過(guò)程，默認(rèn)為false9.html:主體的內(nèi)容10.id：id值，通過(guò)id可以找到這個(gè)組件，建議一般加上這個(gè)id值；注：頁(yè)面中不能出現(xiàn)兩個(gè)id相同的組件否則頁(yè)面就會(huì)發(fā)生沖突，導(dǎo)致某些組件的位置等顯示不正確。11.width：寬度12.height：高度13.title:標(biāo)題14.titleCollapse：設(shè)為true，則點(diǎn)擊標(biāo)題欄的任何地方都能收縮，默認(rèn)為false.15.applyTo：（id）渲染到某個(gè)html元素中16.contentEl：（id）將某個(gè)html元素里面的內(nèi)容在panel中呈現(xiàn)出來(lái)，17.renderTo：（id）渲染到某個(gè)html元素/applyTo,renderTo這兩個(gè)和contentEl方向是相反的，在表面上看applyTo和renderTo沒(méi)有太大的區(qū)別。6.2 ViewPort組件在前面的示例中，為了顯示一個(gè)面板，我們需要在頁(yè)面上添加一個(gè)，然后把 Ext控件渲染到這個(gè)div上。VeiwPort代表整個(gè)瀏覽器顯示區(qū)域，該對(duì)象渲染到頁(yè)面的body區(qū)域，并會(huì)隨著瀏覽器顯示區(qū)域的大小自動(dòng)改變，一個(gè)頁(yè)面中只能有一個(gè)ViewPort實(shí)例，Viewport不需要再指定renderTo。 在Viewport 上常用的布局有fit、border 等。fit布局示例：border布局示例：6.3 表格控件及其內(nèi)部屬性EXT中的表格功能非常強(qiáng)大，包括排序、緩存、拖動(dòng)、隱藏某一列、自動(dòng)顯示行號(hào)、列匯總、單元格編輯等使用功能。6.3.1 簡(jiǎn)單的Grid首先，grid表格是二維的，橫著的是行，豎著的是列，就像設(shè)計(jì)數(shù)據(jù)庫(kù)表一樣，要設(shè)置我們的表有幾列。1、創(chuàng)建表格的列信息： 代碼如下:var cm=new Ext.grid.ColumnModel( header:編號(hào),dataIndex:id, header:名稱,dataIndex:name, header:描述,dataIndex:desn ); 2、添加數(shù)據(jù)信息： 代碼如下:var data= 1,name1,desn1, 2,name2,desn2, 3,name3,desn3, 4,name4,desn4, 5,name5,desn5 ; 此處定義了一個(gè)二維數(shù)組，顯示到grid中就應(yīng)該是5行3列，其中的列，分別對(duì)應(yīng)id、name、desn。3、創(chuàng)建數(shù)據(jù)存儲(chǔ)對(duì)象：（列和數(shù)據(jù)聯(lián)系的橋梁） 代碼如下:var ds = new Ext.data.Store( proxy:new Ext.data.MemoryProxy(data), reader:new Ext.data.ArrayReader(, name:id, name:name, name:desn ) ); ds.load();/這個(gè)相當(dāng)?shù)闹匾?Ext.data.Store有兩個(gè)屬性，proxy：定義從哪里獲得數(shù)據(jù)，此處為從內(nèi)存獲取數(shù)據(jù)；reader定義如何解析數(shù)據(jù)。ds.load()用于進(jìn)行數(shù)據(jù)的初始化。若與后臺(tái)結(jié)合，proxy定義如下：proxy : new Ext.data.HttpProxy( url:url),reader定義如下：reader : new Ext.data.JsonReader( totalProperty: totalCount, root: root, fields: extFields/對(duì)應(yīng)需要顯示的實(shí)體屬性，如:/var extFields = id,name, desn;)注:后臺(tái)返回?cái)?shù)據(jù)形式為：json = totalCount: + count + ,root: +jsonArray + ;jsonArray的格式為root:id:id,name:name,desn: desn；可用如下形式進(jìn)行轉(zhuǎn)化：JsonConfig jsonConfig = new JsonConfig();jsonConfig.registerJsonValueProcessor(Date.class, new DateJsonValueProcessor(yyyy-MM-dd);JSONArray jsonArray = JSONArray.fromObject(list, jsonConfig);導(dǎo)入jar包為：json-lib-2.3-jdk15.jar、commons-beanutils-1.8.0.jar、commons-collections-3.2.1.jar、commons-lang-2.3.jar、commons-logging-1.1.1.jar、ezmorph-1.0.6.jar4、表格的列模型定義好了，原始數(shù)據(jù)和數(shù)據(jù)的轉(zhuǎn)換也已經(jīng)完成，剩下的只需要把它們裝配在一起，我們的Grid就創(chuàng)建成功了。 代碼如下:var grid=new Ext.grid.GridPanel( renderTo:grid, store: ds, cm:cm); 5、注意：Ext.grid.Grid的renderTo屬性指示EXT將表格渲染到什么地方，所以，在HTML里應(yīng)該有一個(gè)與之對(duì)應(yīng)。 6.3.2 Grid的功能詳解 部分功能屬性1、默認(rèn)情況下，Grid是可以拖放列，也可以改變列的寬度，如果要禁用這兩個(gè)功能，在定義Grid對(duì)象時(shí)分別設(shè)置enableColumnMove和enableColumnResize為false即可。 2、如果希望顯示斑馬線效果，可以加上stripeRows:true 自主決定每列的寬度1、如果要定義寬度，只要設(shè)置該列的width屬性即可，如下面的代碼所示。效果圖如圖2所示。代碼如下:var cm=new Ext.grid.ColumnModel( header:編號(hào),dataIndex:id,width:60, header:名稱,dataIndex:name,width:180, header:描述,dataIndex:desn,width:200 );2、這樣需要自己去計(jì)算每列的寬度，如果想讓每列自動(dòng)填滿Grid,只需要viewConfig中的forceFit即可。使用forceFit后，Grid會(huì)根據(jù)你在cm里設(shè)置的width按比例分配，非常智能。實(shí)現(xiàn)代碼如下： 代碼如下:var grid=new Ext.grid.GridPanel( renderTo:grid, stripeRows:true,/斑馬線效果 loadMask:true, store: ds, height:600, cm:cm, viewConfig: forceFit:true ); 3、我們也可以考慮autoExpandColumn,它可以讓指定列的寬度自動(dòng)伸展，從而填充整個(gè)表格。代碼如下 代碼如下:var grid=new Ext.grid.GridPanel( renderTo:grid, stripeRows:true,/斑馬線效果 loadMask:true, store: ds, height:600, cm:cm, autoExpandColumn:desn / viewConfig: / forceFit:true / ); 注意：autoExpandColum只能指定一列的id,注意，必須是id,原來(lái)我們?cè)O(shè)置的cm里面都沒(méi)有id,現(xiàn)在為了使用autoExpandColumn,要給cm的desn設(shè)置id.于是在渲染時(shí)desn就可以自動(dòng)延伸，否則會(huì)出錯(cuò)。 代碼如下:var cm=new Ext.grid.ColumnModel( header:編號(hào),dataIndex:id,width:60, header:名稱,dataIndex:name,width:180, id:desn,header:描述,dataIndex:desn,width:200 ); Grid支持按列排序在EXT中可以很方便地實(shí)現(xiàn)排序功能，只需要在定義列模型時(shí)增加sortable屬性，如下面代碼所示： 代碼如下:var cm=new Ext.grid.ColumnModel( header:編號(hào),dataIndex:id,width:60,sortable:true, header:名稱,dataIndex:name,width:180, id:desn,header:描述,dataIndex:desn,width:200 );grid在后臺(tái)進(jìn)行排序，除了在列中增加sortable屬性外，還要在Ext.data.Store中添加remoteSort:true屬性，代碼如下：var ds = new Ext.data.Store(url : grid1.jsp,reader : extReader,remoteSort:true);設(shè)置remoteSort后，加載數(shù)據(jù)時(shí)，會(huì)向后臺(tái)傳遞兩個(gè)參數(shù)：sort、dirsort：表示需要排序的字段dir：表示排序ASC/DESC正序或逆序 顯示時(shí)間類型數(shù)據(jù)盡管返回的JSON里都是數(shù)字和字符串，但是在EXT中我們同樣可以從后臺(tái)取得日期類型的數(shù)據(jù)，然后交給Grid進(jìn)行格式化。 1、首先定義一組數(shù)據(jù)，其中最后一列是日期格式的數(shù)據(jù)。 代碼如下:var data= 1,name1,desn1,2009-09-17T02:58:04, 2,name2,desn1,2009-09-17T02:58:04, 3,name3,desn1,2009-09-17T02:58:04, 4,name4,desn1,2009-09-17T02:58:04, 5,name5,desn1,2009-09-17T02:58:04 ; 2、接著我們?cè)趓eader里面增加一行配置，除了設(shè)置name以外，還設(shè)置了type和dateFormat兩個(gè)屬性。代碼如下： 代碼如下:var store1= new Ext.data.Store( proxy:new Ext.data.MemoryProxy(data), reader:new Ext.data.ArrayReader(, name:id, name:name, name:desn, name:date,type:date,dateFormat:Y-m-dTH:i:s ) ); 3、同樣的，我們還需要在cm里面增加一行配置： 代碼如下:var cm=new Ext.grid.ColumnModel( header:編號(hào),dataIndex:id,width:60,sortable:true, header:名稱,dataIndex:name,width:180, id:desn,header:描述,dataIndex:desn,width:200, header:時(shí)間,dataIndex:date,type:date,renderer:Ext.util.Format.dateRenderer(Y年m月d日) ); 單元格中改變字的顏色及顯示按鈕我們?cè)赾m中增加性別及操作一列，并為這兩列增加renderer屬性，代碼如下：var cm=new Ext.grid.ColumnModel( header:序號(hào),dataIndex:id,sortable:true, header:名稱,dataIndex:name, header:性別,dataIndex:sex,renderer:showSex,id:desn,header:描述,dataIndex:desn, header:時(shí)間,dataIndex:date,type:date,renderer:Ext.util.Format.dateRenderer(Y年m月d日),header:操作,dataIndex:desn,renderer:showDesn );function showSex(value)if (value = 男) return 男; else return 女;function showDesn(value,cellmeta,record,rowIndex,columnIndex,store) var str = ;return str;1.value是當(dāng)前單元格的值2.record是獲得這行的所有數(shù)據(jù)，此行的值可以用record.dataid來(lái)獲得3.rowIndex是行號(hào)，從零開(kāi)始4.columnIndex是列號(hào)，從零開(kāi)始5.store表格里的所有數(shù)據(jù)都可以通過(guò)它來(lái)調(diào)用，store.getAt(0)取得的為第1行的record值； 自動(dòng)顯示行號(hào)和復(fù)選框?qū)嶋H上，行號(hào)和復(fù)選框都是renderer的延伸。當(dāng)然，復(fù)選框的功能要復(fù)雜得多。 1、自動(dòng)顯示行號(hào)：修改列模型cm,加入RowNumberer對(duì)象；2、復(fù)選框：我們創(chuàng)建一個(gè)CheckboxSelectionModel()代碼如下:var sm=new Ext.grid.CheckboxSelectionModel(); var cm=new Ext.grid.ColumnModel( new Ext.grid.RowNumberer(), sm, header:編號(hào),dataIndex:id,width:40,sortable:true, header:名稱,dataIndex:name,width:180, id:desn,header:描述,dataIndex:desn,width:200, header:時(shí)間,dataIndex:date,type:date,renderer:Ext.util.Format.dateRenderer(Y年m月d日) ); grid加載時(shí)的遮罩效果定義遮罩效果mask：var mask = new Ext.LoadMask(grid, msg:正在加載數(shù)據(jù)，請(qǐng)稍侯); mask.show();當(dāng)加載完成時(shí)，取消掉遮罩ds.on(load, function() Ext.get(grid).unmask(););同時(shí)，在grid中添加mask屬性：var grid=new Ext.grid.GridPanel( renderTo:grid, stripeRows:true,/斑馬線效果 loadMask:true, store: ds, height:600, cm:cm, loadMask : msg:正在加載數(shù)據(jù)，請(qǐng)稍侯); 表格分頁(yè)表格分頁(yè)Grid控件對(duì)性能要求較高，如果在一個(gè)Grid里面顯示上千條記錄，效率會(huì)有明顯下降，所以必須考慮分頁(yè)問(wèn)題。 1、為Grid添加分頁(yè)工具條：在前面代碼的基礎(chǔ)上修改grid代碼： 代碼如下:var grid1=new Ext.grid.GridPanel( renderTo:grid1, stripeRows:true,/斑馬線效果 loadMask:true, store: store1, height:200, cm:cm, viewConfig: forceFit:true