?表格

A、普通表格

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、SimpleStore、GroupingStore 等。

首先來(lái)看最簡(jiǎn)單的使用表格的代碼：

Ext.onReady(function(){

var data=[ [1, 'EasyJWeb', 'EasyJF','www.easyjf.com'],

[2, 'jfox', 'huihoo','www.huihoo.org'],

[3, 'jdon', 'jdon','www.jdon.com'],

[4, 'springside', 'springside','www.springside.org.cn'] ];

var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});

var grid = new Ext.grid.GridPanel({

renderTo:"hello",

title:"中國(guó)Java開源產(chǎn)品及團(tuán)隊(duì)",

height:150,

width:600,

columns:[{header:"項(xiàng)目名稱",dataIndex:"name"},

{header:"開發(fā)團(tuán)隊(duì)",dataIndex:"organization"},

{header:"網(wǎng)址",dataIndex:"homepage"}],

store:store,

autoExpandColumn:2

});

});

上面的代碼中，第一行”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 我們將在下一章中作專門介紹。第三行”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)容如下：

Ext.onReady(function(){

var data=[ [1, 'EasyJWeb', 'EasyJF','www.easyjf.com'],

[2, 'jfox', 'huihoo','www.huihoo.org'],

[3, 'jdon', 'jdon','www.jdon.com'],

[4, 'springside', 'springside','www.springside.org.cn'] ];

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:"開發(fā)團(tuán)隊(duì)",dataIndex:"organization",sortable:true},

{header:"網(wǎng)址",dataIndex:"homepage"}]);

var grid = new Ext.grid.GridPanel({

renderTo:"hello",

title:"中國(guó)Java開源產(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)目名稱”及”開發(fā)團(tuán)隊(duì)”列中我們添加了sortable 為true 的屬性，表示該列可以排序，執(zhí)行上面的代碼，我們可以得到一個(gè)支持按”項(xiàng)目名稱”或”開發(fā)團(tuán)隊(duì)”的表格

另外，每一列的數(shù)據(jù)渲染方式還可以自己定義，比如上面的表格中，我們希望用戶在表

格中點(diǎn)擊網(wǎng)址則直接打開這些開源團(tuán)隊(duì)的網(wǎng)站，也就是需要給網(wǎng)址這一列添加上超級(jí)連接。

下面的代碼實(shí)現(xiàn)這個(gè)功能：

function showUrl(value)

{

return ""+value+"";

}

Ext.onReady(function(){

var data=[ [1, 'EasyJWeb', 'EasyJF','www.easyjf.com'],

[2, 'jfox', 'huihoo','www.huihoo.org'],

[3, 'jdon', 'jdon','www.jdon.com'],

[4, 'springside', 'springside','www.springside.org.cn'] ];

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:"開發(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開源產(chǎn)品及團(tuán)隊(duì)",

height:200,

width:600,

cm:colM,

store:store,

autoExpandColumn:2

});

});

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

自定義的列渲染函數(shù)可以實(shí)現(xiàn)在單元格中顯示自己所需要的各種信息，只是的瀏覽器能處理的html 都可以。

除了二級(jí)數(shù)組以外，表格還能顯示其它格式的數(shù)據(jù)嗎？答案是肯定的，下面假如我們的表格數(shù)據(jù)data 定義成了下面的形式：

var data=[{id:1,

name:'EasyJWeb',

organization:'EasyJF',

homepage:'www.easyjf.com'},

{id:2,

name:'jfox',

organization:'huihoo',

homepage:'www.huihoo.org'},

{id:3,

name:'jdon',

organization:'jdon',

homepage:'www.jdon.com'},

{id:4,

name:'springside',

organization: 'springside',

homepage:'www.springside.org.cn'}

];

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

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:"開發(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開源產(chǎn)品及團(tuán)隊(duì)",

height:200,

width:600,

cm:colM,

store:store,

autoExpandColumn:2

});

當(dāng)然，表格同樣能顯示xml?格式的數(shù)據(jù)，假如上面的數(shù)據(jù)存放成hello.xml?文件中為了把這個(gè)xml?數(shù)據(jù)用ExtJS?的表格Grid?進(jìn)行顯示，我們只需要把store 部分的內(nèi)容調(diào)整成如下的內(nèi)容即可：

<?xml version="1.0" encoding="UTF-8"?>

<dataset>

<row>

<id>1</id>

<name>EasyJWeb</name>

<organization>EasyJF</organization>

<homepage>www.easyjf.com</homepage>

</row>

<row>

<id>2</id>

<name>jfox</name>

<organization>huihoo</organization>

<homepage>www.huihoo.org</homepage>

</row>

<row>

<id>3</id>

<name>jdon</name>

<organization>jdon</organization>

<homepage>www.jdon.com</homepage>

</row>

<row>

<id>4</id>

<name>springside</name>

<organization>springside</organization>

<homepage>www.springside.org.cn</homepage>

</row>

</dataset>

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:"項(xiàng)目名稱",dataIndex:"name",sortable:true},

{header:"開發(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開源產(chǎn)品及團(tuán)隊(duì)",

height:200,

width:600,

cm:colM,

store:store,

autoExpandColumn:2

});

