关于ExtJS 2.0 GridPanel基本表的简明教程

JS中的表格功能非常强大，包括排序、缓存、拖动、隐藏一列、自动显示行号、汇总列、编辑单元格等实用功能。一个表是由从Panel继承的类Ext.grid.GridPanel定义的，它的xtype是grid。在js中，表格网格必须包含列定义信息，并指定表格的数据存储。表的列信息由类Ext.grid.ColumnModel定义，而表的数据存储由Ext.data.Store定义，数据存储根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。首先我们来看看使用该表最简单的代码：复制代码如下： ext . onready(function(){ vardata=[[1，' easyjweb '，' easyjf '，' www.baidu.com '，[2，' jfox '，' huihoo '，' www.jb '。[3，' jdon '，' jdon '，' s.jb51.net']，[4，' springside '，' springside '，' tools . JB 51 . net ']；var store=new ext . data . simple store({ data : data，fields:['id '，' name '，' organization '，' home page ']})；vargrid=new ext . grid . grid panel({ render to : ' hello '，title :' Chinese Java开源产品和团队'，高度：150，宽度：600，列3360 [{header :' project name '，Dataindex:' name'}，{header:' development team '，dataindex3360' organization'}，{header : '网站'，dataindex 333660});执行上面的代码得到一个简单的表，如下图所示：。

在上面的代码中，第一行“var data=……”用于定义要在表中显示的数据，是一个[] []二维数组；第二行“var Store=…”用于创建数据存储，这是GridPanel所需的配置属性。数据存储负责将各种数据(如2D数组、JSon对象数组和xml文本)转换成ExtJS的数据集Record。我们将在下一章介绍数据存储。第三行，“var grid=new ext。grid.gridpanel (…)”，负责创建一个表。表中的列由列配置属性描述。列是一个数组，每行数据元素描述表中的一列信息。sorable的列信息包括表头显示文本、该列对应的dataIndex、该列是否可以排序、渲染器、列的宽度和格式等。上面的列中只使用了标题和数据索引。先简单看一下表的排序和隐藏列特征，简单修改一下上面的代码，如下：复制代码的代码如下： ext . onready(function(){ vardata=[[1，' easyjweb '，' easyjf '，' www.baidu.com']，[2，' jfox '，' huihoo '，' www.jb51.net']，[3，' jdon '，' jdon '，' s.jb51.net '，[4，' springside '，' springside ' 'var store=new ext . data . simple store({ data : data，fields:['id '，' name '，' organization '，' home page ']})；varcolm=new ext . grid . column model([{header: '项目名称'，dataindex: '名称'，sortable: true}，{header3360 '开发团队'，dataIndex: '组织'，Sortable: true}，{ header : '网站地址'，dataIndex: '主页' }]；vargrid=new ext . grid . grid panel({ render to : ' hello '，title :' Chinese Java开源产品和团队'，高度：200，宽度：600，cm : colm，store 3360 store，autoexpandcolumn 33602 })；});直接使用新的Ext.grid.ColumnModel创建表的列字母定义信息。在“项目名称”和“开发团队”的列中，我们添加了sortable为true的属性，表示可以对列进行排序。执行上述代码后，我们可以得到一个支持按“项目名称”或“开发团队”的表，如图xxx所示。

(按项目名称排序)

(可排序列表标题后面的小按钮可以弹出操作菜单)

(您可以指定要隐藏的列。)另外，每一列的数据呈现方式可以自己定义。比如上表中，我们希望用户可以通过点击表中的URL直接打开这些开源团队的网站，也就是需要在URL一栏添加一个超链接。下面的代码实现了这个功能：复制代码如下：函数show URL(value){ return ' ' value“”；} ext . onready(function(){ var data=[[1，' EasyJWeb '，' EasyJF '，' www.baidu.com']，[2，' jfox '，' huihoo '，' www.jb51.net '，[3，' jdon '，' jdon '，' s.jb51.net '，[4，' springside '，' springside '，' tools . JB 51 . net ']]；var store=new ext . data . simple store({ data : data，fields:['id '，' name '，' organization '，' home page ']})；varcolm=new ext . grid . column model([{header: '项目名称'，dataindex: '名称'，sortable: true}，{header3360 '开发团队'，dataIndex: '组织'，Sortable: true}，{ header : '网站地址'，dataindex: '主页'，render 3360 show URL }]；vargrid=new ext . grid . grid panel({ render to : ' hello '，title :' Chinese Java开源产品和团队'，高度：200，宽度：600，cm : colm，store 3360 store，autoexpandcolumn 33602 })；});[html]上面的代码与前面的例子没有太大的不同，只是在定义“URL”列时，增加了一个渲染器属性，即{ header :‘URL’、dataindex 3360‘home page’、renderer: showurl }。ShowUrl是一个用户定义的函数，其内容是根据传入的value参数返回一个包含标签的html片段。运行上述代码，结果如下图所示：。

自定义的列渲染函数可以实现在单元格中显示自己所需要的各种信息，只是的浏览器能处理的超文本标记语言都可以。除了二级数组以外，表格还能显示其它格式的数据吗？答案是肯定的，下面假如我们的表格数据数据定义成了下面的形式：[代码] var data=[{id:1，name:'EasyJWeb '，organization:'EasyJF '，homepage:'www.baidu.com'}，{id:2，name:'jfox '，organization:'huihoo '，homepage:'www.jb51.net'}，{ id:3，name: ' jdon '，organization 333333333333也就是说数据变成了一维数组，数组中的每一个元素是一个对象，这些对象包含姓名、机构、主页、身份证等属性。要让表格显示上面的数据，其实非常简单，只需要把商店改成用Ext.data.JsonStore即可，代码如下：复制代码代码如下： var商店=新分机。数据。jsonstore({ data : data，fields:['id '，' name '，' organization '，' home page ']})；var colM=new Ext。网格。ColumnMoDEL([{ header : '项目名称，dataIndex:'name '，sortable:true}，{header: '开发团队，数据索引："组织",可排序：路径，{header: '网址，dataIndex: '主页'，render : show URL }])；var grid=new ext。网格。网格面板({ renderto : ' hello，title: '中国爪哇开源产品及团队，高：200,宽：600，cm:colM，store:store，autoexpandcolumn :2 })；上面的代码得到的结果与前面的一样。当然，表格同样能显示可扩展标记语言格式的数据，假如上面的数据存放成hello.xml文件中，内容如下：复制代码代码如下：可扩展标记语言版本='1.0 '编码='UTF-8 '？数据集行id1/id名称easyjweb/名称组织easyjf/组织homepagewww.baidu.com/homepage/行id2/id名称jfox/名称组织huiho/组织homepagewww.jb51.net/homepage/行ID3/id名称jdon/组织名称homepages.jb51.net/homepage/行id4/id名称springside/名称组织springside/组织homepagetools.jb51.net/homepage/行/数据集为了把这个可扩展标记语言数据用框架的表格格子进行显示，我们只需要把商店部分的内容调整成如下的内容即可：复制代码代码如下： var商店=新分机。数据。商店({ URL : '您好。' XML '，阅读器：新分机。数据。xmlreader({ record : ' row ' }，['id '，' name '，' organization '，' home page '])})；其它的部分不用改变，完整的代码如下：复制代码代码如下：函数show URl(value){ return ' a href=' http://' value ' ' target=' _ blank ' ' value '/a '；}分机。onready(function(){ var store=new ext。数据。商店({ URL : '您好。' XML '，阅读器：新分机。数据。xmlreader({ record : ' row ' }，['id '，' name '，' organization '，' home page '])})；var colM=new Ext。网格。ColumnMoDEL([{ header : '项目名称，dataIndex:'name '，sortable:true}，{header: '开发团队，数据索引："组织",可排序：路径，{header: '网址，dataIndex: '主页'，render : show URL }])；var grid=new ext。网格。网格面板({ renderto : ' hello，title: '中国爪哇开源产品及团队，高：200,宽：600，cm:colM，store:store，autoexpandcolumn :2 })；商店。load()；});store.laod()是用来加载数据，执行上面的代码产生的表格与前面的完全一样。