转载自http://blog.chinaunix.net/u/22371/showart_2043286.html
ExtJS中的表格功能非常强大,包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。
表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid。ExtJS中,表格Grid必须包含列定义信息,并指定表格的数据存储器Store。表格的列信息由类Ext.grid.ColumnModel定义、而表格的数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同分为SimpleStroe、JsonStore、GroupingStore等。
1、首先来看最简单的使用表格(SimpleStroe)的代码:
这个地方法应该注意,在HTML页面中有id为hello的标签,如:
上面的代码中,第一行“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。
下面我们看简单看看表格的排序及隐藏列特性,简单修改一下上面的代码,内容如下:
直接使用new Ext.grid.ColumnModel来创建表格的列信定义信息,在“项目名称“及“开发团队”列中我们添加了sortable为true的属性,表示该列可以排序,执行上面的代码,我们可以得到一个支持按“项目名称“或“开发团队”的表格。
另外,每一列的数据渲染方式还可以自己定义,比如上面的表格中,我们希望用户在表格中点击网址则直接打开这些开源团队的网站,也就是需要给网址这一列添加上超级连接。下面的代码实现这个功能:
上面的代码跟前面的示例差别不大,只是在定义“网址”列的时候多了一个renderer属性,即{header:"网址",dataIndex:"homepage",renderer:showUrl}。showUrl是一个自定义的函数,内容就是根据传入的value参数返回一个包含<a>标签的html片段。
自定义的列渲染函数可以实现在单元格中显示自己所需要的各种信息,只是的浏览器能处理的html都可以。
2、除了二级数组以外,表格还能显示其它格式的数据吗?答案是肯定的,下面假如我们的表格数据data定义成了下面的形式(JsonStore):
也就是说数据变成了一维数组,数组中的每一个元素是一个对象,这些对象包含name、organization、homepage、id等属性。要让表格显示上面的数据,其实非常简单,只需要把store改成用Ext.data.JsonStore即可,代码如下:
ExtJS中的表格功能非常强大,包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。
表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid。ExtJS中,表格Grid必须包含列定义信息,并指定表格的数据存储器Store。表格的列信息由类Ext.grid.ColumnModel定义、而表格的数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同分为SimpleStroe、JsonStore、GroupingStore等。
1、首先来看最简单的使用表格(SimpleStroe)的代码:
[code="java"] /// [code="java"]Ext.onReady(function(){ [code="java"]var data=[ [code="java"] [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 }); });
这个地方法应该注意,在HTML页面中有id为hello的标签,如:
上面的代码中,第一行“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的属性,表示该列可以排序,执行上面的代码,我们可以得到一个支持按“项目名称“或“开发团队”的表格。
另外,每一列的数据渲染方式还可以自己定义,比如上面的表格中,我们希望用户在表格中点击网址则直接打开这些开源团队的网站,也就是需要给网址这一列添加上超级连接。下面的代码实现这个功能:
function showUrl(value){ return "<a href=\"http://"+value+"\" target=\"_blank\">"+value+"</a>";}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",renderer:showUrl}]); var grid = new Ext.grid.GridPanel({ renderTo:"hello", title:"中国Java开源产品及团队", height:200, width:600, cm:colM, store:store, autoExpandColumn:2 }); });
上面的代码跟前面的示例差别不大,只是在定义“网址”列的时候多了一个renderer属性,即{header:"网址",dataIndex:"homepage",renderer:showUrl}。showUrl是一个自定义的函数,内容就是根据传入的value参数返回一个包含<a>标签的html片段。
自定义的列渲染函数可以实现在单元格中显示自己所需要的各种信息,只是的浏览器能处理的html都可以。
2、除了二级数组以外,表格还能显示其它格式的数据吗?答案是肯定的,下面假如我们的表格数据data定义成了下面的形式(JsonStore):
var data=[{ id:1, name:'EasyJWeb', organization:'EasyJF', homepage:'www.easyjf.com'}, { id:2, name:'jfox', organization:'huihoo', homepage:'www.huihoo.org'}, {id:3, name:'jdon', organization:'jdon', homepage:'www.jdon.com'}, { id:4, name:'springside', organization: 'springside', homepage:'www.springside.org.cn'} ];
也就是说数据变成了一维数组,数组中的每一个元素是一个对象,这些对象包含name、organization、homepage、id等属性。要让表格显示上面的数据,其实非常简单,只需要把store改成用Ext.data.JsonStore即可,代码如下:
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:"hello", title:"中国Java开源产品及团队", height:200, width:600, cm:colM, store:store, autoExpandColumn:2 }); 上面的代码得到的结果与前面的一样。 3、当然,表格同样能显示xml格式的数据,假如上面的数据存放成dataXml.xml文件中,内容如下:<?xml version="1.0" encoding="UTF-8"?> <dataset> <row> <id>1</id> <name>EasyJWeb</name> <organization>EasyJF</organization> <homepage>www.easyjf.com</homepage> </row> <row> <id>2</id> <name>jfox</name> <organization>huihoo</organization> <homepage>www.huihoo.org</homepage> </row> <row> <id>3</id> <name>jdon</name> <organization>jdon</organization> <homepage>www.jdon.com</homepage> </row> <row> <id>4</id> <name>springside</name> <organization>springside</organization> <homepage>www.springside.org.cn</homepage> </row> </dataset>
为了把这个xml数据用ExtJS的表格Grid进行显示,我们只需要把store部分的内容调整成如下的内容即可:var store=new Ext.data.Store({ url:"dataXml.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:"dataXml.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()是用来加载数据,执行上面的代码产生的表格与前面的完全一样。
最后要注意的是:解析XML是可以的,但是必须将项目部署在WEB服务器中,才能显示出解析出来的数据。
发表评论
相关推荐
20)基本表格GridPanel 21)视图区ViewPort 22)可编辑表格EditorGridPanel 23)窗口基本应用 24)窗口分组 25)对话框 26)与服务器交互 27)Record 28)Store 29)TreePanel基本使用 30)使用树控件TreeNode 31)使用树控件...
……36 6.1 基本表格GridPanel……….……………………………………………………………………………………..….36 6.2 可编辑的表格EditorGridPanel……….………………………………………………………………...
NULL 博文链接:https://aa00aa00.iteye.com/blog/564647
表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid。ExtJS中,表格Grid必须包含列定义信息,并指定表格的数据存储器Store。表格的列信息由类Ext.grid.ColumnModel定义、而表格的数据存储器由Ext.data....
改变gridpanel的行颜色,以及gridpanel 的表格变色
扩展的GridPanel,让其分页后保持选择状态
EXT实例GridPanel. 实现简单的。
Ext教程 展示EXT表单FormPanel和表格GridPanel的使用
gridpanel的使用,挺好的啊 gridpanel的使用,挺好的啊 gridpanel的使用,挺好的啊
Ext.grid.GridPanel属性祥解, 表格部门的详解,通俗易懂,适合初学人员,以及想对GridPanel有个精析认识的Web开发人员
Extnet GridPanel 增行 删行 弹出窗体 页面传值
ExtJS的GridPanel导出excel文件,方便快捷易懂!
本文为大家详细介绍下ExtJs如何设置GridPanel表格文本垂直居中,具体实现代码及截图如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
使用ext.net代码动态创建gridpanel后任意显示在各种窗口中
详细介绍GridPanel各项属性,ExtJS 普通表格:Ext.grid.GridPanel属性详解
Ext.grid.GridPanel 删除线 放到example文件夹下运行
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
NULL 博文链接:https://wv1124.iteye.com/blog/741559
ExtJs GridPanel双击事件获得双击的行,双击行可以选中前面的checkbox,并获得行号