快捷導(dǎo)航

ExtJS 2.0 GridPanel基本表格簡(jiǎn)明教程

更新時(shí)間：2010年05月25日 20:50:54 作者：

ExtJS中的表格功能非常強(qiáng)大，包括了排序、緩存、拖動(dòng)、隱藏某一列、自動(dòng)顯示行號(hào)、列匯總、單元格編輯等實(shí)用功能。

ExtJS中的表格功能非常強(qiáng)大，包括了排序、緩存、拖動(dòng)、隱藏某一列、自動(dòng)顯示行號(hào)、列匯總、單元格編輯等實(shí)用功能。
表格由類Ext.grid.GridPanel定義，繼承自Panel，其xtype為grid。ExtJS中，表格Grid必須包含列定義信息，并指定表格的數(shù)據(jù)存儲(chǔ)器Store。表格的列信息由類Ext.grid.ColumnModel定義、而表格的數(shù)據(jù)存儲(chǔ)器由Ext.data.Store定義，數(shù)據(jù)存儲(chǔ)器根據(jù)解析的數(shù)據(jù)不同分為JsonStore、SimpleStroe、GroupingStore等。
我們首先來(lái)看最簡(jiǎn)單的使用表格的代碼：

復(fù)制代碼代碼如下:

 
Ext.onReady(function(){ 
var data=[ [1, 'EasyJWeb', 'EasyJF','www.baidu.com'], 
[2, 'jfox', 'huihoo','chabaoo.cn'], 
[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:"中國(guó)Java開(kāi)源產(chǎn)品及團(tuán)隊(duì)", 
height:150, 
width:600, 
columns:[{header:"項(xiàng)目名稱",dataIndex:"name"}, 
{header:"開(kāi)發(fā)團(tuán)隊(duì)",dataIndex:"organization"}, 
{header:"網(wǎng)址",dataIndex:"homepage"}], 
store:store, 
autoExpandColumn:2 
}); 
}); 

執(zhí)行上面的代碼，可以得到一個(gè)簡(jiǎn)單的表格，如下圖所示：

上面的代碼中，第一行“var data=…”用來(lái)定義表格中要顯示的數(shù)據(jù)，這是一個(gè)[][]二維數(shù)組；第二行“var store=…”用來(lái)創(chuàng)建一個(gè)數(shù)據(jù)存儲(chǔ)，這是GridPanel需要使用配置屬性，數(shù)據(jù)存儲(chǔ)器Store負(fù)責(zé)把各種各樣的數(shù)據(jù)（如二維數(shù)組、JSon對(duì)象數(shù)組、xml文本）等轉(zhuǎn)換成ExtJS的數(shù)據(jù)記錄集Record，關(guān)于數(shù)據(jù)存儲(chǔ)器Store我們將在下一章中作專門(mén)介紹。第三行“var grid = new Ext.grid.GridPanel(…)”負(fù)責(zé)創(chuàng)建一個(gè)表格，表格包含的列由columns配置屬性來(lái)描述，columns是一數(shù)組，每一行數(shù)據(jù)元素描述表格的一列信息，表格的列信息包含列頭顯示文本(header)、列對(duì)應(yīng)的記錄集字段(dataIndex)、列是否可排序(sorable)、列的渲染函數(shù)(renderer)、寬度(width)、格式化信息(format)等，在上面的列子中只用到了header及dataIndex。
下面我們看簡(jiǎn)單看看表格的排序及隱藏列特性，簡(jiǎn)單修改一下上面的代碼，內(nèi)容如下：

復(fù)制代碼代碼如下:

 
Ext.onReady(function(){ 
var data=[ [1, 'EasyJWeb', 'EasyJF','www.baidu.com'], 
[2, 'jfox', 'huihoo','chabaoo.cn'], 
[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:"項(xiàng)目名稱",dataIndex:"name",sortable:true}, 
{header:"開(kāi)發(fā)團(tuán)隊(duì)",dataIndex:"organization",sortable:true}, 
{header:"網(wǎng)址",dataIndex:"homepage"}]); 
var grid = new Ext.grid.GridPanel({ 
renderTo:"hello", 
title:"中國(guó)Java開(kāi)源產(chǎn)品及團(tuán)隊(duì)", 
height:200, 
width:600, 
cm:colM, 
store:store, 
autoExpandColumn:2 
}); 
}); 

