Ext中的简单grid例子 - hwoarangzk的博客

作者在 2008-03-18 13:02:37 发布以下内容

        正在学习《Ext2.0 简明实用教程》中。今天看的是一个grid例子。
        首先，需要导入几个必要的文件：ext-all.css, ext-base.js, ext-all.js，以及resource目录。这些都可以到extjs.com去下载到。
        新建一个grid.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

</body>

</html>
要注意导入的文件顺序。在这个页面中，就只有一个id为my_grid的div元素。
然后是my_grid.js:

Ext.onReady(function(){

var cm = new Ext.grid.ColumnModel([

{header:'Num',dataIndex:'id'},

{header:'Name',dataIndex:'name'},

{header:'Description',dataIndex:'descn'},

{header:'Address',dataIndex:'addr'}

]);

var data = [

['1','Michael','descn1','USA'],

['2','Scofield','descn2','Fox'],

['3','T-bag','descn3','River'],

['4','Abruzzi','descn4','Prison']

];

var ds = new Ext.data.Store({

proxy: new Ext.data.MemoryProxy(data),

reader: new Ext.data.ArrayReader({}, [

{name: 'id'},

{name: 'name'},

{name: 'descn'},

{name: 'addr'}

])

});

ds.load();

var grid = new Ext.grid.GridPanel({

el: 'my_grid',

ds: ds,

cm: cm

});

grid.render();

});
        然后运行服务器就可以看到出来了一张表格了。
        首先，我们要定义一个ColumnModel。这个决定了一张表有多少列以及列名，还有列名的id。然后这里为了方便，直接定义了data（《越狱》里的人，哈哈）。当然，还有其他方式获取数据，以后学到了再说。定义好数据之后，就要将这些数据映射到刚刚定义的表中，即使用Ext.data.Store来实现。MemoryProxy中的参数就是刚刚定义好的数据，ArrayReader来映射到表的每一列中。记住要ds.load()一下来初始化数据。然后，就是要显示这张表了。使用Ext.grid.GridPanel来实现。第一个参数el是在页面中表的位置。也就是说，在页面中需要一个<div id="my_grid"></div>来放这张表，然后的参数就是刚刚定义的ds和cm了，最后使用render来显示出这张表就可以了。
        Ext做出来的东西是有趣啊，选中的内容高亮显示，改变列的宽度，拖曳列。不错不错，很有意思。