ExtJS 2.0 GridPanel基本表格简明教程


Posted in Javascript onMay 25, 2010

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.baidu.com'], 
[2, 'jfox', 'huihoo','3water.com'], 
[3, 'jdon', 'jdon','s.3water.com'], 
[4, 'springside', 'springside','tools.3water.com'] ]; 
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 
}); 
});

执行上面的代码,可以得到一个简单的表格,如下图所示:
ExtJS 2.0 GridPanel基本表格简明教程
上面的代码中,第一行“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.baidu.com'], 
[2, 'jfox', 'huihoo','3water.com'], 
[3, 'jdon', 'jdon','s.3water.com'], 
[4, 'springside', 'springside','tools.3water.com'] ]; 
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所示。
ExtJS 2.0 GridPanel基本表格简明教程
(按项目名称排序)
ExtJS 2.0 GridPanel基本表格简明教程
(可排序的列表头后面小按钮可以弹出操作菜单)
ExtJS 2.0 GridPanel基本表格简明教程
(可以指定隐藏哪些列)
另外,每一列的数据渲染方式还可以自己定义,比如上面的表格中,我们希望用户在表格中点击网址则直接打开这些开源团队的网站,也就是需要给网址这一列添加上超级连接。下面的代码实现这个功能:
function showUrl(value) 
{ 
return ""+value+""; 
} 
Ext.onReady(function(){ 
var data=[ [1, 'EasyJWeb', 'EasyJF','www.baidu.com'], 
[2, 'jfox', 'huihoo','3water.com'], 
[3, 'jdon', 'jdon','s.3water.com'], 
[4, 'springside', 'springside','tools.3water.com'] ]; 
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 
}); 
}); 
[html] 上面的代码跟前面的示例差别不大,只是在定义“网址”列的时候多了一个renderer属性,即{header:"网址",dataIndex:"homepage",renderer:showUrl}。showUrl是一个自定义的函数,内容就是根据传入的value参数返回一个包含<a>标签的html片段。运行上面的代码显示结果如下图所示: 

自定义的列渲染函数可以实现在单元格中显示自己所需要的各种信息,只是的浏览器能处理的html都可以。 
除了二级数组以外,表格还能显示其它格式的数据吗?答案是肯定的,下面假如我们的表格数据data定义成了下面的形式: 
[code] 
var data=[{id:1, 
name:'EasyJWeb', 
organization:'EasyJF', 
homepage:'www.baidu.com'}, 
{id:2, 
name:'jfox', 
organization:'huihoo', 
homepage:'3water.com'}, 
{id:3, 
name:'jdon', 
organization:'jdon', 
homepage:'s.3water.com'}, 
{id:4, 
name:'springside', 
organization: 'springside', 
homepage:'tools.3water.com'} 
];

也就是说数据变成了一维数组,数组中的每一个元素是一个对象,这些对象包含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 
});

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

为了把这个xml数据用ExtJS的表格Grid进行显示,我们只需要把store部分的内容调整成如下的内容即可:

var store=new Ext.data.Store({ 
url:"hello.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:"hello.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()是用来加载数据,执行上面的代码产生的表格与前面的完全一样。

Javascript 相关文章推荐
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
Mar 28 Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
JavaScript 详解预编译原理
Jan 22 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 Javascript
vue+Element-ui实现登录注册表单
Nov 17 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 #Javascript
json格式化/压缩工具 Chrome插件扩展版
May 25 #Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 #Javascript
js 设置选中行的样式的实现代码
May 24 #Javascript
基于jquery的direction图片渐变动画效果
May 24 #Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 #Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 #Javascript
You might like
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
destoon之一键登录设置
2014/06/21 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
JavaScript 学习初步 入门教程
2010/03/25 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
2020/04/26 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
python实现抖音点赞功能
2019/04/07 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
Python如何实现定时器功能
2020/05/28 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
美国家具网站:Cymax
2016/09/17 全球购物
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
体育专业个人的求职信范文
2013/09/21 职场文书
仓库文员岗位职责
2014/04/06 职场文书
北京奥运会主题口号
2014/06/13 职场文书
物流专业求职信
2014/06/30 职场文书
法定代表人证明书
2014/11/28 职场文书
2019思想汇报范文
2019/05/21 职场文书
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL