ext2.0中GridPanel(7)
来源:互联网 发布:开关电源电路仿真软件 编辑:程序博客网 时间:2024/06/15 21:25
1.GridPanel
ExtJS 中的表格功能非常强大,包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。
表格由类Ext.grid.GridPanel 定义,继承自Panel,其xtype 为grid。ExtJS 中,表格Grid必须包含列定义信息, 并指定表格的数据存储器Store 。表格的列信息由类Ext.grid.ColumnModel 定义、而表格的数据存储器由Ext.data.Store 定义,数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore 等。
(1)、简单的表格的使用:
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 grid = new Ext.grid.GridPanel({renderTo:"hello",title:"中国Java开源产品及团队",height:150,width:600,columns:[{header:"序号",dataIndex:"id"},{header:"项目名称",dataIndex:"name"},{header:"开发团队",dataIndex:"organization"},{header:"网址",dataIndex:"homepage"}],store:store,autoExpandColumn:2});});
上面的代码中,
第一行“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。
(2)、表格的排序及隐藏列特性
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 的属性,表示该列可以排序,执行上面的代码,我
们可以得到一个支持按“项目名称“或“开发团队”的表格,也可隐藏这两列
(3)、给表格中的内容加超链接
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.baidu.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 片段。
(4)、改变数据格式
面假如我们的表格数据data 定义成了下面的形式:
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 即可,代码如下:
function showUrl(value){return "<a href='http://"+value+"' target='_blank'>"+value+"</a>";}Ext.onReady(function(){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'}];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});});
(5)、把这个xml 数据用ExtJS 的表格Grid 进行显示
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>
function showUrl(value){return "<a href='http://"+value+"' target='_blank'>"+value+"</a>";}Ext.onReady(function(){var store=new Ext.data.Store({url:"aa.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();});
- ext2.0中GridPanel(7)
- EXT2.0: GridPanel 分页方法绝好例子
- ext2 gridPanel 选择框列
- ext2.0中组件简介(2)
- ext2.0中layout布局(6)
- ext2.0中EditorGridPanel (8)
- Ext2.0教程二:基本表格GridPanel,从后台数据库取数据
- Ext2.0教程二:基本表格GridPanel,从后台数据库取数据
- ext2.0中组件(viewPort)的使用(4)
- ext2.0中Record的使用(9)
- Ext2.0中tab+iframe的配置
- Ext2.0
- 用EXT2.2+vs.2008.net+C#动态生成GridPanel
- Ext2.0 html标签中调用方法function 避免“找不到此方法”(如红色标记)
- ext2.0中组件(panel,tabPanel,button,window)的使用(3)
- ext2.0中组件(window,提示框)的使用(5)
- ExtJs 中GridPanel分页
- ExtJS中GridPanel分页
- listview加载性能优化ViewHolder
- telnet登录android手机,可以执行部分linux命令
- Fckeditor 2.6.3配置(ASP.NET)
- 用strlen却不用string.h
- 四种有能力取代Cookies的客户端Web存储方案
- ext2.0中GridPanel(7)
- Android Developers:在命令行构建和运行
- Leetcode: Subsets II
- C语言排序算法
- Ubuntu终端远程连接计算机(Linux)
- 自主”操作系统——为什么及如何
- js列出文件夹下的内容
- 浅析Java web程序之客户端和服务器端交互原理
- [数字图像处理]模糊算法用于图像增强