大家好，繼上次的treepanel之后，今天給大家介紹gridpanel，gridpanel也是在extjs編程中出現(xiàn)頻率高的一種組件，是必須要掌握的，當(dāng)然，gridpanel比treepanel要復(fù)雜的多，基本上能實(shí)現(xiàn)excel中大部分基本功能，功能相當(dāng)強(qiáng)大。

先上張截圖吧，一睹grid的芳容（這是未經(jīng)過(guò)處理的最基本的grid界面）

grid的實(shí)現(xiàn)包括model、store和view三個(gè)層面。

從model開(kāi)始，先貼代碼再講解：

Js代碼  

1. Ext.define('eduSys.Course.model', {  
2.     extend : 'Ext.data.Model',  
3.  // idProperty : 'name',  
4.     fields : [  
5.         {name : 'coursesGuid', type : 'string'},  
6.         {name : 'code', type : 'string'},  
7.         {name : 'name', type : 'string'},  
8.         {name : 'period', type : 'int'}           
9.     ]  
10.  });  

代碼的一開(kāi)始，先定義一個(gè)model類(lèi)，名字自己取，然后就是model里的鍵值對(duì)屬性賦值，首先最重要的就是這個(gè)自定義的類(lèi)要繼承自Ext.data.Model，用extend屬性來(lái)表示，再就是這個(gè)表格的基本屬性，即表格每一列代表的含義，用field屬性來(lái)表示，field是一個(gè)數(shù)組類(lèi)型，里面存放各個(gè)列屬性對(duì)象，每個(gè)對(duì)象里面要定義對(duì)象的名字（name）和類(lèi)型（type），便于與后面的store層進(jìn)行連接。至于idProperty（可有可無(wú)）這個(gè)屬性后面講解。這樣model就基本寫(xiě)好了，很簡(jiǎn)單吧。

下面store層，代碼如下：

Js代碼  

1.  Ext.define('eduSys.KnowledgeCourse.store', {  
2.   
3.     extend : 'Ext.data.Store',  
4.     model : 'eduSys.Course.model',  
5.     storeId : 'knowledgeCourseStore',  
6.     pageSize : 5,  
7.       
8.     proxy : {  
9.         type : 'ajax',  
10.         url : '../../KnowledgeUnitServlet',  
11.         extraParams: {  
12.             guid : document.location.search.split('=')[1],  
13.             cmd : 'getCourses'  
14.         },  
15.         reader : {  
16.             type : 'json'  
17.         }  
18.     },  
19. /*  sorters : [{ 
20.             property : 'name', 
21.             direction : 'ASC' 
22.     }],*/  
23.     autoLoad : {start : 0, limit : 5}   
24. });  

 store層也是自定義一個(gè)類(lèi)，繼承自Ext.data.Store，然后這里也是定義model，就是前面寫(xiě)的model層，model的賦值即前面寫(xiě)的model層的名稱(chēng)，然后最主要的是proxy，定義從后臺(tái)去取數(shù)據(jù)，然后加載到grid 中，proxy中url好說(shuō)，extraParams添加額外的參數(shù)傳到后臺(tái)，已json的形式讀取數(shù)據(jù)。store中的autoload屬性也需要賦值，代表程序什么時(shí)候像后臺(tái)發(fā)送請(qǐng)求加載數(shù)據(jù)，可以賦boolean/Object,默認(rèn)的是false，默認(rèn)不發(fā)送請(qǐng)求，但可以在程序中可以通過(guò)grid的getStore( )函數(shù)拿到store對(duì)象然后調(diào)用load函數(shù)，然后系統(tǒng)就會(huì)像后臺(tái)發(fā)送定義的proxy里的內(nèi)容并加載，若手動(dòng)設(shè)置為true，表示一開(kāi)始就請(qǐng)求數(shù)據(jù)。上面代碼賦值的是一個(gè)對(duì)象，用于分頁(yè)用的。

當(dāng)然，store也可以裝載已經(jīng)定義好的數(shù)據(jù)集，設(shè)置store的data屬性，里面存放對(duì)象數(shù)組，鍵值對(duì)與model相對(duì)應(yīng)，則表格自動(dòng)填充這些數(shù)據(jù)，如下：

Java代碼  

1. data : [  
2.         {code : 'OS1', name : '萬(wàn)俟輝夜1', period : 32},  
3.         {code : 'OS2', name : '萬(wàn)俟輝夜2', period : 48},  
4.         {code : 'OS3', name : '萬(wàn)俟輝夜3', period : 60},  
5.     ],  

最后就是view層的代碼實(shí)現(xiàn)了:

Java代碼  

