EXTJS中的表格控件

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

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

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

以及動態的修改提交等功能：

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