ExtJS的使用方法匯總—配置和表格控件使用

青_春 2015-11-19

展開全文

在網(wǎng)上差一些關于ExtJS的相關資料，看到這篇博客寫的不錯，拿出來分享一下！

博客文章：ExtJS的使用方法匯總(1)——配置和表格控件使用
ExtJS的使用方法匯總(2)——表單與輸入控件

原文鏈接：http://blog.csdn.net/rocket5725/article/details/4535323

第二篇博客：http://blog.csdn.net/rocket5725/article/details/4538843

原文如下：

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

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

一、ExtJS下載以及配置

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

2、配置過程，假設下載后的目錄為Ext,我們在該目錄下建立我們自己的目錄MyExample(該目錄用于存放你自己寫的代碼)，配置過程如下：

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

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

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

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

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

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

二、表格控件Grid的使用

EXT中的表格功能非常強大，包括排序、緩存、拖動、隱藏某一列、自動顯示行號、列匯總、單元格編輯等使用功能。我們首先介紹如何制作一個簡單的Grid。

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','name1','desn1'],  
      ['3','name1','desn1'],  
      ['4','name1','desn1'],  
      ['5','name1','desn1']  
  ];  

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

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();//這個相當?shù)闹匾?/span>  

4、表格的列模型定義好了，原始數(shù)據(jù)和數(shù)據(jù)的轉(zhuǎn)換也已經(jīng)完成，剩下的只需要把它們裝配在一起，我們的Grid就創(chuàng)建成功了。

var grid=new Ext.grid.GridPanel({  
     renderTo:"grid",  
     store: ds,  
     height:600,  
     cm:cm                  
 });  

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

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

實驗效果圖如圖1所示

圖1 一個簡單的Grid

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

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

3.1 部分屬性功能

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

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

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

3.2 自主決定每列的寬度

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

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

圖2 自定義每列的寬度

2、這樣需要自己去計算每列的寬度，如果想讓每列自動填滿Grid,只需要viewConfig中的forceFit即可。使用forceFit后，Grid會根據(jù)你在cm里設置的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,原來我們設置的cm里面都沒有id,現(xiàn)在為了使用autoExpandColumn,要給cm的desn設置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}  
            ]);  

3.3 讓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}  
            ]);  

效果圖如圖3所示

圖3 按列排序效果

3.4 顯示時間類型數(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里面增加一行配置，除了設置name以外，還設置了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日')}  
            ]);  

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

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

3.5 自動顯示行號和復選框

實際上，行號和復選框都是renderer的延伸。當然，復選框的功能要復雜得多。

1、自動顯示行號：修改列模型cm,加入RowNumberer對象；

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

3、詳細代碼如下，效果圖如圖5所示

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日')}  
            ]);  

圖5 自動行號以及復選框效果圖

3.6 表格分頁

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

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

var grid1=new Ext.grid.GridPanel({  
                renderTo:"grid1",  
                stripeRows:true,//斑馬線效果   
                loadMask:true,  
                store: store1,  
                height:200,  
                cm:cm,                  
                viewConfig:{  
                    forceFit:true  
                },  
                bbar:new Ext.PagingToolbar({  
                    pageSize:10,  
                    store: store1,  
                    displayInfo:true,  
                    displayMsg:'顯示第{0}條到{1}條記錄,一共{2}條',  
                    emptyMsg:"沒有記錄"  
                })                  
            });  

2、效果圖如圖6所示：

圖6 添加分頁工具條

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

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

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

4.1 制作一個簡單的EditorGrid

1、定義列，代碼如下：

var cm=new Ext.grid.ColumnModel([  
                {header:'編號',dataIndex:'id',width:40,editor:new Ext.grid.GridEditor(  
                    new Ext.form.TextField({  
                        allowBlank:false  
                    })  
                )},  
                {header:'名稱',dataIndex:'name',width:180,editor:new Ext.grid.GridEditor(  
                    new Ext.form.TextField({  
                        allowBlank:false  
                    })  
                )},  
                {id:'desn',header:'描述',dataIndex:'desn',width:200},  
                {header:'時間',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}  
            ]);   