1. Ext.define('eduSys.KnowledgeCourse.grid', {  
2.       
3.     extend : 'Ext.grid.Panel',  //繼承自Ext.grid.Panel  
4.     alias : 'widget.knowledgeCourseGrid',  //取別名knowledgeCourseGrid  
5.     title : '課程',  //表格標(biāo)題  
6.     frame : true,//窗口化，即讓界面變的飽滿(mǎn)  
7.     selType : 'cellmodel',//設(shè)置單元格選中方式，默認(rèn)為rowmodel，行選擇  
8.     enableKeyNav : true,//允許鍵盤(pán)操作，即上下左右移動(dòng)選中點(diǎn)  
9.     forceFit : true,//自動(dòng)填充，即讓所有列填充滿(mǎn)gird寬度  
10.     config : [  //預(yù)先配置  
11.         GridDoActionUtil = Ext.create('Ext.Util.GridDoActionUtil'),  //操作util類(lèi)，這里可不管  
12.         myStore = new eduSys.KnowledgeCourse.store()  //定義grid的store，即前面定義的store  
13.     ],  
14.     columns : [ //關(guān)鍵部分，定義每一列的屬性  
15.         {  
16.             text : '編號(hào)',                 //定義該列的標(biāo)題名稱(chēng)  
17.             dataIndex : 'code',     //對(duì)應(yīng)model中的列屬性  
18.             align : 'center',           //居中顯示  
19.             editor : {xtype : 'textfield'}   //定義該列可以編輯，編輯框形式  
20.         },   
21.         {  
22.             text : '名稱(chēng)',  
23.             dataIndex : 'name',  
24.             align : 'center'  
25.         },  
26.         {  
27.             text : '學(xué)時(shí)',  
28.             dataIndex : 'period',  
29.             align : 'center'  
30.         },  
31.         {                 //這一列大家看看就行了，是actioncolumn相關(guān)操作  
32.             xtype : 'actioncolumn',  
33.             align : 'center',  
34.             html : '<div style="margin-top: 4px;">詳情</div>',  
35.             items: [{  
36.                 icon : '../../images/view.png',  
37.                 handler:   
38.                     this.GridDoActionUtil.doDetail  
39.             }]  
40.         }  
41.     ],  
42.     tbar : [     //定義工具欄，上面可以存放各種組件  
43.         {  
44.             xtype : 'combobox',      //放一個(gè)combobox，用法以后再介紹  
45.             id : 'courseCombo',  
46.             store : new eduSys.Course.comboStore(),  
47.             queryMode : 'remot',  
48.             valueField : 'coursesGuid',  
49.             displayField : 'name',  
50.             editable : false  
51.         },  
52.         {xtype : 'button', text : '增加', iconCls : 'edu_add',     
53.             handler : function(btnObj) {  
54.                 //dosomething();      
55.             }  
56.         }, // 放一個(gè)button按鈕，定義它的樣式（iconCls），點(diǎn)擊響應(yīng)方式（handler）  
57.         {xtype : 'button', text : '刪除', iconCls : 'edu_remove',  
58.             handler :   
59.                 this.GridDoActionUtil.doRemove  
60.         }  
61.     ],  
62.     bbar : {    //定義底部工具欄  
63.         xtype : 'pagingtoolbar',   //分頁(yè)工具條  
64.         store : this.myStore,     //數(shù)據(jù)集跟grid的數(shù)據(jù)集一樣  
65.         displayInfo : true          //是否顯示數(shù)據(jù)集信息  
66.     },  
67.       
68.     selType : 'checkboxmodel',  //設(shè)置前面有多選框選項(xiàng)  
69.     multiSelect : true,    //可以多選  
70.     store : this.myStore        //定義grid的store，即前面寫(xiě)的store  
71. });  

view層的信息量就比較大了，所以基本信息都在代碼里添加注釋?zhuān)瑧?yīng)該看的還比較清楚，有的屬性有不同的配置，大家可以在官網(wǎng)api上查找該屬性，上面有詳細(xì)的解釋?zhuān)b于上面代碼已經(jīng)可以代表大部分的需求，這里就不在多說(shuō)。

好了，上面代碼基本上能實(shí)現(xiàn)大部分對(duì)于表格的要求了，另外gird還有其他增強(qiáng)功能，比如拖拽、分組等等，每一列還有很多其他的屬性進(jìn)行設(shè)置，比如常見(jiàn)的render（渲染）、format（格式化）等等，今天由于時(shí)間原因就不寫(xiě)了，以后要是有時(shí)間再寫(xiě)一篇gird的增強(qiáng)篇，在這里像大家致歉。

貼一下grid的增加、刪除、保存行的操作代碼，比較簡(jiǎn)單。

Java代碼  

