转载：http://www.easyjf.com/
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,
width: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,
width: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[1] [2] [3] [4] 下一页
[新手指南]Widget之父Component：render (佚名，03-06)
首先，让我们回忆一下对于组件的讨论： 1.只有配置了applyTo或renderTo属性才会在构建组件时立刻进行render方法的调用； 2.如果是applyTo属性，则会对component的容器进行渲染；renderTo则是对componen……
[新手指南]构建EXT应用八：删除指定的学生信息 (myext整理，04-11)删除指定的学生信息删除按钮是表单上的第三个按钮，它的作用是删除当前显示的学生信息。既然是从数据库中删除已有的学生信息，那它就只能在修改信息的状态下起作用。因为在没有获得学生信息的id之前，无法执行删除操作。删除按钮对应的handler处理函数如代码清单12-15所示。代码清单12-15 删除学生信……
[新手指南]ExtJs学习笔记基础篇(1)-新手入门Helloword (未知，03-14) 最近学ajax，接触到了Extjs这个强大的框架。我想通过我的学习笔记，最后可以让大家上手在项目中使用Ext。首先我会写一些基本的用于入门Ext的文章，打好基础是很重要的。在了解基础后，可能会用Ext+ajax开发一个简单的小项目，会一点一滴的讲解项目开发过程，……
[新手指南]DomQuery基础 (佚名，03-06)
本教程旨在为读者了解怎样利用单例对象Ext.DomQuery,浏览穿梭于DOM树之中和获取对象，提供一个起点。DomQuery基础DomQuery的select函数有两个参数。第一个是选择符字符（selector string ）而第二个是欲生成查询的标签ID(TAG ID)。本文……
[新手指南]Ext简介 (佚名，03-06)
本教程适用于Ext 2.0的版本，而版本1.x仍可找到。无论你是Ext库的新手，抑或是想了解Ext的人，本篇文章的内容都适合你。本文将简单地介绍Ext的几个基本概念，和如何快速地做出一个动态的页面并运行起来，假设读者已具备了一些JavaScript经验和简单了解HTML的文档对象模……
