ExtJS梦想之旅（八）--GridPanel和EditorGridPanel的使用
表格在web开发中会经常被使用到，是一种非常重要的组件，因此ExtJS在这方面做得也很出色，在这里也作为一个重点的组件来和大家分享，共同探讨一下。
Ext.grid.GridPanel此类系基于Grid控件的一个面板组件，呈现了Grid的主要交互接口。
Store :数据记录的模型（行为单位 ） The Model holding the data records (rows)
Column model : 列怎么显示 Column makeup
View : 封装了用户界面 Encapsulates the user interface
selection model : 选择行为的模型 Selection behavior
注意 :
- 尽管本类是由Panel类继承而得到的，但是不支持其基类的某些功能，不能都做到好像一般Panel类那样的方法，如autoScroll、autoWidth、layout、items等…… Although this class inherits many configuration options from base classes, some of them (such as autoScroll, autoWidth,layout, items, etc) are not used by this class, and will have no effect.
- Grid需要一个宽度来显示其所有的列，也需要一个高度来滚动列出所有的行。这些尺寸都通过配置项height 和width来精确地指定， 又或者将Grid放置进入一个带有{@link Ext.Container#layout 某种布局风格}的{@link Ext.Container 容器}中去，让上层容器来管理子容器的尺寸大小。例如指定layout为“fit”的布局就可以很好地自适应容器的拉伸了。
- 要访问GRID中的数据，就必须通过由Store封装的数据模型。参与cellclick事件。
下面用一个示例程序展示Ext.grid.GridPanel类的用法：
效果图：
grid.js
// girdpanel的使用
Ext.onReady(function() {
// 定义数据
var datas = [ [ 1, "EasyJWeb", "EasyJF", "http://www.easyjf.com" ],
[ 2, "jfox", "huihoo", "www,huihoo.com" ],
[ 3, "jdon", "jdon", "www.jdon.com" ],
[ 4, "springsite", "springsite", "www.springsite.com" ] ];
// 创建一个ArrayStore用来指定给GridPanel中的data配置项
var arrayStore = new Ext.data.ArrayStore({
data : datas,
// fields中定义的数组元素就会自动对应上面所定义的数组数据的元素
fields : [ "id", "name", "title", "url" ]
});
var grid = new Ext.grid.GridPanel({
title : "中国Java开源产品和团队",
store : arrayStore,
// 下面的每一列都对应上面定义的列名
columns : [ {
header : "ID",
dataIndex : "id",
width : 100
}, {
header : "名称",
dataIndex : "name",
width : 150
}, {
header : "标题",
dataIndex : "title",
width : 150
}, {
header : "网址",
dataIndex : "url",
width : 300,
// 设置网址的url能够连接到指定的url，函数中的v就是当前列内容
renderer : function(v) {
return v.link("<font color='red'>" + v + "</font>");
}
} ]
});
new Ext.Viewport({
layout : "fit",
items : grid
});
});
grid.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ext-girdpanel的使用</title>
<link href="ext-3.4.1/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
<script type="text/javascript" src="grid.js"></script>
</head>
<body> </body>
</html>
Ext.grid.EditorGridPanel是在GridPanel的基础上扩展的新类用于在指定某些的列可以编辑单元格。这些可编辑的列取决于editor的配置情况。
你可以在ColumnModel插入一个isCellEditable的实作来控制 某些列是否可以被编辑。正在编辑的是什么的值，就取决于列所指定的dataIndex是指向Store里面的什么的值。（这样的话，如果你使用{@link Ext.grid.ColumnModel#setRenderer renderer（数据重新显示）}）来转换了的数据，那么该项一定要说明清楚。
如果渲染列的时候，其映射关系是“值为内，说明文本为外”的关系，譬如{Ext.form.Field#ComboBox ComboBox}的情况， 便是这样value到description的关系， 那么就会采用适当的编辑器。
如果在Grid显示数据的时候有更复杂的情形，与Store不一定对称的话，那么就可以利用 beforeeditafteredit的事件来转换数据，达成是一致的数据。
下面展示一个示例用法：
editgrid.js
// girdpanel的使用
Ext.onReady(function() {
// 定义数据
var datas = [[ 1, "EasyJWeb", "EasyJF", new Date(),"http://www.easyjf.com" ],
[ 2, "jfox", "huihoo", new Date(), "www,huihoo.com" ],
[ 3, "jdon", "jdon", new Date(), "www.jdon.com" ],
[ 4, "springsite", "springsite", new Date(),"www.springsite.com" ] ];
// 创建一个ArrayStore用来指定给
var arrayStore = new Ext.data.ArrayStore({
// 指定数据从上面的数组中取得
data : datas,
// fields中定义的数组元素就会自动对应上面所定义的数组数据的元素
fields : [ "id", "name", "title", "vdate", "url" ]
});
// 创建一个EditorGridPanel
var editgrid = new Ext.grid.EditorGridPanel({
title : "中国Java开源产品和团队",
store : arrayStore,
// 下面的每一列都对应上面定义的列名
columns : [ {
header : "ID",
dataIndex : "id",
width : 100,
editor : new Ext.form.TextField()
}, {
header : "名称",
dataIndex : "name",
width : 150
}, {
header : "标题",
dataIndex : "title",
width : 150
}, {
header : "日期",
dataIndex : "vdate",
width : 100,
editor : new Ext.form.DateField(),
// renderer属性，处理一个函数，函数就会将当前列的文本值传递过来进行处理
renderer : function(v) {
return v.format("y-m-d");
}
}, {
header : "网址",
dataIndex : "url",
width : 300
} ]
});
new Ext.Viewport({
layout : "fit",
items : editgrid
});
});
editgrid.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ext-可编辑表格的使用</title>
<link href="ext-3.4.1/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
<script type="text/javascript" src="editgrid.js"></script>
</head>
<body> </body>
</html>
注意点：GridPanel和EditorGridPanel在选取数据的时候是这样那数据的，下面的图可以很清晰明了地展示上面两个例子如何取到表格中的数据。
图：
好了，这两个组件的使用就谈到这里了。谢谢大家！
ExtJS梦想之旅（八）--GridPanel和EditorGridPanel的使用的更多相关文章
- Java Web项目（Extjs）报错八
1.Java Web项目(Extjs)报错八 具体报错如下: org.springframework.dao.DataIntegrityViolationException: Could not ex ...
- 34.无废话ExtJs 入门教程十八[树：TreePanel]
转自:https://www.cnblogs.com/iamlilinfeng/archive/2012/06/28/2566350.html 1. <!DOCTYPE html PUBLIC ...
- Java8函数之旅 (八) - 组合式异步编程
前言 随着多核处理器的出现,如何轻松高效的进行异步编程变得愈发重要,我们看看在java8之前,使用java语言完成异步编程有哪些方案. JAVA8之前的异步编程 继承Thead类,重写run方法 实现 ...
- Cocos2D:塔防游戏制作之旅(八)
如果所有东西通过检查,则创建一个新炮塔,将它放置在基座上,然后添加到towers数组中. 注意:在方法最后的bridge语法需要做一些解释.你下载的初始项目已经为一 些文件打开ARC,但不是Cocos ...
- Spring学习之旅(八)--SpringMVC请求参数
现在我们已经完成了一个无参的接口了,但是应用中有很多需要携带参数的场景,我们来看看 ** SpringMVC** 对它的支持. 参数绑定 SpringMVC 提供了一种绑定机制,通过这个机制可以从请求 ...
- extjs学习资料
ExtJs 入门教程 1.Extjs5.1.0教程云盘地址 http://pan.baidu.com/s/1qYhHiEw 2.Extjs3.x如下: ExtJs 入门教程一[学习方法] ExtJ ...
- 随笔分类 - 无废话ExtJs系列教程
随笔分类 - 无废话ExtJs系列教程 摘自:http://www.cnblogs.com/iamlilinfeng/category/385121.html ExtJs 入门教程 摘要: extjs ...
- 杂项：ExtJS
ylbtech-杂项:ExtJS extjs是一种软件.自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能. ...
- Spring学习之旅(十)--MockMvc
在之前的 Spring学习之旅(八)--SpringMVC请求参数 我们是通过在控制台输出来验证参数是否正确,但是这样做实在是太耗时间了,我们今天来学习下 MockMvc,它可以让我们不需要启动项目就 ...
随机推荐
- 006.LVM快照
一 快照介绍 快照就是将当时的系统信息记录下来,就好像照相一样,未来若有任何资料变动了,则原始资料会被移动到快照区,没有被改动的区域则由快照区与档案系统共享. 二 快照原理 当建立快照区时,LVM会预 ...
- vue打包以及在Apache环境下的配置
vue打包,我们都清楚,实在记不住命令的可以去package.json中看: npm run build 打包后会生成dist文件夹,将dist文件夹下的所有文件复制到Apache下的www的文件夹下 ...
- 【Ray Tracing in One Weekend 超详解】 光线追踪1-8 自定义相机设计
今天,我们来学习如何设计自定义位置的相机 ready 我们只需要了解我们之前的坐标体系,或者说是相机位置 先看效果 Chapter10:Positionable camera 这一章我们直接用概念 ...
- 3，EasyNetQ-发布/订阅
一.发布 在发布/订阅模式中的角色是彼此陌生的. 一个发布者只是向世界说这个已经发生了,一位订阅者告诉世界“我在乎这个”. 在这个模型中,没有人关心特定的事件是很好的. 消息可能有一个订阅者,可能有2 ...
- View初探
View初探 学习自 <Android开发艺术探索> View漫谈 Activity构成了我们的界面但是知识一个空壳子,Activity与View相结合才构成了我们丰富多彩的界面,并且为了 ...
- windows下elasticsearch启动
windows下启动elasticsearch,依赖于配置好JAVA_HOME D:\Program Files\Java\jdk1.7.0_71 命令行启动elasticsearch.bat即可实现 ...
- luoguP4643 阿狸和桃子的挑战 思维
看下数据范围: \(n \leq 14\),emmmm,状压\(dp\)的分 \(n \leq 10000, m \leq 100000\),emmmm.....???,这是什么数据范围? 再观察一下 ...
- 洛谷P4141消失之物
题目描述 ftiasch 有 N 个物品, 体积分别是 W1, W2, …, WN. 由于她的疏忽, 第 i 个物品丢失了. “要使用剩下的 N – 1 物品装满容积为 x 的背包,有几种方法呢?” ...
- Spring_Spring@Transactional
Spring事务的传播行为 在service类前加上@Transactional,声明这个service所有方法需要事务管理.每一个业务方法开始时都会打开一个事务. Spring默认情况下会对运行期例 ...
- 7款精美HTML5应用
1,HTML5/jQuery雷达动画图表图表配置十分简单 分享一款很特别的HTML5图表,它是利用HTML5和jQuery的雷达动画图表,图表数据在初始化的时候带有一定动画. 在线演示 ...