Ext2.0 学习系列(转) ------- Ext Grid (一)
现在的JS框架已经越来越多了,新兴的一些框架使用率上升非常快,因此不能落后啊!
最近开始学习Ext2.0,据说功能非常强大,呵呵!无论是界面之美,还是功能之强,ext的表格控件都高居榜首。单选行,多选行,高亮显示选中的行,推拽改变列宽度,按列排序,这些基本功能咱们就不提了。下面记录我的学习点滴。
如何用三种基本类型的数据(Array, Json, Xml)来创建最简单的表格
最简单的表格由以下几个元素组成:
1. 列定义(ColumnModel)
首先我们知道表格肯定是二维的,横着叫行,竖着叫列。跟设计数据库,新建表一样,我们要先设置这个表有几列,每列叫啥名字,啥类型,咋显示,这个表格的骨架也就出来了。这里我们建立一个四列的表格,第一列叫编号(id),第二列叫性别(sex),第三列叫名称(name),第四列叫描述(descn)。 // 定义一个ColumnModel
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'性别',dataIndex:'sex'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
其中,cm.defaultSortable = true;这句话表示默认为可排序的表格,可以先不要去管它
2. 数据(Data)
有了表格的骨架,现在我们要向里边添加数据了。这个数据当然也是二维了,下面分别介绍三种数据类型的使用方法:
(1) Array Data
// ArrayData
var data = [
['1','male','name1','descn1'],
['2','male','name1','descn2'],
['3','male','name3','descn3'],
['4','male','name4','descn4'],
['5','male','name5','descn5']
];
(2) Json Data
//JsonData
var people = {
'coders': [
{ 'id': '1', 'sex': 'male', 'name':'McLaughlin', 'descn': 'brett@newInstance.com' },
{ 'id': '2', 'sex': 'male','name':'Hunter', 'descn': 'jason@servlets.com' },
{ 'id': '3', 'sex': 'female','name':'Harold', 'descn': 'elharo@macfaq.com' }
],
'musicians': [
{ 'id': '1', 'name': 'Clapton', 'descn': 'guitar' },
{ 'id': '2', 'name': 'Rachmaninoff', 'descn': 'piano' }
]
}
(3) Xml Data
Xml类型的数据一般是由一个.xml文件提供的,通过http请求的方式得到。
3. 数据的读取
定义好数据之后,我们需要将其转换为能够为grid所用的页面,ext为咱们提供了一个桥梁,Ext.data.Store,通过它我们可以把任何格式的数据转化成grid可以使用的形式,这样就不需要为每种数据格式写一个grid的实现了。现在咱们就来看看这个Ext.data.Store是如何转换三种数据的。
(1) ArrayReader
// ArrayReader
var ds1 = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'sex'},
{name: 'name'},
{name: 'descn'}
])
});
ds1.load();
ds要对应两个部分:proxy和reader。proxy告诉我们从哪里获得数据,reader告诉我们如何解析这个数据。
现在我们用的是Ext.data.MemoryProxy,它是专门用来解析js变量的。你可以看到,我们直接把data作为参数传递进去了。 Ext.data.ArrayReader专门用来解析数组,并且告诉我们它会按照定义的规范进行解析,每行读取三个数据,第一个叫id,第二个叫 sex,第三个叫name,第四个descn。这些是跟cm定义中的dataIndex对应的。这样cm就知道哪列应该显示那条数据了。
记得要执行一次ds.load(),对数据进行初始化。
(2) JsonReader
// JsonReader
var ds2 = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(people),
reader: new Ext.data.JsonReader({root: 'coders'}, [
{name: 'id'},
{name: 'sex'},
{name: 'name'},
{name: 'descn'}
])
});
ds2.load();
其中,root: 'colders'表示取数据的时候取的是'coders'这个节点的数据,而不是'musician'
(3) XmlReader
// XmlReader
var ds3 = new Ext.data.Store({
url: 'test.xml',
reader: new Ext.data.XmlReader({record: 'item'}, [
{name: 'id'},
{name: 'sex'},
{name: 'name'},
{name: 'descn'}
])
});
ds3.load();
其中,record: 'item'表示每条记录对应的节点是'item',下面我会给出test.xml文件的内容,便于更好的理解
test.xml
<?xml version="1.0" encoding="UTF-8"?>
<dataset>
<results>2</results>
<item>
<id>1</id>
<sex>male</sex>
<name>Taylor</name>
<descn>Coder</descn>
</item>
<item>
<id>2</id>
<sex>female</sex>
<name>Sophia</name>
<descn>Civil Servant</descn>
</item>
<item>
<id>3</id>
<sex>male</sex>
<name>Taylor</name>
<descn>Coder</descn>
</item>
<item>
<id>4</id>
<sex>female</sex>
<name>Sophia</name>
<descn>Civil Servant</descn>
</item>
<item>
<id>5</id>
<sex>female</sex>
<name>Sophia</name>
<descn>Civil Servant</descn>
</item>
</dataset>
4. 下面组装数据,也分三个表格来显示
// 对应Array
var grid1 = new Ext.grid.GridPanel({
el: 'grid1',
ds: ds1,
cm: cm
});
grid1.render();
// 对应Json
var grid2 = new Ext.grid.GridPanel({
el: 'grid2',
ds: ds2,
cm: cm
});
grid2.render();
// 对应Xml
var grid3 = new Ext.grid.GridPanel({
renderTo: 'example-grid',
ds: ds3,
cm: cm,
title: 'HelloWorld',
autoHeight: 'true'
})
其中,grid1和grid2中都有个el属性以及render()方法,这个意思是,当执行该方法的时候,会自动去找页面中id=xxx的标签,然后在里面插入表格;效果跟grid3中的方式是一样的。
5. 页面代码(举例)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Grid3 Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="testGrid.js"></script>
<link rel="stylesheet" type="text/css" href="grid-examples.css" />
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<h1>TestGrid Example1</h1>
<p>Note that the js is not minified so it is readable. See <a href="testGrid.js">testGrid.js</a>.</p>
<div id="grid1"></div><br/>
<div id="grid2"></div><br/>
<div id="example-grid"></div>
</body>
</html>
其中的testGrid.js的内容就是上面的js代码,注意要写在
Ext.onReady(function(){})事件中哦!
分享到:
相关推荐
我的资源不需要积分 EXT2.0 GRID 示例 很实用
ext2.0 grid 分页实例(php)
1.3. 看看ext-2.0的文档 1.4. 为什么有的例子必须放在服务器上才能看到效果? 1.5. 为什么自己按照例子写的代码,显示出来总找不到图片 1.6. 我们还需要什么? 1.7. 入门之前,都看helloworld。 1.7.1. 直接使用下载...
最近空闲时间在学习Ext2.0框架,只有一个字的感叹“强”,我从未想到JS代码能够写出这么绚丽的Web页面出来,以前看到YUI,惊若天人,如今看到EXT2.0的东西,更是感觉震撼。
唉,当然他们说英文不好懂,于是,我就看完了Ext官方网站的介绍,然后把该网站介绍--Ext2.0开发指南完整翻写成了简体中文,并且使用Ext2.2调试出来,因为--该官方网站给出的是Ext 2.0版本,有的代码跑不出来,比如...
Ext2.0框架的Grid的使用 开放前台 美观页面
ext2.0的源码 和一些example,如:grid的写法,grid的拖拽,树的拖拽等等
通过ext2.0.rar可以创建相当完美的Grid.该Grid支持本地、远程排序,动态调整列宽以及列的顺序等。
本示例实现Ext2.0的 Grid列锁定,用到了扩展类,代码为C# MVC。下载代码便可以运行查看效果,可以根据需要配置你自己实际的需要。
Ext+2.0+Grid的增删改查.txtExt+2.0+Grid的增删改查.txtExt+2.0+Grid的增删改查.txtExt+2.0+Grid的增删改查.txtExt+2.0+Grid的增删改查.txtExt+2.0+Grid的增删改查.txt
是一个Ext的插件,用于对Grid列进行扩展的工具,想增加列就增加,想减少列就减少,机动性非常的强,非常实用。
再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间推拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...
ext2.2添加了很多强大的功能! Ext2.2 的功能比2.0又增进了许多,grid之间的拖动,单选按钮也有了,弹出窗口还多了地图缩放,多选项的移动。
本文实例讲述了JSP+EXt2.0实现分页的方法。分享给大家供大家参考。具体如下: JavaScript代码: Ext.onReady(function(){ var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([ ...
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
2.2. 让我们搞一个grid出来耍耍吧。 2.3. grid默认自带的功能 2.4. 按顺序,咱们先要把常见功能讲到 2.4.1. 自主决定每列的宽度 2.4.2. 让grid支持按列排序 2.4.3. 中文排序是个大问题 2.5. 让单元格里显示红色的字...
根据网络上已有的导出代码,替换ext2.0中的函数和属性为ext5.0版本。 无选择项默认导出全表。 未考虑grid分页的情况。 默认设置导出文件名为grid中name属性+当天年月日。 没有研究出data uri协议导出excel文件时动态...
ext5.0 根据网络上的导出文件替换ext2.0中的函数和属性。 无选择项默认导出全表。 未考虑grid分页的情况。 默认设置导出文件名为grid中name属性+当天年月日。 没有研究出data uri协议导出excel文件时动态修改文件名...
使用Ajax技术在ExtGrid插件中展示数据,这是一个开源的JavaScript Jabber Messenger,采用Ext2.0与Prototype开发,界面比较美观
我从未想到JS代码 看到YUI,惊若天人,如今看到EXT2.0的东西,更是感觉震撼