2、定義grid,注意此時是EditorGridPanel.

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

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

圖7 通過單擊修改單元格

五、屬性表格——PropertyGrid

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

定義的方法如下：

<mce:script type="text/javascript"><!--  
        Ext.onReady(function(){  
            var grid=new Ext.grid.PropertyGrid({  
                title:"屬性表格",  
                autoHeight:true,  
                width:400,  
                renderTo:'grid1',  
                source:{  
                    "名字":"薛敬明",  
                    "創(chuàng)建時間":new Date(Date.parse('12/15/2009')),  
                    "是否有效":false,  
                    "版本號":.01,  
                    "描述":"估計沒有啥說的"  
                }  
            });   
                     
        });  
      
// --></mce:script>  

效果圖如圖8所示：

圖8 屬性表格效果圖

六、分組表格——Group

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

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

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

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

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:'sex',width:180},  
                {header:'名稱',dataIndex:'name',width:200},  
                {header:'描述',dataIndex:'desn',width:200}  
            ]);    

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

var store1= new Ext.data.GroupingStore({  
                proxy:new Ext.data.MemoryProxy(data),  
                reader:new Ext.data.ArrayReader({},[  
                    {name:'id'},  
                    {name:'sex'},  
                    {name:'name'},  
                    {name:'desn'}  
                ]),                  
                groupField:'sex',  
                sortInfo:{field:'id',direction:"ASC"}  
            });   
            store1.load();  

4、設計分組設計表格

var grid1=new Ext.grid.GridPanel({  
                store: store1,  
                height:300,  
                cm:cm,                  
                view:new Ext.grid.GroupingView(),  
                renderTo:"grid1"                
            });  

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

圖9 分組表格

六、可拖放的表格

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

圖10 可拖放的表格

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

var rz=new Ext.Resizable('grid1',{  
                wrap:true,  
                minHeight:100,  
                pinned:true,  
                handles:'all'  
            });  
            rz.on('resize',grid1.syncSize,grid1);  

注意：

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

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

七、Grid與右鍵菜單

Grid提供了四個與右鍵菜單相關的事件：

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

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

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

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

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

var contextmenu=new Ext.menu.Menu({  
                id:'theContextMenu',  
                items:[{  
                    text:'查看詳情',  
                    handler:function(){  
                    }  
                }]  
            });  
            grid1.on("rowcontextmenu",function(grid,rowIndex,e){  
                e.preventDefault();  
                grid1.getSelectionModel().selectRow(rowIndex);  
                contextmenu.showAt(e.getXY());  
            });   

圖11 右鍵菜單

*************************************************

在測試功能時，注意ExtJS的版本，本文介紹的是2.2版本，我自己練習用的是3.4.0，在功能實現(xiàn)上對于屬性、方法、事件的使用有很大的不同，如在3.4.0的版本中測試這些效果，第一個顯示Grid的效果就無法實現(xiàn)，還是理解大概的邏輯，具體的調(diào)用還是查官方給的ExtJS的API文檔最好。好像最新的版本是4.1.1。

對于本文的處理：

var grid=new Ext.grid.GridPanel({
renderTo:"grid",
store: ds,
height:600,
cm:cm
});

******************

var grid=new Ext.grid.GridPanel({
   renderTo:"grid",//rendTo屬性指示將表格渲染到什么地方
   store:ds,
   width:500,//限定寬度
   colModel:cm1,
   stripeRows:true,//斑馬線效果
   loadMask:true,//讀取數(shù)據(jù)遮罩和提示,Loading....
   enableColumnMove:false,//取消列的拖放
   enableColumnResize:false,//取消列的大小改變
   viewConfig:{
    forceFit:true//自動填滿Grid,填滿父容器"grid"的大小，
   }
  });

其他的問題，跟著ExtJS API文檔查吧！祝，大家編程愉快！