ExtJS時(shí)一套AJAX控件,本人認(rèn)為它是目前我見(jiàn)過(guò)最好最美的JS控件庫(kù)，所以非常有學(xué)習(xí)和使用價(jià)值，如果你還沒(méi)有接觸過(guò)ExtJS或者壓根對(duì)其不感興趣，那么沒(méi)有必要看下去了,ExtJS是一套完整的RIA解決方案，也因?yàn)楣δ芡暾斐闪薳xt-all.js有400多k,由于是基于JS和 CSS的功能實(shí)現(xiàn)，對(duì)客戶端機(jī)器性能也有一定的要求，即不支持IE6以下的版本。如果您的項(xiàng)目對(duì)網(wǎng)頁(yè)響應(yīng)時(shí)間有嚴(yán)格的限制，或者客戶端操作系統(tǒng)過(guò)于陳舊，一定不要選擇ExtJS。

本文主要是介紹ExtJS的下載和配置以及一些簡(jiǎn)單的使用方法。目前最新版本為3.0，但是本文主要介紹2.2版本。

一、ExtJS下載以及配置

1、下載地址：www.extjs.com/(這是官網(wǎng)，大家可以選擇自己喜歡的版本下載)

2、配置過(guò)程，假設(shè)下載后的目錄為Ext,我們?cè)谠撃夸浵陆⑽覀冏约旱哪夸汳yExample(該目錄用于存放你自己寫的代碼)，配置過(guò)程如下：

(1) 新建一個(gè)頁(yè)面文件Helloworld.html

(2) 在<head>和</head>之間添加如下代碼：

  1. <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />  
  2. <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>  
  3. <script type="text/javascript" src="../ext-all.js"></script>  
  4. <script type="text/javascript">  
  5.     Ext.onReady(function(){  
  6.         Ext.MessageBox.alert('HelloWorld','Hello World');  
  7.     })  
  8. </script>  

 

(3) 這里注意<script></script>不能用</script>取代

(4) js的導(dǎo)入順序不要更改

(3) 如果彈出一個(gè)HelloWorld的對(duì)話框，則代表配置成功。

二、表格控件Grid的使用

EXT中的表格功能非常強(qiáng)大，包括排序、緩存、拖動(dòng)、隱藏某一列、自動(dòng)顯示行號(hào)、列匯總、單元格編輯等使用功能。我們首先介紹如何制作一個(gè)簡(jiǎn)單的 Grid。

1、創(chuàng)建表格的列信息：

  1. var cm=new Ext.grid.ColumnModel([  
  2.      {header:'編號(hào)',dataIndex:'id'},  
  3.      {header:'名稱',dataIndex:'name'},  
  4.      {header:'描述',dataIndex:'desn'}  
  5.  ]);  

 

2、添加數(shù)據(jù)信息：

  1. var data=[  
  2.       ['1','name1','desn1'],  
  3.       ['2','name1','desn1'],  
  4.       ['3','name1','desn1'],  
  5.       ['4','name1','desn1'],  
  6.       ['5','name1','desn1']  
  7.   ];  
  

 

3、創(chuàng)建數(shù)據(jù)存儲(chǔ)對(duì)象：

  1. var ds=new Ext.data.Store({  
  2.       proxy:new Ext.data.MemoryProxy(data),  
  3.       reader:new Ext.data.ArrayReader({},[  
  4.           {name:'id'},  
  5.           {name:'name'},  
  6.           {name:'desn'}  
  7.       ])  
  8.   });  
  9.   ds.load();//這個(gè)相當(dāng)?shù)闹匾?/span>  

 

5、注意：Ext.grid.Grid的renderTo屬性指示 EXT將表格渲染到什么地方，所以，在HTML里應(yīng)該有一個(gè)<div id='grid'></div>與之對(duì)應(yīng)。