直接使用new Ext.grid.ColumnModel來(lái)創(chuàng)建表格的列信定義信息，在“項(xiàng)目名稱“及“開(kāi)發(fā)團(tuán)隊(duì)”列中我們添加了sortable為true的屬性，表示該列可以排序，執(zhí)行上面的代碼，我們可以得到一個(gè)支持按“項(xiàng)目名稱“或“開(kāi)發(fā)團(tuán)隊(duì)”的表格，如圖xxx所示。

(按項(xiàng)目名稱排序)

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

(可以指定隱藏哪些列)
另外，每一列的數(shù)據(jù)渲染方式還可以自己定義，比如上面的表格中，我們希望用戶在表格中點(diǎn)擊網(wǎng)址則直接打開(kāi)這些開(kāi)源團(tuán)隊(duì)的網(wǎng)站，也就是需要給網(wǎng)址這一列添加上超級(jí)連接。下面的代碼實(shí)現(xiàn)這個(gè)功能：

復(fù)制代碼代碼如下:

自定義的列渲染函數(shù)可以實(shí)現(xiàn)在單元格中顯示自己所需要的各種信息，只是的瀏覽器能處理的html都可以。
除了二級(jí)數(shù)組以外，表格還能顯示其它格式的數(shù)據(jù)嗎？答案是肯定的，下面假如我們的表格數(shù)據(jù)data定義成了下面的形式：

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

也就是說(shuō)數(shù)據(jù)變成了一維數(shù)組，數(shù)組中的每一個(gè)元素是一個(gè)對(duì)象，這些對(duì)象包含name、organization、homepage、id等屬性。要讓表格顯示上面的數(shù)據(jù)，其實(shí)非常簡(jiǎn)單，只需要把store改成用Ext.data.JsonStore即可，代碼如下：

復(fù)制代碼代碼如下:

 
var store=new Ext.data.JsonStore({data:data,fields:["id","name","organization","homepage"]}); 
var colM=new Ext.grid.ColumnModel([{header:"項(xiàng)目名稱",dataIndex:"name",sortable:true}, 
{header:"開(kāi)發(fā)團(tuán)隊(duì)",dataIndex:"organization",sortable:true}, 
{header:"網(wǎng)址",dataIndex:"homepage",renderer:showUrl}]); 
var grid = new Ext.grid.GridPanel({ 
renderTo:"hello", 
title:"中國(guó)Java開(kāi)源產(chǎn)品及團(tuán)隊(duì)", 
height:200, 
width:600, 
cm:colM, 
store:store, 
autoExpandColumn:2 
}); 

上面的代碼得到的結(jié)果與前面的一樣。當(dāng)然，表格同樣能顯示xml格式的數(shù)據(jù)，假如上面的數(shù)據(jù)存放成hello.xml文件中，內(nèi)容如下：

復(fù)制代碼代碼如下:

 
<?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>chabaoo.cn</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> 

為了把這個(gè)xml數(shù)據(jù)用ExtJS的表格Grid進(jìn)行顯示，我們只需要把store部分的內(nèi)容調(diào)整成如下的內(nèi)容即可：

復(fù)制代碼代碼如下:

 

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

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

復(fù)制代碼代碼如下:

 
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:"項(xiàng)目名稱",dataIndex:"name",sortable:true}, 
{header:"開(kāi)發(fā)團(tuán)隊(duì)",dataIndex:"organization",sortable:true}, 
{header:"網(wǎng)址",dataIndex:"homepage",renderer:showUrl}]); 
var grid = new Ext.grid.GridPanel({ 
renderTo:"hello", 
title:"中國(guó)Java開(kāi)源產(chǎn)品及團(tuán)隊(duì)", 
height:200, 
width:600, 
cm:colM, 
store:store, 
autoExpandColumn:2 
}); 
store.load(); 
}); 