store.load();

});

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

B、可編輯表格

是指可以直接在表格的單元格對(duì)表格的數(shù)據(jù)進(jìn)行編輯，ExtJS 中的可編輯表格由類Ext.grid.EditorGridPanel 表示，xtype 為editorgrid。使用EditorGridPanel 與使用普通的GridPanel 方式一樣，區(qū)別只是在定義列信息的時(shí)候，可以指定某一列使用的編輯即可，下面來(lái)看一個(gè)簡(jiǎn)單的示例。

Ext.onReady(function(){

var data=[{id:1,

name:'小王',

email:'xiaowang@easyjf.com',

sex:'男',

bornDate:'1991-4-4'},

{id:1,

name:'小李',

email:'xiaoli@easyjf.com',

sex:'男',

bornDate:'1992-5-6'},

{id:1,

name:'小蘭',

email:'xiaoxiao@easyjf.com',

sex:'女',

bornDate:'1993-3-7'}

];

var store=new Ext.data.JsonStore({

data:data,

fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}]

});

var colM=new Ext.grid.ColumnModel([{

header:"姓名",

dataIndex:"name",

sortable:true,

editor:new Ext.form.TextField()},

{header:"性別",

dataIndex:"sex"

},

{header:"出生日期",

dataIndex:"bornDate",

width:120,

renderer:Ext.util.Format.dateRenderer('Y年m月d日')},

{header:"電子郵件",

dataIndex:"email",

sortable:true,

editor:new Ext.form.TextField()}

]);

var grid = new Ext.grid.EditorGridPanel({

renderTo:"hello",

title:"學(xué)生基本信息管理",

height:200,

width:600,

cm:colM,

store:store,

autoExpandColumn:3

});

});

上面的程序首先定義了一個(gè)包含學(xué)生信息的對(duì)象數(shù)組，然后創(chuàng)建了一個(gè)JsonStore，在創(chuàng)建這個(gè)store 的時(shí)候，指定bornDate 列的類型為日期date 類型，并使用dateFormat 來(lái)指定日期信息的格式為"Y-n-j"，Y 代表年，n 代表月,j 代表日期。定義表格列模型的時(shí)候，對(duì)于”姓名” 及” 電子郵件” 列我們使用editor 來(lái)定義該列使用的編輯器， 這里是使用Ext.form.TextField，最后使用new Ext.grid.EditorGridPanel(…)來(lái)創(chuàng)建一個(gè)可編輯的表格。執(zhí)行上面的程序可以生成一個(gè)表格，雙擊表格中的”姓名”、或”電子郵件”單元格中的信息可以觸發(fā)單元格的編輯，可以在單元格的文本框中直接編輯表格中的內(nèi)容，修改過(guò)的單元格會(huì)有特殊的標(biāo)記，

為了能編輯”性別”及”出生日期”列，同樣只需要在定義該列的時(shí)候指定editor 即可。由于出生日期是日期類型，因此我們可以使用日期編輯器來(lái)編輯，”性別”一列的數(shù)據(jù)不應(yīng)該讓用戶直接輸入，而應(yīng)該是通過(guò)下拉框進(jìn)行選擇。日期編輯器可以直接使用Ext.form.DateField組件，下拉選擇框編輯器可以使用Ext.form.ComboBox?組件，下面是實(shí)現(xiàn)對(duì)性別及出生日期等列信息編輯的代碼：

var colM=new Ext.grid.ColumnModel([{

header:"姓名",

dataIndex:"name",

sortable:true,

editor:new Ext.form.TextField()},

{header:"性別",

dataIndex:"sex",

editor:new Ext.form.ComboBox({transform:"sexList",

triggerAction: 'all',

lazyRender:true})

},

{header:"出生日期",

dataIndex:"bornDate",

width:120,

renderer:Ext.util.Format.dateRenderer('Y年m月d日'),

editor:new Ext.form.DateField({format:'Y年m月d日'})},

{header:"電子郵件",

dataIndex:"email",

sortable:true,

editor:new Ext.form.TextField()}

]);

var grid = new Ext.grid.EditorGridPanel({

renderTo:"hello",

title:"學(xué)生基本信息管理",

height:200,

width:600,

cm:colM,

store:store,

autoExpandColumn:3,

clicksToEdit:1

});

注意在定義EditorGridPanel 的時(shí)候，我們?cè)黾恿艘粋€(gè)屬性”clicksToEdit:1”，表示點(diǎn)擊一次單元格即觸發(fā)編輯，因?yàn)槟J(rèn)情況下該值為2，需要雙擊單元格才能編輯。為了給ComboBox 中填充數(shù)據(jù)，我們使用設(shè)置了該組件的transform 配置屬性值為sexList，sexList是一個(gè)傳統(tǒng)的<select>框，我們需要在html 頁(yè)面中直接定義，代碼如下：

<select>

<option>男</option>

<option>女</option>

</select>

