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.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:"中国Java开源产品及团队",
height:150,
600,
columns:[{header:"项目名称",dataIndex:"name"},
{header:"开发团队",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.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:"项目名称",dataIndex:"name",sortable:true},
{header:"开发团队",dataIndex:"organization",sortable:true},
{header:"网址",dataIndex:"homepage"}]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中国Java开源产品及团队",
height:200,
600,
cm:colM,
store:store,
autoExpandColumn:2
});
});
直接使用new Ext.grid.ColumnModel来创建表格的列信定义信息，在“项目名称“及“开发团队”列中我们添加了sortable为true的属性，表 示该列可以排序，执行上面的代码，我们可以得到一个支持按“项目名称“或“开发团队”的表格，如图xxx所示。
(按项目名称排序)
(可排序的列表头后面小按钮可以弹出操作菜单)
(可以指定隐藏哪些列)
另外，每一列的数据渲染方式还可以自己定义，比如上面的表格中，我们希望用户在表格中点击网址则直接打开这些开源团队的网站，也就是需要给网址这一列添加上超级连接。下面的代码实现这个功能：
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:"项目名称",dataIndex:"name",sortable:true},
{header:"开发团队",dataIndex:"organization",sortable:true},
{header:"网址",dataIndex:"homepage",renderer:showUrl}]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中国Java开源产品及团队",
height:200,
600,
cm:colM,
store:store,
autoExpandColumn:2
});
});
上面的代码跟前面的示例差别不大，只是在定义“网址”列的时候多了一个renderer属性，即{header:"网址",dataIndex: "homepage",renderer:showUrl}。showUrl是一个自定义的函数，内容就是根据传入的value参数返回一个包含标签的html片段。运行上面的代码显示结果如下图所示："+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:"开发团队",dataIndex:"organization",sortable:true}, {header:"网址",dataIndex:"homepage",renderer:showUrl}]); var grid = new Ext.grid.GridPanel({ renderTo:"hello", title:"中国Java开源产品及团队", height:200, 600, cm:colM, store:store, autoExpandColumn:2 }); store.load(); });
自定义的列渲染函数可以实现在单元格中显示自己所需要的各种信息，只是的浏览器能处理的html都可以。
除了二级数组以外，表格还能显示其它格式的数据吗？答案是肯定的，下面假如我们的表格数据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'}
];
也就是说数据变成了一维数组，数组中的每一个元素是一个对象，这些对象包含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:"开发团队",dataIndex:"organization",sortable:true},
{header:"网址",dataIndex:"homepage",renderer:showUrl}]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中国Java开源产品及团队",
height:200,
600,
cm:colM,
store:store,
autoExpandColumn:2
});
上面的代码得到的结果与前面的一样。当然，表格同样能显示xml格式的数据，假如上面的数据存放成hello.xml文件中，内容如下：
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
为了把这个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 ""+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:"开发团队",dataIndex:"organization",sortable:true},
{header:"网址",dataIndex:"homepage",renderer:showUrl}]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"中国Java开源产品及团队",
height:200,
600,
cm:colM,
store:store,
autoExpandColumn:2
});
store.load();
});
store.laod()是用来加载数据，执行上面的代码产生的表格与前面的完全一样。
可编辑表格EditorGridPanel可编辑表格是指可以直接在表格的单元格对表格的数据进行编辑，ExtJS中的可编辑表格由类Ext.grid.EditorGridPanel表示， xtype为editorgrid。使用EditorGridPanel与使用普通的GridPanel方式一样，区别只是在定义列信息的时候，可以指定 某一列使用的编辑即可，下面来看一个简单的示例。
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",
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:"学生基本信息管理",
height:200,
600,
cm:colM,
store:store,
autoExpandColumn:3
});
});
上面的程序首先定义了一个包含学生信息的对象数组，然后创建了一个JsonStore，在创建这个store的时候，指定bornDate列的类型为日期 date类型，并使用dateFormat来指定日期信息的格式为"Y-n-j"，Y代表年，n代表月,j代表日期。定义表格列模型的时候，对于“姓名” 及“电子邮件”列我们使用editor来定义该列使用的编辑器，这里是使用Ext.form.TextField，最后使用new Ext.grid.EditorGridPanel(…)来创建一个可编辑的表格。执行上面的程序可以生成一个表格，双击表格中的“姓名”、或“电子邮 件”单元格中的信息可以触发单元格的编辑，可以在单元格的文本框中直接编辑表格中的内容，修改过的单元格会有特殊的标记，如下图所示：
为了能编辑“性别”及“出生日期”列，同样只需要在定义该列的时候指定editor即可。由于出生日期是日期类型，因此我们可以使用日期编辑器来编辑， “性别”一列的数据不应该让用户直接输入，而应该是通过下拉框进行选择。日期编辑器可以直接使用Ext.form.DateField组件，下拉选择框编 辑器可以使用Ext.form.ComboBox组件，下面是实现对性别及出生日期等列信息编辑的代码：
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",
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:"学生基本信息管理",
height:200,
600,
cm:colM,
store:store,
autoExpandColumn:3,
clicksToEdit:1
});
注意在定义EditorGridPanel的时候，我们增加了一个属性“clicksToEdit:1”，表示点击一次单元格即触发编辑，因为默认情况下 该值为2，需要双击单元格才能编辑。为了给ComboBox中填充数据，我们使用设置了该组件的transform配置属性值为sexList， sexList是一个传统的 男 女
执行上面的程序，我们可以得到一个能对表格中所有数据进行编辑的表格了。点击上面的“性别”一列的单元格时，会出现一个下拉选择框，点击“出生日期”一列的单元格时，会出现一个日期数据选择框，如图xxxx所示：
(编辑性别列中的数据)
(编辑出生日期列中的数据)
那么如何保存编辑后的数据呢？答案是直接使用afteredit事件。当对一个单元格进行编辑完之后，就会触发afteredit事件，可以通过该事件处理函数来处理单元格的信息编辑。比如在http://wlr.easyjf.com/这个单用户blog示例中，当我们编辑一个日志目录的时候，需要把编辑后的数据保存到服务器，代码如下：
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);
});
}
}
与服务器交互
在实际的应用中，表格中的数据一般都是直接存放在数据库表或服务器的文件中。因此，在使用表格控件的时候经常需要与服务器进行交互。ExtJS使用 Ajax方式提供了一套与服务器交互的机制，也就是可以不用刷新页面，就可以访问服务器的程序进行数据读取或数据保存等操作。
比如前面在表格中显示xml文档中数据的例子中，就是一个非常简单的从服务器端读取数据的例子，再回顾一下代码：
var store=new Ext.data.Store({
url:"hello.xml",
reader:new Ext.data.XmlReader({
record:"row"},
["id","name","organization","homepage"])
});
因为Sote组件接受一个参数url，如果设置url，则ExtJS会创建一个与服务器交互的Ext.data.HttpProxy对象，该对象通过指定 的Connection或Ext.Ajax.request来向服务端发送请求，从而可以读取到服务器端的数据。
经验表明，服务器端产生JSon数据是一种非常不错的选择，也就是说假如服务器的url“student.ejf?cmd=list”产生下面的JSON数据输出：
{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'}
]
}
则前面显示学习信息编辑表格的store可以创建成下面的形式：
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表示包含记录集数据的属性。
如果在运行程序中需要给服务器端发送数据的时候，此时可以直接使用ExtJS中提供的Ext.Ajax对象的request方法。比如下面的代码实现放服 务器的student.ejf?cmd=save这个url发起一个请求，并在params中指定发送的Student对象：
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: '男'}
});