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 相关文章推荐
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
JavaScript结合HTML DOM实现联动菜单
Apr 05 Javascript
Javascript继承机制详解
May 30 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 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
PHP积分兑换接口实例
2015/02/09 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
jquery实现图片放大镜功能
2015/11/23 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
中文系师范生自荐信
2013/10/01 职场文书
银行工作检查书范文
2014/01/31 职场文书
致长跑运动员加油稿
2014/02/20 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
解除施工合同协议书
2014/10/17 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
python中os.path.join()函数实例用法
2021/05/26 Python
了解Redis常见应用场景
2021/06/23 Redis
Vue中Object.assign清空数据报错的解决方案
2022/03/03 Vue.js