6、所有代碼清單如下(已通過(guò)測(cè)試)：

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Grid.aspx.cs" Inherits="Ext_example_Grid" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml" >  
  6. <head id="Head1" runat="server">  
  7.     <title>Grid </title>  
  8.     <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />  
  9.     <mce:script type="text/javascript" src="../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>  
  10.     <mce:script type="text/javascript" src="../ext-all.js" mce_src="ext-all.js"></mce:script>  
  11.     <mce:script type="text/javascript"><!--  
  12.         Ext.onReady(function(){  
  13.               
  14.             var cm=new Ext.grid.ColumnModel([  
  15.                 {header:'編號(hào)',dataIndex:'id'},  
  16.                 {header:'名稱',dataIndex:'name'},  
  17.                 {header:'描述',dataIndex:'desn'}  
  18.             ]);  
  19.             var data=[  
  20.                 ['1','name1','desn1'],  
  21.                 ['2','name1','desn1'],  
  22.                 ['3','name1','desn1'],  
  23.                 ['4','name1','desn1'],  
  24.                 ['5','name1','desn1']  
  25.             ];  
  26.               
  27.             var ds=new Ext.data.Store({  
  28.                 proxy:new Ext.data.MemoryProxy(data),  
  29.                 reader:new Ext.data.ArrayReader({},[  
  30.                     {name:'id'},  
  31.                     {name:'name'},  
  32.                     {name:'desn'}  
  33.                 ])  
  34.             });  
  35.             ds.load();  
  36.                           
  37.             var grid=new Ext.grid.GridPanel({  
  38.                 renderTo:"grid",  
  39.                 store: ds,  
  40.                 height:600,  
  41.                 cm:cm                  
  42.             });              
  43.         });  
  44.       
  45. // --></mce:script>  
  46. </head>  
  47. <body>  
  48.     <form id="form1" runat="server">  
  49.     <div id="grid">  
  50.       
  51.     </div>  
  52.     </form>  
  53. </body>  
  54. </html>  

 

實(shí)驗(yàn)效果圖如圖1所示

1

圖1 一個(gè)簡(jiǎn)單的Grid

三、表格控件Grid的功能詳解

第二部分簡(jiǎn)單介紹了如何創(chuàng)建簡(jiǎn)單的Grid，本章將對(duì)Grid的功能進(jìn)行詳細(xì)的分析。

3.1 部分屬性功能

1、默認(rèn)情況下，Grid是可以拖放列，也可以改變列的寬度，如果要禁用這兩個(gè)功能，在定義Grid對(duì)象時(shí)分別設(shè)置 enableColumnMove和enableColumnResize為false即可。

2、如果希望顯示斑馬線效果，可以加上stripeRows:true

3、Grid還支持一種讀取數(shù)據(jù)時(shí)的遮罩和提示功能，設(shè)置屬性loadMask:true,在store.load()完成之前一直會(huì)顯示"Loading…"

3.2 自主決定每列的寬度

1、如果要定義寬度，只要設(shè)置該列的width屬性即可，如下面的代碼所示。效果圖如圖2所示。

  1. var cm=new Ext.grid.ColumnModel([  
  2.                 {header:'編號(hào)',dataIndex:'id',width:60},  
  3.                 {header:'名稱',dataIndex:'name',width:180},  
  4.                 {header:'描述',dataIndex:'desn',width:200}  
  5.             ]);  
  

 

2

圖2 自定義每列的寬度

2、這樣需要自己去計(jì)算每列的寬度，如果想讓每列自動(dòng)填滿Grid,只需要viewConfig中的forceFit即可。使用forceFit 后，Grid會(huì)根據(jù)你在cm里設(shè)置的width按比例分配，非常智能。實(shí)現(xiàn)代碼如下：

  1. var grid=new Ext.grid.GridPanel({  
  2.                 renderTo:"grid",  
  3.                 stripeRows:true,//斑馬線效果  
  4.                 loadMask:true,  
  5.                 store: ds,  
  6.                 height:600,  
  7.                 cm:cm,  
  8.                 viewConfig:{  
  9.                     forceFit:true  
  10.                 }                  
  11.             });   

 

3、我們也可以考慮autoExpandColumn,它可以讓指定列的寬度自動(dòng)伸展，從而填充整個(gè)表格。代碼如下

  1. var grid=new Ext.grid.GridPanel({  
  2.                 renderTo:"grid",  
  3.                 stripeRows:true,//斑馬線效果  
  4.                 loadMask:true,  
  5.                 store: ds,  
  6.                 height:600,  
  7.                 cm:cm,  
  8.                 autoExpandColumn:'desn'  
  9. //                viewConfig:{  
  10. //                    forceFit:true  
  11. //                }                  
  12.             });   

 

