EXTJS中的表格控件

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

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

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

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

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