- 浏览: 66962 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
游其是你:
谢谢博主,这种确实很好,但是如果是ajax提交数据似乎不能保存 ...
hibernate Session 管理 -
finally_m:
谢谢提醒!
(十一)可编辑表格EditorGridPanel -
setfsun2009:
不知楼主注意没,在火狐下的日期控件有问题!
(十一)可编辑表格EditorGridPanel -
finally_m:
谢谢大家的支持!
FCKEditor在线编辑器 -
finally_m:
本示例只是从数据库读取目录树,动态更新节点时还需要完善,实现方 ...
基于数据库动态生成目录树示例
(1) 基本表格GridPanel
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, 'ExtJS', 'ExtJS','www.extjs.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:"mydiv",
title:"中国Java开源产品及团队",
height:150,
width:600,
columns:[{header:"项目名称",dataIndex:"name"},
{header:"开发团队",dataIndex:"organization"},
{header:"网址",dataIndex:"homepage"}],
store:store,
stripeRows: true,
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。
stripeRows:是否使用条纹
autoExpandColumn:自动扩展的列该列会自动填充grid的空白空间
下面我们简单看看表格的排序及隐藏列特性,简单修改一下上面的代码,内容如下:
Ext.onReady(function(){
var data=[ [1, 'ExtJS', 'ExtJS','www.extjs.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:"mydiv",
title:"中国Java开源产品及团队",
height:200,
width:600,
cm:colM,
store:store,
autoExpandColumn:2
});
});
直接使用new Ext.grid.ColumnModel 来创建表格的列定义信息,在“项目名称“及“开发团队”列中我们添加了sortable 为true 的属性,表示该列可以排序,执行上面的代码,我们可以得到一个支持按“项目名称“或“开发团队”的表格。
另外,每一列的数据渲染方式还可以自己定义,比如上面的表格中,我们希望用户在表格中点击网址则直接打开这些开源团队的网站,也就是需要给网址这一列添加上超级连接。
下面的代码实现这个功能:
function showUrl(value){
return "<a href='"+value+"'>"+value+"</a>";
}
Ext.onReady(function(){
var data=[ [1, 'ExtJS', 'ExtJS','http://www.extjs.com'],
[2, 'jfox', 'huihoo','http://www.huihoo.org'],
[3, 'jdon', 'jdon','http://www.jdon.com'],
[4, 'springside', 'springside','http://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:"mydiv",
title:"中国Java开源产品及团队",
height:200,
width:600,
cm:colM,
stripeRows: true,
store:store,
autoExpandColumn:2
});
});
上面的代码跟前面的示例差别不大,只是在定义“网址”列的时候多了一个renderer 属性,即{header:"网址",dataIndex:"homepage",renderer:showUrl}。showUrl 是一个自定义的函数,内容就是根据传入的value 参数(默认传入当前列的值)返回一个包含<a>标签的html 片段。
自定义的列渲染函数可以实现在单元格中显示自己所需要的各种信息,浏览器能处理的html 都可以。
除了二级数组以外,表格还能显示其它格式的数据吗?答案是肯定的,也就是说数据变成了一维数组,数组中的每一个元素是一个对象,这些对象包含name、organization、homepage、id 等属性。要让表格显示上面的数据,其实非常简单,只需要把store 改成用Ext.data.JsonStore 即可:
function showUrl(value){
return "<a href='"+value+"'>"+value+"</a>";
}
Ext.onReady(function(){
var data=[
{id:1,name:'ExtJS',organization:'ExtJS',homepage:'http://www.extjs.com'},
{id:2,name:'jfox',organization:'huihoo',homepage:'http://www.huihoo.org'},
{id:3,name:'jdon',organization:'jdon',homepage:'http://www.jdon.com'},
{id:4,name:'springside',organization: 'springside',homepage:'http://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:"mydiv",
title:"中国Java开源产品及团队",
height:200,
width:600,
cm:colM,
stripeRows: true,
store:store,
autoExpandColumn:2
});
});
上面的代码得到的结果与前面的一样。当然,表格同样能显示xml 格式的数据,假如上面的数据存放成test.xml 文件中,内容如下:
<?xml version="1.0" encoding="UTF-8"?>
<dataset>
<row>
<id>1</id>
<name>ExtJS</name>
<organization>ExtJS</organization>
<homepage>http://www.extjs.com</homepage>
</row>
<row>
<id>2</id>
<name>jfox</name>
<organization>huihoo</organization>
<homepage>http://www.huihoo.org</homepage>
</row>
<row>
<id>3</id>
<name>jdon</name>
<organization>jdon</organization>
<homepage>http://www.jdon.com</homepage>
</row>
<row>
<id>4</id>
<name>springside</name>
<organization>springside</organization>
<homepage>http://www.springside.org.cn</homepage>
</row>
</dataset>
function showUrl(value){
return "<a href='"+value+"'>"+value+"</a>";
}
Ext.onReady(function(){
var store=new Ext.data.Store({
url: 'test.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:"mydiv",
title:"中国Java开源产品及团队",
height:200,
width:600,
cm:colM,
stripeRows: true,
store:store,
autoExpandColumn:2
});
store.load();
});
store.load()方法用来加载数据。
注意:本示例是从外部读取xml 文件,所以需要依赖web服务器来运行,否则无法加载数据!
发表评论
-
(十五) 完整的CRUD示列
2009-11-30 13:50 812见示例代码! -
(十四)树型控件
2009-11-30 13:42 1741树型控件(1) TreePanel在应用程序中,我们经常会涉及 ... -
(十三) FormPanel组件
2009-11-30 13:39 1063FormPanel组件在web页面中,表单可谓是最常用的控件之 ... -
(十二) 表格分页及与服务器交互
2009-11-30 13:37 979(3) 表格分页 一次性将成千上万条数据显示在Grid里,然后 ... -
(十一)可编辑表格EditorGridPanel
2009-11-30 13:35 1685(2) 可编辑表格EditorGridPanel可编辑表格是指 ... -
(九)布局Layout
2009-11-30 13:30 1108布局Layout(1) 布局概述所 ... -
(八)窗口及对话框
2009-11-30 13:28 941(1)窗口基本应用ExtJS 中 ... -
(七) 使用面板
2009-11-30 13:25 977(1) Panel面板Panel 是ExtJS 控件的基础,很 ... -
(六) 事件处理
2009-11-30 13:23 878ExtJS提供了一套强大的事件处理机制,通过这些事件处理机制来 ... -
(五) 组件的配置属性
2009-11-30 13:21 1012在ExtJS中,除了一些特殊的组件或类以外,所有的组件在初始化 ... -
(四) 组件的使用
2009-11-30 12:55 759组件可以直接通过new 关 ... -
(三) ExtJS组件
2009-11-30 12:41 803组件大致可以分成三大类,即基本组件、工具栏组件、表单及元素组件 ... -
(二) ExtJS 入门
2009-11-30 12:38 861ExtJS之Hello World 把解压后的Ext文 ... -
(一) ExtJS 简介
2009-11-30 12:34 859简介 ExtJS 是一个很不错的Ajax 框架,用于在客户端 ... -
AJAX技术之DWR框架入门
2009-04-06 22:47 857(1) 简介 官方:http:/ ... -
AJAX入门
2009-04-06 22:22 1265简介 Ajax(Asynchronous JavaScrip ...
相关推荐
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. 实现简单的。
gridpanel的使用,挺好的啊 gridpanel的使用,挺好的啊 gridpanel的使用,挺好的啊
Extnet GridPanel 增行 删行 弹出窗体 页面传值
Ext.grid.GridPanel属性祥解, 表格部门的详解,通俗易懂,适合初学人员,以及想对GridPanel有个精析认识的Web开发人员
ExtJS的GridPanel导出excel文件,方便快捷易懂!
详细介绍GridPanel各项属性,ExtJS 普通表格:Ext.grid.GridPanel属性详解
使用ext.net代码动态创建gridpanel后任意显示在各种窗口中
本文为大家详细介绍下ExtJs如何设置GridPanel表格文本垂直居中,具体实现代码及截图如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
Ext教程 展示EXT表单FormPanel和表格GridPanel的使用
Ext.grid.GridPanel 删除线 放到example文件夹下运行
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
NULL 博文链接:https://wv1124.iteye.com/blog/741559
ExtJs GridPanel双击事件获得双击的行,双击行可以选中前面的checkbox,并获得行号
Ext GridPanel 中实现加链接操作 Ext GridPanel 中实现加链接操作 Ext GridPanel 中实现加链接操作
20)基本表格GridPanel 21)视图区ViewPort 22)可编辑表格EditorGridPanel 23)窗口基本应用 24)窗口分组 25)对话框 26)与服务器交互 27)Record 28)Store 29)TreePanel基本使用 30)使用树控件TreeNode 31)使用树控件...