注意：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ò)。

  1. var cm=new Ext.grid.ColumnModel([  
  2.                 {header:'編號(hào)',dataIndex:'id',width:60},  
  3.                 {header:'名稱',dataIndex:'name',width:180},  
  4.                 {id:'desn',header:'描述',dataIndex:'desn',width:200}  
  5.             ]);  

 

3.3 讓Grid支持按列排序

在EXT中可以很方便地實(shí)現(xiàn)排序功能，只需要在定義列模型時(shí)增加sortable屬性，如下面代碼所示：

  1. var cm=new Ext.grid.ColumnModel([  
  2.                 {header:'編號(hào)',dataIndex:'id',width:60,sortable:true},  
  3.                 {header:'名稱',dataIndex:'name',width:180},  
  4.                 {id:'desn',header:'描述',dataIndex:'desn',width:200}  
  5.             ]);  

 

效果圖如圖3所示

3

圖3 按列排序效果

3.4 顯示時(shí)間類型數(shù)據(jù)

盡管返回的JSON里都是數(shù)字和字符串，但是在EXT中我們同樣可以從后臺(tái)取得日期類型的數(shù)據(jù)，然后交給Grid進(jìn)行格式化。

1、首先定義一組數(shù)據(jù)，其中最后一列是日期格式的數(shù)據(jù)。

  1. var data=[  
  2.                 ['1','name1','desn1','2009-09-17T02:58:04'],  
  3.                 ['2','name2','desn1','2009-09-17T02:58:04'],  
  4.                 ['3','name3','desn1','2009-09-17T02:58:04'],  
  5.                 ['4','name4','desn1','2009-09-17T02:58:04'],  
  6.                 ['5','name5','desn1','2009-09-17T02:58:04']  
  7.             ];  

 

2、接著我們?cè)趓eader里面增加一行配置，除了設(shè)置name以外，還設(shè)置了type和dateFormat兩個(gè)屬性。代碼如下：

  1. var store1= new Ext.data.Store({  
  2.                 proxy:new Ext.data.MemoryProxy(data),  
  3.                 reader:new Ext.data.ArrayReader({},[  
  4.                     {name:'id'},  
  5.                     {name:'name'},  
  6.                     {name:'desn'},  
  7.                     {name:'date',type:'date',dateFormat:'Y-m-dTH:i:s'}  
  8.                 ])  
  9.             });  
  

 

3、同樣的，我們還需要在cm里面增加一行配置：

  1. var cm=new Ext.grid.ColumnModel([  
  2.                 {header:'編號(hào)',dataIndex:'id',width:60,sortable:true},  
  3.                 {header:'名稱',dataIndex:'name',width:180},  
  4.                 {id:'desn',header:'描述',dataIndex:'desn',width:200},  
  5.                 {header:'時(shí)間',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}  
  6.             ]);  

 

4、代碼詳細(xì)信息如下所示，效果圖如圖4所示。

  

 

4

圖4 具有時(shí)間數(shù)據(jù)的Grid

3.5 自動(dòng)顯示行號(hào)和復(fù)選框

實(shí)際上，行號(hào)和復(fù)選框都是renderer的延伸。當(dāng)然，復(fù)選框的功能要復(fù)雜得多。

1、自動(dòng)顯示行號(hào)：修改列模型cm,加入RowNumberer對(duì)象；

2、復(fù)選框：我們創(chuàng)建一個(gè)CheckboxSelectionModel()

3、詳細(xì)代碼如下，效果圖如圖5所示

  1. var sm=new Ext.grid.CheckboxSelectionModel();  
  2.             var cm=new Ext.grid.ColumnModel([  
  3.                 new Ext.grid.RowNumberer(),  
  4.                 sm,  
  5.                 {header:'編號(hào)',dataIndex:'id',width:40,sortable:true},  
  6.                 {header:'名稱',dataIndex:'name',width:180},  
  7.                 {id:'desn',header:'描述',dataIndex:'desn',width:200},  
  8.                 {header:'時(shí)間',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}  
  9.             ]);  

 

5

圖5 自動(dòng)行號(hào)以及復(fù)選框效果圖

3.6 表格分頁(yè)

