(十) 基本表格GridPanel

(1) 基本表格GridPanel
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, 'ExtJS', 'ExtJS','www.extjs.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:"mydiv",
 title:"中国Java开源产品及团队",
 height:150,
 width:600,
 columns:[{header:"项目名称",dataIndex:"name"},
 {header:"开发团队",dataIndex:"organization"},
 {header:"网址",dataIndex:"homepage"}],
 store:store,
stripeRows: true,
 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。
stripeRows：是否使用条纹
autoExpandColumn：自动扩展的列该列会自动填充grid的空白空间

下面我们简单看看表格的排序及隐藏列特性，简单修改一下上面的代码，内容如下：
Ext.onReady(function(){
 var data=[ [1, 'ExtJS', 'ExtJS','www.extjs.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:"mydiv",
  title:"中国Java开源产品及团队",
  height:200,
  width:600,
  cm:colM,
  store:store,
  autoExpandColumn:2
 });
});
直接使用new Ext.grid.ColumnModel 来创建表格的列定义信息，在“项目名称“及“开发团队”列中我们添加了sortable 为true 的属性，表示该列可以排序，执行上面的代码，我们可以得到一个支持按“项目名称“或“开发团队”的表格。

另外，每一列的数据渲染方式还可以自己定义，比如上面的表格中，我们希望用户在表格中点击网址则直接打开这些开源团队的网站，也就是需要给网址这一列添加上超级连接。
下面的代码实现这个功能：
   function showUrl(value){
  return "<a href='"+value+"'>"+value+"</a>";
   }

Ext.onReady(function(){
 var data=[ [1, 'ExtJS', 'ExtJS','http://www.extjs.com'],
  [2, 'jfox', 'huihoo','http://www.huihoo.org'],
  [3, 'jdon', 'jdon','http://www.jdon.com'],
  [4, 'springside', 'springside','http://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:"mydiv",
  title:"中国Java开源产品及团队",
  height:200,
  width:600,
  cm:colM,
  stripeRows: true,
  store:store,
  autoExpandColumn:2
 });
});
上面的代码跟前面的示例差别不大，只是在定义“网址”列的时候多了一个renderer 属性，即{header:"网址",dataIndex:"homepage",renderer:showUrl}。showUrl 是一个自定义的函数，内容就是根据传入的value 参数（默认传入当前列的值）返回一个包含<a>标签的html 片段。

自定义的列渲染函数可以实现在单元格中显示自己所需要的各种信息，浏览器能处理的html 都可以。

除了二级数组以外，表格还能显示其它格式的数据吗？答案是肯定的，也就是说数据变成了一维数组，数组中的每一个元素是一个对象，这些对象包含name、organization、homepage、id 等属性。要让表格显示上面的数据，其实非常简单，只需要把store 改成用Ext.data.JsonStore 即可：
   function showUrl(value){
  return "<a href='"+value+"'>"+value+"</a>";
   }

Ext.onReady(function(){
 var data=[
  {id:1,name:'ExtJS',organization:'ExtJS',homepage:'http://www.extjs.com'},
  {id:2,name:'jfox',organization:'huihoo',homepage:'http://www.huihoo.org'},
  {id:3,name:'jdon',organization:'jdon',homepage:'http://www.jdon.com'},
  {id:4,name:'springside',organization: 'springside',homepage:'http://www.springside.org.cn'}
 ];
 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:"mydiv",
  title:"中国Java开源产品及团队",
  height:200,
  width:600,
  cm:colM,
  stripeRows: true,
  store:store,
  autoExpandColumn:2
 });
});

上面的代码得到的结果与前面的一样。当然，表格同样能显示xml 格式的数据，假如上面的数据存放成test.xml 文件中，内容如下：
<?xml version="1.0" encoding="UTF-8"?>
<dataset>
 <row>
  <id>1</id>
  <name>ExtJS</name>
  <organization>ExtJS</organization>
  <homepage>http://www.extjs.com</homepage>
 </row>
 <row>
  <id>2</id>
  <name>jfox</name>
  <organization>huihoo</organization>
  <homepage>http://www.huihoo.org</homepage>
 </row>
 <row>
  <id>3</id>
  <name>jdon</name>
  <organization>jdon</organization>
  <homepage>http://www.jdon.com</homepage>
 </row>
 <row>
  <id>4</id>
  <name>springside</name>
  <organization>springside</organization>
  <homepage>http://www.springside.org.cn</homepage>
 </row>
</dataset>

   function showUrl(value){
  return "<a href='"+value+"'>"+value+"</a>";
   }
Ext.onReady(function(){
 var store=new Ext.data.Store({
  url: 'test.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:"mydiv",
  title:"中国Java开源产品及团队",
  height:200,
  width:600,
  cm:colM,
  stripeRows: true,
  store:store,
  autoExpandColumn:2
 });
 store.load();
});

store.load()方法用来加载数据。
注意：本示例是从外部读取xml 文件，所以需要依赖web服务器来运行，否则无法加载数据！