Ext2.0 学习系列(转) ------- Ext Grid （一）

最新推荐文章于 2024-05-18 23:14:50 发布

huoming550

最新推荐文章于 2024-05-18 23:14:50 发布

阅读量92

点赞数

分类专栏： EXT 文章标签： EXT json XML 框架

本文链接：https://blog.csdn.net/huoming550/article/details/83318917

版权

EXT 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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" />



<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>


<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" />


<link rel="stylesheet" type="text/css" href="../examples.css" />

</head>
<body>
<script type="text/javascript" src="../examples.js"></script>
<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(){})事件中哦！

huoming550

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext2.0 学习系列(转) ------- Ext Grid （一）

Ext2.0 学习系列(转) ------- Ext Grid （一）现在的JS框架已经越来越多了，新兴的一些框架使用率上升非常快，因此不能落后啊！最近开始学习Ext2.0，据说功能非常强大，呵呵！无论是界面之美，还是功能之强，ext的表格控件都高居榜首。单选行，多选行，高亮显示选中的行，推拽改变列宽度，按列排序，这些基本功能咱们就不提了。下面记录我的学习点滴。如何用三种基...
复制链接

扫一扫