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,它可以让我们不需要启动项目就 ...
随机推荐
- SpringMVC框架04——RESTful入门
1.RESTful的基本概念 REST(Representational State Transfer)表述性状态转移,REST并不是一种创新技术,它指的是一组架构约束条件和原则,符合REST的约束条 ...
- [转]状态压缩dp(状压dp)
状态压缩动态规划(简称状压dp)是另一类非常典型的动态规划,通常使用在NP问题的小规模求解中,虽然是指数级别的复杂度,但速度比搜索快,其思想非常值得借鉴. 为了更好的理解状压dp,首先介绍位运算相关的 ...
- 子类 父类强转 HttpServlet service实现
相当于 走父类 临时走了一趟 HttpServletRequest ->ServletRequets -> HttpServeltRequest /* */ public void ser ...
- Struts2拦截器详解
一.Struts2拦截器原理: Struts2拦截器的实现原理相对简单,当请求struts2的action时,Struts 2会查找配置文件,并根据其配置实例化相对的 拦截器对象,然后串成一个列 ...
- 系统的Drawable(四)-LayerListDrawable
系统的Drawable(四)-LayerListDrawable 学习自 https://blog.csdn.net/u014695188/article/details/52815444 Layer ...
- 在mac中调试网页
一.谷歌浏览器 //打开控制台 option + command + j 二.safari浏览器 safari > 偏好设置 > 勾选开发菜单 1.打开控制台 A.可以在网页中右键,检查元 ...
- 【2017 4 24 - B】 组合数
[题目描述] 输入格式: 一行一个正整数n 输出格式: 一行一个数f(n)对1000000007取余的值 [分析] 就是乱搞?? 就是问根到叶子有多少条路径嘛. 然后路径可以π.1.1.π...这样表 ...
- P1828 香甜的黄油 Sweet Butter
对于这道洛谷ac而我整了一下午的codevs的题,我也是很绝望啊. 原因是队列数组开小了我勒个去???我说STL怎么能过 题目描述 农夫John发现做出全威斯康辛州最甜的黄油的方法:糖.把糖放在一片牧 ...
- SPOJ11414 COT3 博弈论 + Trie树合并
考虑对于每个子树从下往上依次考虑 对于叶子节点而言,如果可以染色,那么其\(sg\)值为\(1\),否则为\(0\) 考虑往上合并 如果选择了\(x\),那么后继状态就是其所有子树 如果选了其他子树中 ...
- [POI2013]Taksówki
[POI2013]Taksówki 题目大意: ABC三地在同一条直线上,AC相距\(m(m\le10^{18})\)米,AB相距\(d\),B在AC之间.总共有\(n(n\le5\times10^5 ...