網(wǎng)絡(luò)編程語(yǔ)言中，除了.net其他的基本沒(méi)有提供網(wǎng)格控件，而近的asp.net mvc也不倡議使用傳統(tǒng)的服務(wù)器控件，綁定數(shù)據(jù)需要自己拼表格，所以兼容各種語(yǔ)言的表格控件就變得流行起來(lái)。
本章我們主要學(xué)習(xí)：
如何定義一個(gè)網(wǎng)格控件；
如何綁定網(wǎng)格控件；
一、Ext的表格控件是什么？
同樣先來(lái)看看幾個(gè)效果：

這個(gè)是基本的表格，Ext中的表格基本的功能就是按列排序，按列篩選，定制列等。當(dāng)然還有一些特有的功能：

可以對(duì)每行數(shù)據(jù)進(jìn)行收縮，也可以點(diǎn)擊右上角小三角收縮整個(gè)表格控件。
還可以很方便的進(jìn)行分頁(yè)操作：

以及動(dòng)態(tài)的修改提交等功能：

二、Ext如何構(gòu)造網(wǎng)格？
表格控件其實(shí)也就是幫我們完成了數(shù)據(jù)的填充工作而已，具體的數(shù)據(jù)源、要顯示的列，列的定制、數(shù)據(jù)源中的哪條數(shù)據(jù)顯示在哪個(gè)列中等屬性還是需要我們自己手動(dòng)配置的，所以我們分下面幾步來(lái)完成網(wǎng)格控件的數(shù)據(jù)綁定：
1、定義表格：定義一個(gè)表格比較簡(jiǎn)單，只需要new幾個(gè)列即可，帶上列的名稱和要綁定的數(shù)據(jù)，定義列代碼如：
var cm = new Ext.grid.ColumnModel([ { header: '編號(hào)', dataIndex: 'id' }, { header: '性別', dataIndex: 'sex' }, { header: '名稱', dataIndex: 'name' }, { header: '描述', dataIndex: 'desc' } ]);
 
用header指定列名，用dataIndex指定數(shù)據(jù)源，也就是字段名。這樣一個(gè)基本的表格就定義好了。
2、創(chuàng)建數(shù)據(jù)源：
一般數(shù)據(jù)源都是以集合的形式存在，這里使用一個(gè)2維數(shù)組來(lái)實(shí)現(xiàn)：
var data = [ ['1', '男', '張三豐', '是個(gè)作家'], ['2', '男', '石曼迪', '會(huì)武功'], ['3', '男', '姜子牙', '能捉鬼'], ['4', '女', '穆桂英', '好像是皇帝'], ['5', '男', '孫悟空', '高級(jí)程序員'] ];
 
如果熟悉JS或者PHP的話，對(duì)這段代碼就不陌生，定義一個(gè)數(shù)組，這個(gè)數(shù)組的每一個(gè)位置又存儲(chǔ)了一個(gè)數(shù)組。用他來(lái)作為靜態(tài)數(shù)據(jù)源。
3、解析數(shù)據(jù)源：
表格創(chuàng)建完畢，數(shù)據(jù)源也定義完畢，接下來(lái)就需要?jiǎng)?chuàng)建他們之間的關(guān)系，即配置分組數(shù)據(jù)集，使用的是創(chuàng)建一個(gè)Ext.data.Store對(duì)象，通過(guò)它我們可以把任何格式的數(shù)據(jù)轉(zhuǎn)化成grid可以使用的形式。其中需要告訴他的參數(shù)比較多，先看代碼，后面解釋：
var ds = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ { name: 'id' }, { name: 'sex' }, { name: 'name' }, { name: 'desc' } ]) }); ds.load();
 
