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

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