`
chenxueyong
  • 浏览: 342021 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

ExtJs grid使用详细[转]

阅读更多
2008-11-20 09:09

Ext2.0是一个javascript框架,它的Grid控件和其它可以显示数据的控件,能够支持多种数据类型,如二维数组、Json数据和XML数据,甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store,通过它我们可以把任何格式的数据转化成grid可以使用的形式,这样就不需要为每种数据格式写一个grid的实现了。

首先,一个表格应该有列定义,即定义表头ColumnModel:
// 定义一个ColumnModel,表头中有四列
var cm = new Ext.grid.ColumnModel([
     {header:
'编号',dataIndex:'id'
},
     {header:
'性别',dataIndex:'sex'
},
     {header:
'名称',dataIndex:'name'
},
     {header:
'描述',dataIndex:'descn'
}
]);
cm.defaultSortable
= true
;
    该ColumnModel定义了表格的四个列,其每列的名称和对应的数据键。请注意defaultSortable属性,即为每个列都安上一个可以排序的功能。如果只想某些列举有该功能,可以设置:
{header:'编号',dataIndex:'id',Sortable:true},

现在就来看看这个Ext.data.Store是如何转换三种数据的。

1.二维数组:
// ArrayData
var data = [
     [
'1','male','name1','descn1'
],
     [
'2','male','name1','descn2'
],
     [
'3','male','name3','descn3'
],
     [
'4','male','name4','descn4'
],
     [
'5','male','name5','descn5'
]
];
// ArrayReader
var ds = new Ext.data.Store({
     proxy:
new
Ext.data.MemoryProxy(data),
     reader:
new
Ext.data.ArrayReader({}, [
        {name:
'id',mapping: 0
},
         {name:
'sex',mapping: 1
},
         {name:
'name',mapping: 2
},
         {name:
'descn',mapping: 3
}
     ])
});
ds.load();
ds要对应两个部分:proxy和reader。proxy告诉我们从哪里获得数据,reader告诉我们如何解析这个数据。
现 在用的是Ext.data.MemoryProxy,它将内存中的数据data作为参数传递。Ext.data.ArrayReader专门用来解析数 组,并且告诉我们它会按照定义的规范进行解析,每行按顺序读取四个数据,第一个叫id,第二个叫sex,第三个叫name,第四个descn。这些是跟 cm定义中的dataIndex对应的。这样cm就知道哪列应该显示那条数据了。
mapping属性用于标记data中的读取后的数据与标头的映射关系,一般是不用设置的。但如果我们想让sex的数据中name栏中出现,可以设置mapping值。即id的mapping为2,后者为0。
记得要执行一次ds.load(),对数据进行初始化。

数据的显示显得非常简单:
HTML文件:
<div id='grid'></div>
JS文件:
var grid = new Ext.grid.GridPanel({
     el:
'grid'
,
     ds: ds,
     cm: cm
});
grid.render();

其显示结果为:

2.如何在表格中添加CheckBox呢?

var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),//自动行号
    sm,//添加的地方

    {header:'编号',dataIndex:'id'},
    {header:'性别',dataIndex:'sex'},
    {header:'名称',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
]);

var grid = new Ext.grid.GridPanel({
    el: 'grid3',
    ds: ds,
    cm: cm,
    sm: sm,//添加的地方
    title: 'HelloWorld'
});

3. 如何做Grid上触发事件呢?
下面是一个cellclick事件
grid.addListener('cellclick', cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
    var record = grid.getStore().getAt(rowIndex);   //Get the Record
    var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
    var data = record.get(fieldName);
    Ext.MessageBox.alert('show','当前选中的数据是'+data);
}

4.如何做Grid中做出快捷菜单效果
grid.addListener('rowcontextmenu', rightClickFn);//右键菜单代码关键部分
var rightClick = new Ext.menu.Menu({
    id:'rightClickCont', //在HTML文件中必须有个rightClickCont的DIV元素
    items: [
        {
            id: 'rMenu1',
            handler: rMenu1Fn,//点击后触发的事件
            text: '右键菜单1'
        },
        {
            //id: 'rMenu2',
            //handler: rMenu2Fn,
            text: '右键菜单2'
        }
    ]
});
function rightClickFn(grid,rowindex,e){
    e.preventDefault();
    rightClick.showAt(e.getXY());
}
function rMenu1Fn(){
   Ext.MessageBox.alert('right','rightClick');
}
其Grid如下:

5.如何将一列中的数据根据要求进行改变呢?
比如说性别字段根据其male或female改变显示的颜色,这种ColumnMode中设计:
var cm = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),
    sm,
    {header:'编号',dataIndex:'id'},
    {header:'性别',dataIndex:'sex',renderer:changeSex},
    {header:'名称',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;

function changeSex(value){
    if (value == 'male') {
        return "<span style='color:red;font-weight:bold;'>红男</span>";
    } else {
        return "<span style='color:green;font-weight:bold;'>绿女</span>";
    }
}

其它两种数据的Grid显示是相同的,其不同之处在于数据获取的过程:

6.Json数据
至于这种数据的类型请大家自己看Ajax的书籍:

//JsonData
var data = {
    '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' },
        { 'id': '4', 'sex': 'male','name':'Harolds', 'descn': 'elhaross@macfaq.com' }
    ],
    'musicians': [
        { 'id': '1', 'name': 'Clapton', 'descn': 'guitar' },
        { 'id': '2', 'name': 'Rachmaninoff', 'descn': 'piano' }
    ]
}
//ds使用的MemoryProxy对象和JsonReader对象
var ds = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.JsonReader({root: 'coders'}, [
            {name: 'id'},
            {name: 'sex'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
ds.load();

var grid = new Ext.grid.GridPanel({
    el: 'grid3',
    ds: ds,
    cm: cm,
    sm: sm,
    title: 'HelloWorld',
    autoHeight: true//一定要写,否则显示的数据会少一行
});
grid.render();

7.使用XML数据:
注意,读取XML数据必须在服务器上进行。
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>
</dataset>var ds3 = new Ext.data.Store({
    url: 'test.xml',   //XML数据
    reader: new Ext.data.XmlReader({record: 'item'}, [ //使用XmlReader对象
        {name: 'id'},
        {name: 'sex'},
        {name: 'name'},
        {name: 'descn'}
    ])
});

8.从服务器获取数据和数据翻页控件
从一个服务器文件,如ASP、JSP或Servlet中获得数据二维Array、JSON或XML数据,也可以被Ext读取,并被Grid显示:
服务器文件data.asp:
<%
    start = cint(request("start"))
    limit = cint(request("limit"))

    dim json
    json=cstr("{totalProperty:100,root:[")
   
    for i = start to limit + start-1
        json =json + cstr("{'id':'") +cstr(i) + cstr("','name':'name") + cstr(i) + cstr("','descn':'descn") + cstr(i) + cstr("'}")
        if i <> limit + start - 1 then
            json =json + ","
        end if
    next
    json = json +"]}"
    response.write(json)
%>

我们可以看到,这个页面会根据传入的start和limit的不同,返回不同的数据,其实质是个分页的代码。下面是start=0,limit=10的JSON数据:
{totalProperty:100,root:[{'id':'0','name':'name0','descn':'descn0'},{'id':'1','name':'name1','descn':'descn1'},{'id':'2','name':'name2','descn':'descn2'},{'id':'3','name':'name3','descn':'descn3'},{'id':'4','name':'name4','descn':'descn4'},{'id':'5','name':'name5','descn':'descn5'},{'id':'6','name':'name6','descn':'descn6'},{'id':'7','name':'name7','descn':'descn7'},{'id':'8','name':'name8','descn':'descn8'},{'id':'9','name':'name9','descn':'descn9'}]}

我们使用分页控件来控制Grid的数据:
Ext.onReady(function(){
    var sm = new Ext.grid.CheckboxSelectionModel();
   
    var cm = new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(),
        sm,
        {header:'编号',dataIndex:'id'},
        {header:'性别',dataIndex:'sex'},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ]);
    cm.defaultSortable = true;

    var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url:'data.asp'}),
        reader: new Ext.data.JsonReader({
            totalProperty: 'totalProperty',
            root: 'root'
        }, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    ds.load({params:{start:0,limit:10}});
   
    var grid = new Ext.grid.GridPanel({
        el: 'grid3',
        ds: ds,
        cm: cm,
        sm: sm,
        title: 'ASP->JSON',
        bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: ds,
            displayInfo: true,
            displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
            emptyMsg: "没有记录"
        }),
        tbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: ds,
            displayInfo: true,
            displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
            emptyMsg: "没有记录"
        })
    });
    grid.render();

})

10.如何在Grid的上方添加按钮呢?
添加按钮的关键之处在于tbar或bbar属性设置Toolbar工具条:
var grid = new Ext.grid.GridPanel({
    el: 'grid3',
    ds: ds,
    cm: cm,
    sm: sm,
    title: 'HelloWorld',
    tbar: new Ext.Toolbar({
        items:[
                {
                    id:'buttonA'
                    ,text:"Button A"
                    ,handler: function(){ alert("You clicked Button A"); }
                }
                ,
                new Ext.Toolbar.SplitButton({})
                ,{
                    id:'buttonB'
                    ,text:"Button B"
                    ,handler: function(){ alert("You clicked Button B"); }
                }
                ,
                '-'
                ,{
                    id:'buttonc'
                    ,text:"Button c"
                }
            ]
        })

});

11.将GridPanel放入一个Panel或TabPanel中
var tabs = new Ext.TabPanel({
    collapsible: true
    ,renderTo: 'product-exceptions'
    ,width: 450
    ,height:400
    ,activeTab: 0
    ,items:[
        {
            title: 'Unmatched'
        },{
            title: 'Matched'
        }
    ]
});
tabs.doLayout();

var panel = new Ext.Panel({
    renderTo: 'panel',
    title:'panel',
    collapsible:true,
    width:450,
    height:400,
    items:[grid] //管理grid
});

Panel必须有DIV存在。其包含的Component有items管理。

本文是在学习Ext2.0的基础上写的,因此,参考了许多网上存在的Blog文章。在此表示致敬!

分享到:
评论

相关推荐

    ExtJS grid过滤操作

    - **Local Filtering**:默认情况下,ExtJS Grid使用本地过滤,即在客户端对数据进行筛选,无需服务器交互。 - **实时更新**:当用户更改过滤条件时,Grid会即时更新视图,只显示匹配的数据行。 - **性能考虑**:...

    EXTJS grid导出EXCEL文件

    4. **源码使用**:提到“源码可以直接导入MYECLIPSE使用”,这意味着提供的是一个实际的代码示例,你可以直接在MyEclipse(一个流行的Java集成开发环境)中打开并运行,以便学习和理解如何实现EXTJS Grid到Excel的...

    ExtJs Grid选择行

    默认情况下,Grid使用`Ext.selection.RowModel`作为选择模型,允许用户通过点击行来选择数据记录。 当用户选择Grid中的行时,我们可以获取选中的记录。对于描述中提到的“返回选择行record”,我们可以通过监听`...

    Extjs4 grid使用例子

    在给定的"Extjs4 grid使用例子"中,我们可以深入理解如何在MVC架构下有效地利用ExtJS4的Grid组件。Grid组件是ExtJS中的核心部分,它提供了一个灵活的、可定制的数据展示网格,通常用于显示和操作大量数据。 1. **...

    extjs grid数据导出excel文件

    在EXTJS中,Grid控件是用于展示大量结构化数据的关键组件,具有丰富的功能和高度可定制性。本文将深入讲解EXTJS Grid如何实现数据导出到Excel文件的功能。 首先,我们要明白EXTJS Grid的数据导出到Excel的过程通常...

    extjs grid示例代码

    以下是对`ExtJS Grid`示例代码的详细解析: 1. **Grid的基本结构** - `Ext.grid.Panel`:这是Grid组件的基础类,它包含了一个可配置的列模型(column model)、数据源(store)以及视图配置。 - `store`:存储...

    extjs grid

    EXTJS Grid是EXTJS库中的一个核心组件,用于创建数据密集型的表格视图,它在Web应用程序中常用于展示和操作大量...通过学习和实践这些资源,开发者能够熟练掌握EXTJS Grid的使用,构建出功能强大的数据展示和管理界面。

    ExtJs grid多选时获取选中的所有值

    下面将详细介绍如何设置并使用`CheckboxSelectionModel`实现Grid的多选功能。 #### 三、配置CheckboxSelectionModel 1. **创建Store**:首先,我们需要创建一个Store来存储Grid的数据。在这个例子中,我们使用了...

    EXTJS Grid总结例子

    本总结例子将深入探讨EXTJS Grid的核心特性和使用方法,通过源代码分析,帮助开发者更好地理解和应用EXTJS Grid。 一、EXTJS Grid的基本结构 EXTJS Grid由多个部分组成,包括Store(数据存储)、Columns(列配置)...

    Extjs grid 中文排序问题修正

    本教程将详细讲解如何修正EXTJS Grid中的中文排序问题。 首先,我们需要理解EXTJS Grid的排序原理。EXTJS Grid的排序功能是基于其内部的Store对象实现的,Store中的每条记录都有一个对应的sortField和sortDir属性,...

    extjs grid 多表头插件

    在使用ExtJS Grid的多表头插件时,我们需要了解以下关键概念和组件: 1. Grouping Header(分组表头):这是实现多表头的基础,通过将一组列组合在一个表头下,可以创建分层的结构。每个分组表头可以有自己的标题和...

    Extjs grid分页1

    ExtJS Grid 分页是Web应用中数据展示的重要组成部分,它允许用户高效地浏览大量数据而无需一次性加载所有记录。在本文中,我们将深入探讨ExtJS Grid的分页功能及其实现方式。 首先,ExtJS Grid是一种强大的...

    Extjs Grid 扩展实例

    ExtJS Grid是一个强大的数据展示组件,它在Web应用程序中用于显示和操作大量数据。Grid提供了丰富的功能,包括分页、排序、过滤、编辑等,是ExtJS库中的核心组件之一。"Extjs Grid 扩展实例"是一个演示如何增强Grid...

    ExtJS GRID单元格合并

    总的来说,ExtJS 4.0 Grid的单元格合并功能是通过组合使用`columns`配置、`viewConfig`和自定义模板实现的。这不仅提高了数据展示的清晰度,也增强了用户体验。理解并熟练掌握这一特性,对于开发复杂的Web应用程序是...

    Extjs4.2 Grid filter Demo 表格过滤实验

    这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》

    Extjs Grid 操作大全

    根据提供的文件信息以及标题与描述,本文将详细探讨Extjs Grid的操作大全,特别是关于如何获取Grid中的各种值以及如何添加各种点击事件。 ### Extjs Grid 操作大全 #### 一、Extjs Grid简介 Extjs 是一个用...

    Extjs grid分页多选记忆功能

    很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候又向服务器请求了分页...

    ExtJS_grid.rar_Grid javascript_extjs grid

    这个"ExtJS_grid.rar"压缩包包含了关于学习ExtJS Grid的教程资源,特别是"第三节_ExtJS表格控件和树控件.pdf",它可能详细讲解了如何使用Grid以及与树形控件的结合。 1. **ExtJS Grid基本概念**: - **Grid Panel*...

    ExtJs grid导出Excel

    在ExtJs中,Grid组件是展示大量数据的重要工具,它提供了丰富的功能,包括排序、分页、筛选等。当需要将Grid中的数据导出到Excel时,可以采用两种方法,这些方法在ExtJs 4.2版本中已经得到很好的支持。 **方法一:...

    ExtJS笔记---Grid实现后台分页

    在IT行业中,ExtJS是一个广泛使用的JavaScript库,用于构建富客户端的Web应用程序。它提供了丰富的组件库,包括数据网格(Grid)等,使得开发者能够创建交互性极强的数据展示和管理界面。这篇“ExtJS笔记——Grid...

Global site tag (gtag.js) - Google Analytics