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','</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:"开发团队",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()是用来加载数据，执行上面的代码产生的表格与前面的完全一样。