ExtJS 2.0 GridPanel基本表格簡明教程

ExtJS中的表格功能非常強大，包括了排序、緩衝、拖動、隱藏某一列、自動顯示行號、列匯總、儲存格編輯等實用功能。
表格由類Ext.grid.GridPanel定義，繼承自Panel，其xtype為grid。ExtJS中，表格Grid必須包含列定義資訊，並指定表格的資料存放區器Store。表格的列資訊由類Ext.grid.ColumnModel定義、而表格的資料存放區器由Ext.data.Store定義，資料存放區器根據解析的資料不同分為JsonStore、SimpleStroe、GroupingStore等。
我們首先來看最簡單的使用表格的代碼： 複製代碼 代碼如下:Ext.onReady(function(){
var data=[ [1, 'EasyJWeb', 'EasyJF','www.baidu.com'],
[2, 'jfox', 'huihoo','www.jb51.net'],
[3, 'jdon', 'jdon','s.jb51.net'],
[4, 'springside', 'springside','tools.jb51.net'] ];
var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中國Java開源產品及團隊",
height:150,
width:600,
columns:[{header:"項目名稱",dataIndex:"name"},
{header:"Team Dev",dataIndex:"organization"},
{header:"網址",dataIndex:"homepage"}],
store:store,
autoExpandColumn:2
});
});

執行上面的代碼，可以得到一個簡單的表格，如所示：

上面的代碼中，第一行“var data=…”用來定義表格中要顯示的資料，這是一個[][]二維數組；第二行“var store=…”用來建立一個資料存放區，這是GridPanel需要使用配置屬性，資料存放區器Store負責把各種各樣的資料（如二維數組、JSon對象數組、xml文本）等轉換成ExtJS的資料記錄集Record，關於資料存放區器Store我們將在下一章中作專門介紹。第三行“var grid = new Ext.grid.GridPanel(…)”負責建立一個表格，表格包含的列由columns配置屬性來描述，columns是一數組，每一行資料元素描述表格的一列資訊，表格的列資訊包含列頭顯示文本(header)、列對應的記錄集欄位(dataIndex)、列是否可排序(sorable)、列的渲染函數(renderer)、寬度(width)、格式化資訊(format)等，在上面的列子中只用到了header及dataIndex。
下面我們看簡單看看錶格的排序及隱藏列特性，簡單修改一下上面的代碼，內容如下：

複製代碼 代碼如下:Ext.onReady(function(){
var data=[ [1, 'EasyJWeb', 'EasyJF','www.baidu.com'],
[2, 'jfox', 'huihoo','www.jb51.net'],
[3, 'jdon', 'jdon','s.jb51.net'],
[4, 'springside', 'springside','tools.jb51.net'] ];
var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});
var colM=new Ext.grid.ColumnModel([{header:"項目名稱",dataIndex:"name",sortable:true},
{header:"Team Dev",dataIndex:"organization",sortable:true},
{header:"網址",dataIndex:"homepage"}]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中國Java開源產品及團隊",
height:200,
width:600,
cm:colM,
store:store,
autoExpandColumn:2
});
});

直接使用new Ext.grid.ColumnModel來建立表格的列信定義資訊，在“項目名稱“及“Team Dev”列中我們添加了sortable為true的屬性，表示該列可以排序，執行上面的代碼，我們可以得到一個支援按“項目名稱“或“Team Dev”的表格，xxx所示。

(按項目名稱排序)

(可排序的列表頭後面小按鈕可以彈出操作菜單)

(可以指定隱藏哪些列)
另外，每一列的資料渲染方式還可以自己定義，比如上面的表格中，我們希望使用者在表格中點擊網址則直接開啟這些開源團隊的網站，也就是需要給網址這一列添加上超級串連。下面的代碼實現這個功能：

複製代碼 代碼如下:function showUrl(value)
{
return ""+value+"";
}
Ext.onReady(function(){
var data=[ [1, 'EasyJWeb', 'EasyJF','www.baidu.com'],
[2, 'jfox', 'huihoo','www.jb51.net'],
[3, 'jdon', 'jdon','s.jb51.net'],
[4, 'springside', 'springside','tools.jb51.net'] ];
var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});
var colM=new Ext.grid.ColumnModel([{header:"項目名稱",dataIndex:"name",sortable:true},
{header:"Team Dev",dataIndex:"organization",sortable:true},
{header:"網址",dataIndex:"homepage",renderer:showUrl}]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中國Java開源產品及團隊",
height:200,
width:600,
cm:colM,
store:store,
autoExpandColumn:2
});
});
[html]

上面的代碼跟前面的樣本差別不大，只是在定義“網址”列的時候多了一個renderer屬性，即{header:"網址",dataIndex:"homepage",renderer:showUrl}。showUrl是一個自訂的函數，內容就是根據傳入的value參數返回一個包含<a>標籤的html片段。運行上面的代碼顯示結果如所示：

自訂的列渲染函數可以實現在儲存格中顯示自己所需要的各種資訊，只是的瀏覽器能處理的html都可以。
除了二級數組以外，表格還能顯示其它格式的資料嗎？答案是肯定的，下面假如我們的表格式資料data定義成了下面的形式：

[code]
var data=[{id:1,
name:'EasyJWeb',
organization:'EasyJF',
homepage:'www.baidu.com'},
{id:2,
name:'jfox',
organization:'huihoo',
homepage:'www.jb51.net'},
{id:3,
name:'jdon',
organization:'jdon',
homepage:'s.jb51.net'},
{id:4,
name:'springside',
organization: 'springside',
homepage:'tools.jb51.net'}
];

也就是說資料變成了一維數組，數組中的每一個元素是一個對象，這些對象包含name、organization、homepage、id等屬性。要讓表格顯示上面的資料，其實非常簡單，只需要把store改成用Ext.data.JsonStore即可，代碼如下：

複製代碼 代碼如下:var store=new Ext.data.JsonStore({data:data,fields:["id","name","organization","homepage"]});
var colM=new Ext.grid.ColumnModel([{header:"項目名稱",dataIndex:"name",sortable:true},
{header:"Team Dev",dataIndex:"organization",sortable:true},
{header:"網址",dataIndex:"homepage",renderer:showUrl}]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中國Java開源產品及團隊",
height:200,
width:600,
cm:colM,
store:store,
autoExpandColumn:2
});

上面的代碼得到的結果與前面的一樣。當然，表格同樣能顯示xml格式的資料，假如上面的資料存放成hello.xml檔案中，內容如下： 複製代碼 代碼如下:<?xml version="1.0" encoding="UTF-8"?><dataset> <row> <id>1</id> <name>EasyJWeb</name> <organization>EasyJF</organization> <homepage>www.baidu.com</homepage> </row> <row> <id>2</id> <name>jfox</name> <organization>huihoo</organization> <homepage>www.jb51.net</homepage> </row> <row> <id>3</id> <name>jdon</name> <organization>jdon</organization> <homepage>s.jb51.net</homepage> </row> <row> <id>4</id> <name>springside</name> <organization>springside</organization> <homepage>tools.jb51.net</homepage> </row> </dataset>

為了把這個xml資料用ExtJS的表格Grid進行顯示，我們只需要把store部分的內容調整成如下的內容即可： 複製代碼 代碼如下:

var store=new Ext.data.Store({
url:"hello.xml",
reader:new Ext.data.XmlReader({
record:"row"},
["id","name","organization","homepage"])
});

其它的部分不用改變，完整的代碼如下：

複製代碼 代碼如下:function showUrl(value)
{
return "<a href='http://"+value+"' target='_blank'>"+value+"</a>";
}
Ext.onReady(function(){
var store=new Ext.data.Store({
url:"hello.xml",
reader:new Ext.data.XmlReader({
record:"row"},
["id","name","organization","homepage"])
});
var colM=new Ext.grid.ColumnModel([{header:"項目名稱",dataIndex:"name",sortable:true},
{header:"Team Dev",dataIndex:"organization",sortable:true},
{header:"網址",dataIndex:"homepage",renderer:showUrl}]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中國Java開源產品及團隊",
height:200,
width:600,
cm:colM,
store:store,
autoExpandColumn:2
});
store.load();
});

store.laod()是用來載入資料，執行上面的代碼產生的表格與前面的完全一樣。