Grid控件對(duì)性能要求較高，如果在一個(gè)Grid里面顯示上千條記錄，效率會(huì)有明顯下降，所以必須考慮分頁(yè)問(wèn)題。

1、為Grid添加分頁(yè)工具條：在前面代碼的基礎(chǔ)上修改grid代碼：

  1. var grid1=new Ext.grid.GridPanel({  
  2.                 renderTo:"grid1",  
  3.                 stripeRows:true,//斑馬線效果  
  4.                 loadMask:true,  
  5.                 store: store1,  
  6.                 height:200,  
  7.                 cm:cm,                  
  8.                 viewConfig:{  
  9.                     forceFit:true  
  10.                 },  
  11.                 bbar:new Ext.PagingToolbar({  
  12.                     pageSize:10,  
  13.                     store: store1,  
  14.                     displayInfo:true,  
  15.                     displayMsg:' 顯示第{0}條到{1}條記錄,一共{2}條',  
  16.                     emptyMsg:"沒(méi)有記錄"  
  17.                 })                  
  18.             });  

 

2、效果圖如圖6所示：

6

圖6 添加分頁(yè)工具條

3、如果要真正實(shí)現(xiàn)分頁(yè)，還需要通過(guò)后臺(tái)腳本獲得分頁(yè)數(shù)據(jù)，這部分在此不再給出 

四、可編輯表格控件——EditorGrid

EditorGrid可以直接在表格里面執(zhí)行添加、刪除、修改、查找等功能，然后一次性保持。還有可以動(dòng)態(tài)修改某個(gè)單元格，這些單元格我們先暫時(shí)不能為空，保存時(shí)會(huì)進(jìn)行檢測(cè)，為空就無(wú)法保存，驗(yàn)證信息會(huì)給予提示。

4.1 制作一個(gè)簡(jiǎn)單的EditorGrid

1、定義列，代碼如下：

  1. var cm=new Ext.grid.ColumnModel([  
  2.                 {header:'編號(hào)',dataIndex:'id',width:40,editor:new Ext.grid.GridEditor(  
  3.                     new Ext.form.TextField({  
  4.                         allowBlank:false  
  5.                     })  
  6.                 )},  
  7.                 {header:'名稱',dataIndex:'name',width:180,editor:new Ext.grid.GridEditor(  
  8.                     new Ext.form.TextField({  
  9.                         allowBlank:false  
  10.                     })  
  11.                 )},  
  12.                 {id:'desn',header:' 描述',dataIndex:'desn',width:200},  
  13.                 {header:'時(shí)間',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}  
  14.             ]);   

 

2、定義grid,注意此時(shí)是EditorGridPanel.

  1. var grid1=new Ext.grid.EditorGridPanel({  
  2.                 renderTo:"grid1",  
  3.                 store: store1,  
  4.                 height:200,  
  5.                 clicksToEdit:1,  
  6.                 cm:cm           
  7.             });   

 

3、默認(rèn)情況下，需要雙擊單元格才能激活編輯器，從而進(jìn)行修改，不過(guò)，也可以給Grid配置clickToEdit:1，這樣就可以單擊單元格激活編輯器，從而進(jìn)行修改，如圖7所示：

7

圖7 通過(guò)單擊修改單元格

五、屬性表格——PropertyGrid

屬性表格擴(kuò)展自EditorGridPanel,所以可以直接編輯右邊的內(nèi)容，注意：只有右邊的，即使你單擊左邊的單元格，編輯器也會(huì)出現(xiàn)在右邊。

定義的方法如下：

  1. <mce:script type="text/javascript"><!--  
  2.         Ext.onReady(function(){  
  3.             var grid=new Ext.grid.PropertyGrid({  
  4.                 title:"屬性表格",  
  5.                 autoHeight:true,  
  6.                 width:400,  
  7.                 renderTo:'grid1',  
  8.                 source:{  
  9.                     "名字":"薛敬明",  
  10.                     "創(chuàng)建時(shí)間":new Date(Date.parse('12/15/2009')),  
  11.                     "是否有效":false,  
  12.                     "版本號(hào)":.01,  
  13.                     "描述":"估計(jì)沒(méi)有啥說(shuō)的"  
  14.                 }  
  15.             });   
  16.                      
  17.         });  
  18.       
  19. // --></mce:script>  

 

效果圖如圖8所示：

8