執(zhí)行上面的程序，我們可以得到一個(gè)能對(duì)表格中所有數(shù)據(jù)進(jìn)行編輯的表格了。點(diǎn)擊上面的”性別”一列的單元格時(shí)，會(huì)出現(xiàn)一個(gè)下拉選擇框，點(diǎn)擊”出生日期”一列的單元格時(shí)，會(huì)出現(xiàn)一個(gè)日期數(shù)據(jù)選擇框

那么如何保存編輯后的數(shù)據(jù)呢？答案是直接使用afteredit?事件。當(dāng)對(duì)一個(gè)單元格進(jìn)行編輯完之后，就會(huì)觸發(fā)afteredit?事件，可以通過(guò)該事件處理函數(shù)來(lái)處理單元格的信息編輯。當(dāng)我們編輯一個(gè)日志目錄的時(shí)候，需要把編輯后的數(shù)據(jù)保存到服務(wù)器，代碼如下：

this.grid.on("afteredit",this.afterEdit,this);

…

afterEdit:function(obj){

var r=obj.record;

var id=r.get("id");

var name=r.get("name");

var c=this.record2obj(r);

var tree=this.tree;

var node=tree.getSelectionModel().getSelectedNode();

if(node && node.id!="root")c.parentId=node.id;

if(id=="-1" && name!=""){

topicCategoryService.addTopicCategory(c,function(id){

if(id)r.set("id",id);

if(!node)node=tree.root;

node.appendChild(new Ext.tree.TreeNode({

id:id,

text:c.name,

leaf:true

}));

node.getUI().removeClass('x-tree-node-leaf');

node.getUI().addClass('x-tree-node-expanded');

node.expand();

});

}

else if(name!="")

{

topicCategoryService.updateTopicCategory(r.get("id"),c,function(ret){

if(ret)tree.getNodeById(r.get("id")).setText(c.name);

});

}

}

在實(shí)際的應(yīng)用中，表格中的數(shù)據(jù)一般都是直接存放在數(shù)據(jù)庫(kù)表或服務(wù)器的文件中。因此，在使用表格控件的時(shí)候經(jīng)常需要與服務(wù)器進(jìn)行交互。ExtJS 使用Ajax 方式提供了一套與服務(wù)器交互的機(jī)制，也就是可以不用刷新頁(yè)面，就可以訪問(wèn)服務(wù)器的程序進(jìn)行數(shù)據(jù)讀取或數(shù)據(jù)保存等操作。

var store=new Ext.data.Store({

url:"hello.xml",

reader:new Ext.data.XmlReader({

record:"row"},

["id","name","organization","homepage"])

});

因?yàn)?/b>Store?組件接受一個(gè)參數(shù)url，如果設(shè)置url，則ExtJS?會(huì)創(chuàng)建一個(gè)與服務(wù)器交互的Ext.data.HttpProxy?對(duì)象，該對(duì)象通過(guò)指定的Connection?或Ext.Ajax.request?來(lái)向服務(wù)端發(fā)送請(qǐng)求，從而可以讀取到服務(wù)器端的數(shù)據(jù)。

經(jīng)驗(yàn)表明，服務(wù)器端產(chǎn)生JSon 數(shù)據(jù)是一種非常不錯(cuò)的選擇，也就是說(shuō)假如服務(wù)器的

url”student.ejf?cmd=list”產(chǎn)生下面的JSON 數(shù)據(jù)輸出：

{results:[{id:1,

name:'小王',

email:'xiaowang@easyjf.com',

sex:'男',

bornDate:'1991-4-4'},

{id:1,

name:'小李',

email:'xiaoli@easyjf.com',

sex:'男',

bornDate:'1992-5-6'},

{id:1,

name:'小蘭',

email:'xiaoxiao@easyjf.com',

sex:'女',

bornDate:'1993-3-7'}

] }

則前面顯示學(xué)習(xí)信息編輯表格的store?可以創(chuàng)建成下面的形式：

var store=new Ext.data.Store({

url:"student.ejf?cmd=list",

reader:new Ext.data.JsonReader({

root:"result"},

["id","name","organization","homepage"])

});

或者：

var store=new Ext.data.JsonStore({

url:"student.ejf?cmd=list",

root:"result",

fields:["id","name","organization","homepage"]});

其中root 表示包含記錄集數(shù)據(jù)的屬性。

如果在運(yùn)行程序中需要給服務(wù)器端發(fā)送數(shù)據(jù)的時(shí)候，此時(shí)可以直接使用ExtJS 中提供的Ext.Ajax 對(duì)象的request 方法。比如下面的代碼實(shí)現(xiàn)放服務(wù)器的student.ejf?cmd=save 這個(gè)url發(fā)起一個(gè)請(qǐng)求，并在params 中指定發(fā)送的Student 對(duì)象：

var store=new Ext.data.JsonStore({

url:"student.ejf?cmd=list",

root:"result",

fields:["id","name","organization","homepage"]});

function sFn()

{

alert('保存成功');

}

function fFn()

{

alert('保存失敗');

}

Ext.Ajax.request({

url: 'student.ejf?cmd=save”

success: sFn

failure: fFn,

params: { name: '小李',email: ' xiaoli@easyjf.com',bornDate: ' 1992-5-6',sex: '男'}

});