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,它可以让我们不需要启动项目就 ...
随机推荐
- error 1044 (42000):access denied for user ''@'localhost' to database 'quickapp' 解决方法
在虚拟机上重新创建一个数据库时,一直出现这个报错:error 1044 (42000):access denied for user ''@'localhost' to database 'quick ...
- Python3 计算相关系数
# -*- coding: utf-8 -*- """ Created on Mon Jan 8 19:36:48 2018 @author: markli " ...
- Spring框架学习——Spring的体系结构详解
1.Spring简介 Spring是一个轻量级Java开发框架,最早有Rod Johnson创建,目的是为了解决企业级应用开发的业务逻辑层和其他各层的耦合问题.它是一个分层的JavaSE/JavaEE ...
- [CC-XXOR]Chef and Easy Problem
[CC-XXOR]Chef and Easy Problem 题目大意: 给你一个长度为\(n(n\le10^5)\)的序列\(A(A_i<2^{31})\).\(m(m\le10^5)\)次询 ...
- [Java]进程与线程的区别(转)
线程是指进程内的一个执行单元,也是进程内的可调度实体. 与进程的区别: (1)地址空间:进程内的一个执行单元;进程至少有一个线程;它们共享进程的地址空间;而进程有自己独立的地址空间; (2)资源拥有: ...
- Fiddler_解决Fiddler查看Post参数中文乱码的问题
解决Fiddler查看Post参数中文乱码的问题 今天一个同事问我,为什么用Fiddler查看Post的中文参数,是一堆乱码,如下: 需要在注册表中增加一个键值: HKEY_CURRENT_USER\ ...
- [原创]Jmeter工具学习思维导图
[原创]Jmeter工具学习思维导图
- ARM JTAG 信号 RTCK 应该如何处理？
用户在调试内嵌可综合内核的 CPU 如 ARM7TDMI-S 时,需要通过打开仿真器的自适应时钟功能. 此时,ARM仿真器根据 RTCK 时钟信号的频率,产生可用于 CPU 内核当前时钟主频的最快的 ...
- STM32F4 -- How to use the DMA burst feature
Bits 15:13 Reserved, must be kept at reset value. Bits 12:8 DBL[4:0]: DMA burst length This 5-bit ve ...
- 使用filezilla server搭建FTP服务器
参考文献 http://www.pc6.com/infoview/Article_51961_all.html 背景 需要在内网环境下搭建一个FTP服务器,查阅相关资料发现使用filezilla se ...