圖8 屬性表格效果圖

六、分組表格——Group

分組表格就是在普通表格的基礎(chǔ)上，根據(jù)某一列的數(shù)據(jù)將表格中的數(shù)據(jù)分組顯示的表格控件。

1、首先定義一組數(shù)據(jù)

  1. var data=[  
  2.                 ['1','male','name1','desn1'],  
  3.                 ['2','male','name2','desn1'],  
  4.                 ['3','female','name3','desn1'],  
  5.                 ['4','male','name4','desn1'],  
  6.                 ['5','female','name5','desn1'],  
  7.                 ['6','male','name6','desn1'],  
  8.                 ['7','male','name7','desn1']  
  9.             ];  

 

2、創(chuàng)建表格的列信息

  1. var sm=new Ext.grid.CheckboxSelectionModel();  
  2.             var cm=new Ext.grid.ColumnModel([  
  3.                 new Ext.grid.RowNumberer(),  
  4.                 sm,  
  5.                 {header:'編號(hào)',dataIndex:'id',width:40,sortable:true},  
  6.                 {header:'性別',dataIndex:'sex',width:180},  
  7.                 {header:'名稱',dataIndex:'name',width:200},  
  8.                 {header:'描述',dataIndex:'desn',width:200}  
  9.             ]);    

 

3、創(chuàng)建數(shù)據(jù)存儲(chǔ)對(duì)象

  1. var store1= new Ext.data.GroupingStore({  
  2.                 proxy:new Ext.data.MemoryProxy(data),  
  3.                 reader:new Ext.data.ArrayReader({},[  
  4.                     {name:'id'},  
  5.                     {name:'sex'},  
  6.                     {name:'name'},  
  7.                     {name:'desn'}  
  8.                 ]),                  
  9.                 groupField:'sex',  
  10.                 sortInfo:{field:'id',direction:"ASC"}  
  11.             });   
  12.             store1.load();  

 

4、設(shè)計(jì)分組設(shè)計(jì)表格

  1. var grid1=new Ext.grid.GridPanel({  
  2.                 store: store1,  
  3.                 height:300,  
  4.                 cm:cm,                  
  5.                 view:new Ext.grid.GroupingView(),  
  6.                 renderTo:"grid1"                
  7.             });  

 

5、代碼清單如下，效果圖如圖9所示。

 

 

9

圖9 分組表格

六、可拖放的表格

首先我們看圖10的效果圖：

10

圖10 可拖放的表格

注意圖10四周的藍(lán)色細(xì)條，把鼠標(biāo)放到上面，就可以用拖放改變表格的高度和寬度，實(shí)現(xiàn)這一效果并不難，也不需要對(duì)寫好的Grid做大的修改，只要在原先的基礎(chǔ)上添加如下代碼：

  1. var rz=new Ext.Resizable('grid1',{  
  2.                 wrap:true,  
  3.                 minHeight:100,  
  4.                 pinned:true,  
  5.                 handles:'all'  
  6.             });  
  7.             rz.on('resize',grid1.syncSize,grid1);  

 

注意：

(1) Resizable必須放在render之后，否則就會(huì)出現(xiàn)問(wèn)題；

(2) handles:'all'代表可以向所有放心拖動(dòng)表格 

七、Grid與右鍵菜單

Grid提供了四個(gè)與右鍵菜單相關(guān)的事件：

（1） contextmenu:全局性的右鍵事件；

（2）cellcontextmenu:單元格上的右鍵事件

（3）rowcontextmenu:行上的右鍵事件

（4）headercontextmenu:表頭的右鍵事件

以下代碼我們實(shí)現(xiàn)一個(gè)行上的右鍵事件，代碼清單如下，效果圖如11所示

  1. var contextmenu=new Ext.menu.Menu({  
  2.                 id:'theContextMenu',  
  3.                 items:[{  
  4.                     text:'查看詳情',  
  5.                     handler:function(){  
  6.                     }  
  7.                 }]  
  8.             });  
  9.             grid1.on("rowcontextmenu",function(grid,rowIndex,e){  
  10.                 e.preventDefault();  
  11.                 grid1.getSelectionModel().selectRow(rowIndex);  
  12.                 contextmenu.showAt(e.getXY());  
  13.             });   

 

11

圖11 右鍵菜單