博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

最简单的表格由以下几个元素组成:
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': mailto:%20brett@newInstance.com },
            { 'id': '2', 'sex': 'male','name':'Hunter', 'descn': mailto:%20jason@servlets.com },
            { 'id': '3', 'sex': 'female','name':'Harold', 'descn': mailto:%20elharo@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中的方式是一样的。