1. doAdd : function(grid, modelObj) {  
2.         if(!(grid && modelObj)) {  
3.             Ext.Msg.alert('error','參數(shù)傳遞不正確!!!');  
4.             return;  
5.         }  
6.         var store = grid.getStore();  
7.         //得到目前表格的數(shù)據(jù)集合的長(zhǎng)度  
8.         var storeCount = store.getCount();  
9.         //得到編輯插件  
10.         var edit = grid.editingPlugin;  
11.         //得到數(shù)據(jù)模型  
12.         var model = store.model;  
13.           
14.         var eduObj = new model(modelObj);  
15.         store.insert(storeCount,eduObj);  
16.     },  
17.       
18.     doRemove : function(grid) {  
19.         var data = grid.getSelectionModel().getSelection();  
20.         if(data.length == 0) {  
21.             MsgTip.msg("提示","請(qǐng)選中項(xiàng)刪除!!!",true);  
22.         } else {  
23.             var st = grid.getStore();  
24.             Ext.Array.each(data, function(record) {  
25.                 st.remove(record);  
26.             });  
27.         }  
28.     },  
29.       
30.     doSave : function(grid) {  
31.         if(!grid) {  
32.             Ext.Msg.alert('參數(shù)傳遞不正確!!!');  
33.             return;   
34.         }  
35.         //得到數(shù)據(jù)集合  
36.         var store = grid.getStore();  
37.         //records 被你修改過(guò)的數(shù)據(jù)  
38.         var records = store.getUpdatedRecords();  
39.         var data = [];  
40.         Ext.Array.each(records, function(model) {  
41.             data.push(model.data);  
42.         });  
43.         if(data.length > 0) {  
44.             Ext.Ajax.request({     //ajax后臺(tái)傳輸數(shù)據(jù)  
45.                 url : '要傳的url',  
46.                 params : {data : "[" +data.join(',')+ "]"},  
47.                 method : 'POST',  
48.                 timeout : 4000,  
49.                 success : function(response,opts) {  
50.                     //dosomething();  
51.                     //取消小箭頭  
52.                     model.commit();   
53.                 }  
54.             });  
55.         }  
56.     },  

下面說(shuō)一下大家普遍遇到的grid保存中store.getUpdatedRecords();拿到數(shù)據(jù)為空的問(wèn)題，我也是在上面糾結(jié)了一段時(shí)間，覺(jué)得有必要在這把解決方案提出來(lái)。

grid的model層有一個(gè)屬性：idProperty ，默認(rèn)是id，這個(gè)屬性就是grid所有列的主屬性，相當(dāng)于數(shù)據(jù)庫(kù)中的主鍵定義，是不可缺少的，所以當(dāng)你的model中配置沒(méi)有id基本字段的時(shí)候，extjs內(nèi)部的函數(shù)如getUpdatedRecords();就拿不到行的句柄（就用大家都懂的句柄這個(gè)詞吧），所以取出來(lái)的值為空，解決方案就是配置idProperty為你定義的字段中一個(gè)，這樣就解決了。

可是，有的兄臺(tái)可能碰到跟我一樣的問(wèn)題，我的表格是可以新添加行的，用store的insert( Number index, Ext.data.Model[] records )函數(shù)添加新的一行，這個(gè)添加的model中每個(gè)屬性都是空，但是，idProperty也配置了，結(jié)果拿出來(lái)的東西還是為空，我就納悶了，怎么還是行不通，最后經(jīng)過(guò)慢慢對(duì)比調(diào)試，終于發(fā)現(xiàn)了根本問(wèn)題，在新增的一行中idProperty設(shè)置的屬性必須要賦值，就像主鍵不能為空一樣，經(jīng)過(guò)賦值后的model對(duì)象插入到gird中后再調(diào)用getUpdatedRecords(); 就沒(méi)有問(wèn)題了，能正常拿出更改的值。

最后說(shuō)一下grid的分頁(yè)組建的實(shí)現(xiàn)細(xì)節(jié)。

在store層的定義中就定義了pageSize表示每一頁(yè)的行數(shù)，autoLoad中定義一個(gè)對(duì)象（如上面store中的autoLoader），上面表示最開(kāi)始的起始位置和請(qǐng)求個(gè)數(shù)，這樣在往后臺(tái)請(qǐng)求的URL中就增加了兩個(gè)請(qǐng)求參數(shù)start和limit，按上面代碼就是添加了start=0&limit=5，這樣后臺(tái)就可以接受參數(shù)進(jìn)行處理，那么上一頁(yè)下一頁(yè)又是怎么處理的呢，在bbar中定義了分頁(yè)組建，當(dāng)點(diǎn)擊下一頁(yè)的按鈕時(shí)，extjs會(huì)自動(dòng)像后臺(tái)發(fā)送一個(gè)URL請(qǐng)求，與proxy是同一個(gè)url請(qǐng)求，同樣的會(huì)添加兩個(gè)請(qǐng)求參數(shù)start和limit，只是這時(shí)的start值就是當(dāng)前的值加上（下一頁(yè)）或者減去（上一頁(yè)）pageSize大小，在后臺(tái)進(jìn)行處理就行了。

最后的最后，本文如果寫(xiě)的有什么不足，希望大家與我交流，共同學(xué)習(xí)，共同進(jìn)步。。。。。。。。。