`

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

    博客分类:
  • EXT
阅读更多
现在的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 <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组件是EXT库中的核心部分,它允许开发者以表格形式显示数据,并提供了一系列功能,如排序、分页、筛选、编辑等。GRID不仅外观美观,而且性能高效,能够处理大量数据并提供流畅的用户体验。 在EXT2.0 ...

    GWT-EXT2.0最佳实践教程,源代码打包供下载

    《GWT-EXT2.0最佳实践教程》源代码打包下载资源主要涵盖了Google Web Toolkit (GWT) 和EXT-JS 2.0的结合使用,提供了丰富的实践案例和示例代码,旨在帮助开发者深入理解和应用这两项技术。GWT是一款强大的JavaScript...

    EXT2.0学习资料.rar

    总之,这些资料为学习EXT2.0提供了全面的资源,包括理论知识、实践指导和源代码分析,对于希望提升EXT2.0开发技能的人来说是一份宝贵的学习材料。通过这些资源,开发者可以深入了解EXT2.0的核心特性和应用场景,并...

    ext2.0 详解和API

    7. **丰富的图表组件**:EXT2.0提供了一系列图表组件,如柱状图、饼图、线图等,用于数据可视化。 **EXT2.0 API** EXT2.0的API是其强大的基础,它包含了大量预定义的类和方法,供开发者在构建应用时调用。API分为...

    EXT2.0-API

    EXT2.0-API是关于EXT JavaScript库的一个重要版本的接口文档。EXT是一个广泛使用的前端开发框架,特别是用于构建数据驱动的Web应用程序。EXT2.0是EXT库的一个里程碑,引入了许多增强功能和改进,使开发者能够创建...

    Ext2.0组件,全组件和帮助手册

    Ext2.0包含了一系列的UI组件,如面板(Panel)、表格(Grid)、表单(Form)、菜单(Menu)、按钮(Button)、工具栏(Toolbar)、树形视图(Tree)等。这些组件都具有高度可配置性和可扩展性,能够满足各种复杂的...

    Ext2.0框架的Grid使用介绍

    Grid是Ext2.0中用于展示数据的重要组件之一,它不仅能够显示各种格式的数据(如二维数组、JSON或XML),还支持数据的排序、过滤和分页等功能。Grid的核心在于`Ext.grid.GridPanel`类及其相关的配置项。 ##### 1. ...

    ext2.0的源码和一些example

    EXT 2.0是Sencha公司开发的一个JavaScript框架,主要用于构建富互联网...总之,EXT 2.0的源码和示例为开发者提供了一条深入理解EXT工作机制的路径,通过学习和实践,我们可以构建出功能强大、交互丰富的Web应用程序。

    ext 2.0 源码 下载

    1. **组件系统**:EXT 2.0拥有一个强大的组件模型,包括窗口(Window)、表格(Grid)、面板(Panel)、按钮(Button)等。这些组件可以方便地组合和嵌套,实现复杂界面布局。 2. **数据绑定**:EXT 2.0支持数据...

    EXT2.0中文教程

    1.3. 看看ext-2.0的文档 1.4. 为什么有的例子必须放在服务器上才能看到效果? 1.5. 为什么自己按照例子写的代码,显示出来总找不到图片 1.6. 我们还需要什么? 1.7. 入门之前,都看helloworld。 1.7.1. 直接使用下载...

    EXT2.0中文API

    EXT2.0是一款广泛应用于构建富互联网应用(Rich Internet Applications,RIA)的JavaScript库,它提供了丰富的UI组件和强大的数据管理功能,使开发者能够创建出具有桌面级用户体验的网页应用。 EXT2.0的中文API文档...

    ext2.0 grid 分页实例(php)

    总的来说,Ext JS 2.0 Grid分页实例与PHP的结合,是前后端协同工作的一个典型示例,通过合理的数据分页策略,可以有效地处理大数据集,提供流畅的用户体验。在实际开发中,可以根据项目需求进行调整和优化,例如添加...

    Ext2.0框架的grid使用

    本文将深入探讨Ext2.0框架下Grid的使用方法,涵盖其基本配置、数据绑定以及高级特性如CheckBox的集成,旨在帮助开发者快速掌握并高效利用这一工具。 #### Grid组件概述 Grid组件在Ext2.0框架中主要用于展示表格...

    ext2.0.rar

    这个压缩包"ext2.0.rar"包含了EXT Grid 2.0的所有资源和文件,帮助开发者实现描述中提到的各种高级特性。 1. **本地与远程排序**: 在EXT Grid 2.0中,用户可以对显示的数据进行本地排序,这意味着排序操作在客户端...

    ext 2.0

    4. **表单组件**:EXT 2.0 提供了一系列完善的表单元素,如文本框、复选框、下拉列表等,并且支持复杂的表单布局和验证。 5. **Panel**:EXT 2.0 的 Panel 组件可作为容器承载其他组件,具有可折叠、标题、工具栏等...

    ext2.0正式版本

    EXT 2.0 正式版本的发布标志着一个重要的里程碑,EXT 是一款广泛使用的JavaScript库,专注于构建富互联网应用程序(RIA)。EXT 提供了丰富的组件和功能,使得开发者能够创建功能强大、用户界面友好的Web应用。EXT ...

    Ext2.2开发指南--完整翻写Ext官方网站学习指南介绍

    唉,当然他们说英文不好懂,于是,我就看完了Ext官方网站的介绍,然后把该网站介绍--Ext2.0开发指南完整翻写成了简体中文,并且使用Ext2.2调试出来,因为--该官方网站给出的是Ext 2.0版本,有的代码跑不出来,比如...

    Ext 2.0 中文api 天涯浪子

    5. **表格和网格**:Grid Panel是Ext 2.0的一个重要组件,用于显示和操作大量数据。它支持排序、分页、编辑等功能,并可通过Column Model进行自定义。 6. **表单组件**:Ext 2.0提供了丰富多样的表单组件,如...

    Ext2.0 概述.doc

    EXT2.0是EXT框架的一次重大更新,它带来了许多改进和新功能,旨在提高开发者的体验和应用程序的性能。以下是对EXT2.0中关键知识点的详细解释: 1. **组件模型 (Component Model)**: 在EXT2.0中,Component和...

Global site tag (gtag.js) - Google Analytics