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" ]});// 创建一个EditorGridPanelvar 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的使用相关推荐

takken android apk,银钢梦想之旅|TAKKEN 出击秘境探索第二季
人说:要么旅行,要么读书,身体和灵魂,总有一个要在路上. 我觉得我的人生还有很长的路要走,我想要趁年轻,让我的身体和灵魂一起上路. 在路上,道路即生活. 「银钢梦想之旅」第二季总线路图从呼伦贝尔到中 ...
ExtJs学习笔记(2)_Basic GridPanel[基本网格]
这一节,将学习如何使用网络上最常见的UI控件_Grid 1.静态示例: 静态示例其实官方下载包里,就有sample,这里只贴出代码,后面的如何跟WCF结合,做出动态版的Grid才是本文重点 <! ...
前端extjs学习之旅（1）
从上周正式开始学习Extjs.刚开始看老大推荐的Extjs in action英文版,边看边敲代码,虽然都是一些简单小程序,但是看着它跑起来还是很欢脱.但是,第一次通过英文书学技术的我感到非常痛恨英语 ...
我的Go语言学习之旅八：创建一个简单的WEB服务器
因为一直在做WEB程序,所以更关注WEB界的发展,这里就用GO做了一个简单的WEB服务器,直接看例子吧 package main import ( "fmt" "net/ ...
桥本有菜java,深入浅出Extjs4.1.1(ExtJS组件、ExtJS对Ajax支持、ExtJS布局)配在线选课系统实战...
课程简介: ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架,本课程是一套基于Extjs4.1.1版本进行全新讲解Extjs的课程.课程从基础开始,配合项目实战应用 ...
无废话ExtJs 入门教程十七[列表：GridPanel]
无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(521711109) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...
什么是Ext(ExtJs)【转载】
Ext发展史 1.第一只"出海"的YUI-Ext只是作者Jack打算对基于BSD协议的Yahoo!UI库进行自定义的扩展,但后来一度风头盖过其父辈YUI,足以说明大家对它的热情, ...
ExtJs + .NET MVC 不分页处理大数据
刷微博已经成为大家的一种生活方式,我今天要介绍的功能就很类似刷微博. 当我们需要将大数据(比如百万条数据)显示在页面上的时候,显然一次加载是不现实的,用户体验很差.当然,你可能会想到采用分也显示,但是 ...
Software knowledge Encyclopedia：extjs是一种软件，自动生成行号，支持checkbox全选
extjs是一种软件.自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能. 功能丰富,无人能出其右. 无论是界 ...

ExtJS梦想之旅（八）--GridPanel和EditorGridPanel的使用

ExtJS梦想之旅（八）--GridPanel和EditorGridPanel的使用相关推荐

最新文章

热门文章