ExtJS2.0GridPanel基本表格簡明教程_extjs

ExtJS中的表格功能非常強大，包括了排序、緩存、拖動、隱藏某一列、自動顯示行號、列匯總、單元格編輯等實用功能。
表格由類Ext.grid.GridPanel定義，繼承自Panel，其xtype為grid。ExtJS中，表格Grid必須包含列定義信息，并指定表格的數(shù)據(jù)存儲器Store。表格的列信息由類Ext.grid.ColumnModel定義、而表格的數(shù)據(jù)存儲器由Ext.data.Store定義，數(shù)據(jù)存儲器根據(jù)解析的數(shù)據(jù)不同分為JsonStore、SimpleStroe、GroupingStore等。
我們首先來看最簡單的使用表格的代碼：
代碼如下:
Ext.onReady(function(){
var data=[ [1, 'EasyJWeb', 'EasyJF','www.baidu.com'],
[2, 'jfox', 'huihoo','www.gxlcms.com'],
[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開源產(chǎn)品及團隊",
height:150,
width:600,
columns:[{header:"項目名稱",dataIndex:"name"},
{header:"開發(fā)團隊",dataIndex:"organization"},
{header:"網(wǎng)址",dataIndex:"homepage"}],
store:store,
autoExpandColumn:2
});
});

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

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

代碼如下:
Ext.onReady(function(){
var data=[ [1, 'EasyJWeb', 'EasyJF','www.baidu.com'],
[2, 'jfox', 'huihoo','www.gxlcms.com'],
[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:"開發(fā)團隊",dataIndex:"organization",sortable:true},
{header:"網(wǎng)址",dataIndex:"homepage"}]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中國Java開源產(chǎn)品及團隊",
height:200,
width:600,
cm:colM,
store:store,
autoExpandColumn:2
});
});

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

(按項目名稱排序)

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

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

代碼如下:
function showUrl(value)
{
return ""+value+"";
}
Ext.onReady(function(){
var data=[ [1, 'EasyJWeb', 'EasyJF','www.baidu.com'],
[2, 'jfox', 'huihoo','www.gxlcms.com'],
[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:"開發(fā)團隊",dataIndex:"organization",sortable:true},
{header:"網(wǎng)址",dataIndex:"homepage",renderer:showUrl}]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中國Java開源產(chǎn)品及團隊",
height:200,
width:600,
cm:colM,
store:store,
autoExpandColumn:2
});
});
[html]

上面的代碼跟前面的示例差別不大，只是在定義“網(wǎng)址”列的時候多了一個renderer屬性，即{header:"網(wǎng)址",dataIndex:"homepage",renderer:showUrl}。showUrl是一個自定義的函數(shù)，內(nèi)容就是根據(jù)傳入的value參數(shù)返回一個包含標(biāo)簽的html片段。運行上面的代碼顯示結(jié)果如下圖所示：

自定義的列渲染函數(shù)可以實現(xiàn)在單元格中顯示自己所需要的各種信息，只是的瀏覽器能處理的html都可以。
除了二級數(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:'www.gxlcms.com'},
{id:3,
name:'jdon',
organization:'jdon',
homepage:'s.jb51.net'},
{id:4,
name:'springside',
organization: 'springside',
homepage:'tools.jb51.net'}
];

也就是說數(shù)據(jù)變成了一維數(shù)組，數(shù)組中的每一個元素是一個對象，這些對象包含name、organization、homepage、id等屬性。要讓表格顯示上面的數(shù)據(jù)，其實非常簡單，只需要把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:"開發(fā)團隊",dataIndex:"organization",sortable:true},
{header:"網(wǎng)址",dataIndex:"homepage",renderer:showUrl}]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中國Java開源產(chǎn)品及團隊",
height:200,
width:600,
cm:colM,
store:store,
autoExpandColumn:2
});

上面的代碼得到的結(jié)果與前面的一樣。當(dāng)然，表格同樣能顯示xml格式的數(shù)據(jù)，假如上面的數(shù)據(jù)存放成hello.xml文件中，內(nèi)容如下：
代碼如下:
1 EasyJWeb EasyJF www.baidu.com 2 jfox huihoo www.gxlcms.com 3 jdon jdon s.jb51.net 4 springside springside tools.jb51.net

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

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

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

代碼如下:
function showUrl(value)
{
return ""+value+"";
}
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:"開發(fā)團隊",dataIndex:"organization",sortable:true},
{header:"網(wǎng)址",dataIndex:"homepage",renderer:showUrl}]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中國Java開源產(chǎn)品及團隊",
height:200,
width:600,
cm:colM,
store:store,
autoExpandColumn:2
});
store.load();
});

store.laod()是用來加載數(shù)據(jù)，執(zhí)行上面的代碼產(chǎn)生的表格與前面的完全一樣。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com