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 相关文章推荐
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
vue+element实现批量删除功能的示例
Feb 28 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
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
python获取远程图片大小和尺寸的方法
2015/03/26 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
目前最全的python的就业方向
2018/06/05 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
我就是这样学习Python中的列表
2019/06/02 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
python安装后的目录在哪里
2020/06/21 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
端口镜像是怎么实现的
2014/03/25 面试题
2019思想汇报范文
2019/05/21 职场文书
深度学习小工程练习之垃圾分类详解
2021/04/14 Python