proxy：的含義是告訴表格從哪里取數(shù)據(jù)，可選的方式有HttpProxy、DataProxy、MemoryProxy或ScriptTagProxy。本例我們告訴他從內(nèi)存中取數(shù)據(jù)，數(shù)據(jù)來(lái)自名字叫data的數(shù)組。
reader：reader告訴我們?nèi)绾谓馕鲞@個(gè)數(shù)據(jù)，他可選的方式有Ext.data.ArrayReader，Ext.data.JsonReader。本例使用的是Ext.data.ArrayReader，第一個(gè)參數(shù)是id (可選項(xiàng)) 下面的行數(shù)組內(nèi)提供了該記錄的id（不明白什么意思，試驗(yàn)是有沒(méi)有都一樣），后面參數(shù)含義就很明確了，就是剛才創(chuàng)建表格時(shí)定義的字段名，他的特點(diǎn)是讀取數(shù)據(jù)比較簡(jiǎn)單，但是有個(gè)缺點(diǎn)就是不支持分頁(yè)。
后千萬(wàn)別忘了初始化數(shù)據(jù)操作調(diào)用Store對(duì)象的load方法。
4、裝配表格
表格的列模型定義好了，原始數(shù)據(jù)和數(shù)據(jù)的轉(zhuǎn)換都做好了，剩下的只需要裝配在一起，我們的grid就出來(lái)了，先上代碼，再研究：
var grid = new Ext.grid.GridPanel({ el: 'grid', ds: ds, cm: cm, height:200, width:500 }); grid.render();
 
其實(shí)就是實(shí)例化一個(gè)表格面板控件，用來(lái)裝表格。第一個(gè)參數(shù)是指定在哪里顯示，總得在頁(yè)面的某個(gè)部分或位置顯示出來(lái)，Ext提供了控制div的做法，由于div很靈活，現(xiàn)在網(wǎng)頁(yè)布局多采用他，所以需要在哪里顯示出來(lái)，只需要把相應(yīng)的div的id指定給他即可。下面2個(gè)參數(shù)很明白，就是我要裝載的數(shù)據(jù)源叫什么，我裝載到哪里去等等的。后也別忘了調(diào)用grid.render()方法，讓grid開(kāi)始渲染，就是畫(huà)界面等等的，這樣才能顯示出來(lái)。
好了，到此為止一個(gè)簡(jiǎn)單的表格控件就完成了，我們來(lái)看看完整代碼：
<script type="text/javascript"> function GridBasic() { //1. 定義表格 var cm = new Ext.grid.ColumnModel([ { header: '編號(hào)', dataIndex: 'id' }, { header: '性別', dataIndex: 'sex' }, { header: '名稱', dataIndex: 'name' }, { header: '描述', dataIndex: 'desc' } ]); //2. 創(chuàng)建數(shù)據(jù)源 var data = [ ['1', '男', '張三豐', '是個(gè)作家'], ['2', '男', '石曼迪', '會(huì)武功'], ['3', '男', '姜子牙', '能捉鬼'], ['4', '女', '穆桂英', '好像是皇帝'], ['5', '男', '孫悟空', '高級(jí)程序員'] ]; //3. 解析數(shù)據(jù)源 var ds = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ { name: 'id' }, { name: 'sex' }, { name: 'name' }, { name: 'desc' } ]) }); ds.load(); //4. 裝配表格 var grid = new Ext.grid.GridPanel({ el: 'grid', ds: ds, cm: cm, height:200, width:500 }); grid.render(); } Ext.onReady(GridBasic); //開(kāi)始執(zhí)行 </script>
 
現(xiàn)在我們自己親手做的Ext表格控件已經(jīng)完美的展示在我們眼前，但是仔細(xì)一看之后發(fā)現(xiàn)，剛才說(shuō)的排序功能并不能點(diǎn)，怎么辦？
很簡(jiǎn)單：在定義表格的時(shí)候后面帶上一個(gè)屬性sortable:true即可，即：
{ header: '編號(hào)', dataIndex: 'id', sortable: true },
 
哪列需要就給那列加上即可。