1. 表格控件
1．1基本表格 GridPanel
ExtJS中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑
等实用功能。
表格由类Ext.grid.GridPanel定义，继承自Panel，其xtype为grid。ExtJS中，表格Grid必须包含
列定义信息，并指定表格的数据存储器Store。表格的列信息由类Ext,grid.ColumnModel定义，而表格的
数据存储器由Ext.data.Store 定义， 数据存储器根据解析的数据不同分为
JsonStore、SimpleStore、GroupinStore等。我们看一个简单的使用表格控件的代码：
Ext.onReady(function(){
var data=[
[1, '任务管理系统', '3D','www.renwu.com'],
[2, 'Blog系统', 'BJT','www.blog.org'],
[3, 'Ext管理系统', '3d','www.Extrw.com'],
[4, '中流网', 'ZLW','www.zlweb.cn']
];
var store=new Ext.data.SimpleStore({
data:data,
fields:["id","name","organization","homepage"]
});
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"NetJava表格测试",
height:150,
600,
columns:[{header:"项目名称",dataIndex:"name"},
{header:"开发团队",dataIndex:"organization"},
{header:"网址",dataIndex:"homepage"}],
store:store,
autoExpandColumn:2
});
});
运行上面的代码，可以得到一个简单的表格如下：
上面的代码中，第一行“var data-…”用来定义表格中要显示的数据，这是一个[][]二维数组；第二行”var
store=…”用来创建一个数据存储，这是GridPannel需要使用配置属性，数据存储器Store负责把各种各样
的数据（如二维数组、JSon对象数组、XML文本）等转换成ExtJS的数据记录集Record，关于数据存储器
Store我们将会在下一节中作专门讲解。第三行”var grid=new Ext.grid.GridPannel(…)”负责创建一个表格，
表格包含的列由columns配置属性来描述，columns是一个数组，每一行数据元素描述表格的一列信息。
表格的列信息包含列头显示的文本（header）、列对应的记录集字段（dataIndex）、列是否可排序
（sorable）、列的渲染函数（renderer）、格式化信息（format）等，在上面的列中只用到了header和
dataIndex.
下面我们再来看看表格控件的其它一些特性，修改一下上面的代码，内容如下：
function showUrl(value){
return "<a href="+value+">"+value+"</a>";
}
Ext.onReady(function(){
var data=[
[1, '任务管理系统', '3D','http://www.renwu.com'],
[2, 'Blog系统', 'BJT','http://www.blog.org'],
[3, 'Ext管理系统', '3d','http://www.Extrw.com'],
[4, '中流网', 'ZLW','http://www.zlweb.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",sortable:true,renderer:showUrl}]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"NetJava表格测试",
height:150,
600,
cm:colM,
store:store,
autoExpandColumn:2
});
});
上面的代码直接使用Ext.grid.ColumnModel来创建表格的列定义信息，在各列中我们添加了sortable为
true的属性，表示该列可以排序，另外，买一列的数据渲染方式还可以自己定义，比如上面的代码中.
我们希望用户在表格中点击网址可以打开这些团队的网站，也就是给网址这一列添加了超连接，运行效
果如下：
在定义“网址”的时候加上renderer属性：renderer:showUrl。showUrl是一个自定义的函数，内容是根
据传入的value参数返回一个包含<a>标签的html片段。自定义的列渲染函数可以实现在单元格中显示自
己所需要的各种信息，只要是浏览器支持的html都可以。
除了二维数组以外，表格还能显示其它格式的数据吗，这个是当然的，下面我们来看个例子，将数
据定义为以下格式：
var data=[{id:1,
name:'任务管理系统',
organization:'3D',
homepage:'http://www.renwu.com'},
{id:2,
name:'Blog系统',
organization:'BJT',
homepage:'http://www.renwu.com'},
{id:3,
name:'Ext管理系统',
organization:'3D',
homepage:'http://www.Extrw.com'},
{id:4,
name:'中流网',
organization:'ZLW',
homepage:'http://www.zlweb.cn'}
];
也就是说数据变成了一维数组，数组中的每一个元素是一个对象，这些对象包含"id"，
"name"，"organization"，"homepage" 等属性，要让表格上显示上面的数据，只要将存储器store 改为
Ext.data.JsonStore即可，如下：
var store=new Ext.data.JsonStore({data:data,fields:["id","name","organization","homepage"]});
上面的代码执行的结果与前面的一样。另外，表格同样能显示xml格式的数据，将上面的数据存放成
store.xml文件，如下：
<?xml version="1.0" encoding="UTF-8"?>
<database>
<row>
<id>1</id>
<name>任务管理系统</name>
<organization>3D</organization>
<homepage>http://www.renwu.com</homepage>
</row>
<row>
<id>2</id>
<name>Blog系统</name>
<organization>BJT</organization>
<homepage>http://www.renwu.com</homepage>
</row>
<row>
<id>3</id>
<name>Ext管理系统</name>
<organization>3D</organization>
<homepage>http://www.Extrw.com</homepage>
</row>
<row>
<id>4</id>
<name>中流网</name>
<organization>ZLW</organization>
<homepage>http://www.zlweb.cn</homepage>
</row>
</database>
将js代码数据存储器部分改为：
function showUrl(value){
return "<a href='"+value+"' target='_blank'>"+value+"</a>";
}
Ext.onReady(function(){
var store=new Ext.data.Store({
url:"tab.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",sortable:true,renderer:showUrl}
]);
var grid = new Ext.grid.GridPanel({
renderTo:"hello",
title:"NetJava表格测试",
height:150,
600,
cm:colM,
store:store,
autoExpandColumn:2
});
store.load();
});
Store.load()是用来加载数据，执行上面的代码产生的表格与前面的完全一样。