让我们搞一个grid出来耍耍吧

功能丰富，无人能出其右

无论是界面之美，还是功能之强，ext的表格控件都高居榜首。

单选行，多选行，高亮显示选中的行，推拽改变列宽度，按列排序，这些基本功能咱们就不提了。

自动生成行 ，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。

呵呵~不过ext也不是万能的，与fins的ecside比较，ext不能锁定列（土豆说1.x里支持锁定列，但是2.0里没有了，因为影响效率。），也没有默认的统计功能，也不支持excel，pdf等导出数据。另外fins说，通过测试ecside的效率明显优于ext呢。:)

2.2. 让我们搞一个grid出来耍耍吧。

光说不练不是我们的传统，让我们基于examples里的例子，来自己搞一个grid看看效果，同时也可以知道一个grid到底需要配置些什么东西。

首先我们知道表格肯定是二维的，横着叫行，竖着叫列。跟设计数据库，新建表一样，我们要先设置这个表有几列，每列叫啥名字，啥类型，咋显示，这个表格的骨架也就出来了。

ext里，这个列的定义，叫做ColumnModel，简称cm的就是它，它作为整个表格的列模型，是要首先建立起来的。

这里我们建立一个三列的表格，第一列叫编 (code)，第二列叫名称(name)，第三列叫描述(descn)。

var cm = new Ext.grid.ColumnModel([
{header:’编 ’,dataIndex:’id’},
{header:’名称’,dataIndex:’name’},
{header:’描述’,dataIndex:’descn’}
]);看到了吧简单的定义了三列，每列的header表示这列的名称，dataIndex是跟后面的东西对应的，咱们暂且不提。现在只要知道有了三列就可以了。

有了表格的骨架，现在我们要向里边添加数据了。这个数据当然也是二维了，为了简便，我们学习examples里的array-grid.js里的方式，把数据直接写到js里。

var data = [
[‘1′,’name1′,’descn1’],
[‘2′,’name2′,’descn2’],
[‘3′,’name3′,’descn3’],
[‘4′,’name4′,’descn4’],
[‘5′,’name5′,’descn5’]
];很显然，我们这里定义了一个二维数据， （什么知道这是二维数组行吧，这里不是你该待的地方。）

这个有五条记录的二维数组，显示到grid里就应该是五行，每行三列，正好对应这id,name,descn，在我们的脑子里应该可以想像出grid显示的结果了，为了让想像变成显示，我们还需要对原始数据做一下转化。

因为咱们希望grid不只能支持array，还可以支持json，支持xml，甚至支持咱们自己定义的数据格式，ext为咱们提供了一个桥梁，Ext.data.Store，通过它我们可以把任何格式的数据转化成grid可以使用的形式，这样就不需要为每种数据格式写一个grid的实现了。现在咱们就来看看这个Ext.data.Store是如何转换array的。

var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: ‘id’},
{name: ‘name’},
{name: ‘descn’}
])
});
ds.load();ds要对应两个部分：proxy和reader。proxy告诉我们从哪里获得数据，reader告诉我们如何解析这个数据。

现在我们用的是Ext.data.MemoryProxy，它是专门用来解析js变量的。你可以看到，我们直接把data作为参数传递进去了。

Ext.data.ArrayReader专门用来解析数组，并且告诉我们它会按照定义的规范进行解析，每行读取三个数据，第一个叫id，第二个叫name，第三个descn。是不是有些眼熟，翻到前面cm定义的地方，哦，原来跟dataIndex是对应的。这样cm就知道哪列应该显示那条数据了。唉，你要是能看明白这一点，那你实在是太聪明了。

记得要执行一次ds.load()，对数据进行初始化。

有兄弟可能要问了，要是我第一列数据不是id而是name，第二列数据不是name而是id咋办嗯，这个使用就用mapping来解决。改改变成这样：

var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: ‘id’, mapping: 1},
{name: ‘name’, mapping: 0},
{name: ‘descn’, mapping: 2}
])
});
这样如截图所见，id和name两列的数据翻转了。如此这般，无论数据排列顺序如何，我们都可以使用mapping来控制对应关系，唯一需要注意的是，索引是从0开始的，所以对应第一列要写成mapping:0，以此类推。

哈哈，万事俱备只欠东风，表格的列模型定义好了，原始数据和数据的转换都做好了，剩下的只需要装配在一起，我们的grid就出来了。

var grid = new Ext.grid.Grid(‘grid’, {
ds: ds,
cm: cm
});
grid.render();注意：上头是ext-1.x的写法，Ext.grid.Grid的第一个参数是渲染的id，对应在html里应该有一个 的东西，这样grid才知道要把自己画到哪里。

创建完grid以后，还要用grid.render()方法，让grid开始渲染，这样才能显示出来。

好了，把所有代码组合到一起，看看效果吧。

var cm = new Ext.grid.ColumnModel([
{header:’编 ’,dataIndex:’id’},
{header:’名称’,dataIndex:’name’},
{header:’描述’,dataIndex:’descn’}
]);
var data = [
[‘1′,’name1′,’descn1’],
[‘2′,’name2′,’descn2’],
[‘3′,’name3′,’descn3’],
[‘4′,’name4′,’descn4’],
[‘5′,’name5′,’descn5’]
];
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: ‘id’},
{name: ‘name’},
{name: ‘descn’}
])
});
ds.load();
var grid = new Ext.grid.Grid(‘grid’, {
ds: ds,
cm: cm
});
grid.render();看看吧，这就是咱们搞出来的grid了。

html例子是lingo-sample/1.1.1目录下的02-01.html，把这个目录copy到ext-1.x的example目录下，就可以直接打开观看效果。

2.3. 上边那个是1.x的，2.0稍微有些不同哦

首先，Ext.grid.Grid已经不见了，咱们需要用Ext.grid.GridPanel。需要传递的参数也有少许区别。

var grid = new Ext.grid.GridPanel({
el: ‘grid’,
ds: ds,
cm: cm
});看到了吗指定渲染位置的id放到了{}里边，对应的名字是el。似乎ext2里对这些参数进行了统一，比以前更整齐了。

因为其他地方都一样，我就不多说了，html例子在是lingo-sample/2.0目录下的02-01.html。

从截图上看，少了斑马条，下边多了一条线，应该只是css有所不同吧。

默认情况下，两个版本的grid都可以拖拽列，也可以改变列的宽度。不知道怎么禁用这两个功能呢。

最大的不同应该是1.x里默认支持的右键效果，在2.0里不见了。

按shift和ctrl多选行的功能倒是都有。区别是，全选后，1.x必须按住ctrl才能取消，直接单击其中一个行，不会取消全选功能，而2.0里只需要任意点击一行，就取消全选，只选中刚才点击的那行。

哦，哦，那颜色不要也算是区别吧。

2.4. 按顺序，咱们先要把常见功能讲到，让grid支持按列排序

其实很简单，需要小小改动一下列模型。

var cm = new Ext.grid.ColumnModel([
{header:’编 ’,dataIndex:’id’,sortable:true},
{header:’名称’,dataIndex:’name’},
{header:’描述’,dataIndex:’descn’}
]);如果你英语还可以，或者懂得查字典的话（软件翻译也算），那么你就会知道，多出来的这个sortable属性应该是可以排序的意思。现在咱们试一下改动后的效果。

看到了没有的标题上有个小小的箭头，表格里的数据也是按照编 做的逆序排列，如此简单，我们就实现了按列排序。

很有趣的是，2.0加上sortable以后，1.x那种右键功能也跑回来了，不过它用的不是右键，而是下拉菜单似的实现方式。

什么为什么其他两列无法排序，好像是因为你还没有给另两列添加sortable属性。

怎么加编 那样加就行了。

还是不会_-。

var cm = new Ext.grid.ColumnModel([
{header:’编 ’,dataIndex:’id’,sortable:true},
{header:’名称’,dataIndex:’name’,sortable:true},
{header:’描述’,dataIndex:’descn’,sortable:true}
]);这样所有列都可以排序了。什么取消排序_-。

唉，这就是区别啊。为啥你就不能动手做些东西呢道向别人要这要那，唉。

首先，我宣布，偶们的数据要扩充啦，每个人要加上一个性别字段。

var data = [
[‘1′,’male’,’name1′,’descn1′],
[‘2′,’female’,’name2′,’descn2′],
[‘3′,’male’,’name3′,’descn3′],
[‘4′,’female’,’name4′,’descn4′],
[‘5′,’male’,’name5′,’descn5′]
];男女搭配，干活不累撒。而且现在中国就是男多女少，我就还没对象呢。征婚中，单身女性加(QQ)771490531详谈。

你可以试试不改其他的部分，显示的结果是不会改变的，因为原始数据要经过ds的处理才能被grid使用，那么下一步我们就开始修改ds，把性别加进去。

var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: ‘id’},
{name: ‘sex’},
{name: ‘name’},
{name: ‘descn’}
])
});添加了一行{name: ‘sex’}，把数组的第二列映射为性别。现在grid可以感觉到sex了，嘿嘿。

不过grid还显示不了性别这列，因为咱们还没改cm。

var cm = new Ext.grid.ColumnModel([
{header:’编 ’,dataIndex:’id’},
{header:’性别’,dataIndex:’sex’},
{header:’名称’,dataIndex:’name’},
{header:’描述’,dataIndex:’descn’}
]);到现在其实都没什么新东西，但是你不觉得光看平板字，很难分出哪个是GG哪个是MM吗过红男绿女没男的都加上红色，女的都变成绿色，那不是清楚多了。就像下面一样。

怎么样是效果大不同了。你不会认为很难吧，嗯，确实，如果你对html和css完全搞不明白的话，劝你还是先去学学吧，对自己有信心的往下看。

var cm = new Ext.grid.ColumnModel([
{header:’编 ’,dataIndex:’id’},
{header:’性别’,dataIndex:’sex’,renderer:function(value){
if (value == ‘male’) {
return “红男“;
} else {
return “绿女“;
}
}},
{header:’名称’,dataIndex:’name’},
{header:’描述’,dataIndex:’descn’}
]);别被吓到，这么一大段其实就是判断是男是女，然后配上颜色。你要是觉得乱，也可以这么做。

function renderSex(value) {
if (value == ‘male’) {
return “红男“;
} else {
return “绿女“;
}
}
var cm = new Ext.grid.ColumnModel([
{header:’编 ’,dataIndex:’id’},
{header:’性别’,dataIndex:’sex’,renderer:renderSex},
{header:’名称’,dataIndex:’name’},
{header:’描述’,dataIndex:’descn’}
]);实际上这个renderer属性至关重要，它的值是一个function，哦，你说不知道js里function可以这么用恭喜你，现在你知道了。

renderer会传递个参数进去，咱们grid里看到的，是这个函数的返回值，怎么样，神奇吧br>
同志们，你们也应该看到了，返回html就可以，是html啊，html里有的东西，你返回什么就显示什么，颜色，链接，图片，按钮，只要你愿意，整个 页都可以返回回去。还有什么做不到的你不会html，那没辙，回去学吧。

咱们先来个图片。

function renderSex(value) {
if (value == ‘male’) {
return “红男

function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
var str = ““”这个单元格的值是：”” + value + “”\n”” +
“”这个单元格的配置是：{cellId:”” + cellmeta.cellId + “”

value是当前单元格的值

cellmeta里保存的是cellId单元格id，id不知道是干啥的，似乎是列 ，css是这个单元格的css样式。

record是这行的所有数据，你想要什么，record.data[“”id””]这样就获得了。

rowIndex是行 ，不是从头往下数的意思，而是计算了分页以后的结果。

columnIndex列 太简单了。

store，这个厉害，实际上这个是你构造表格时候传递的ds，也就是说表格里所有的数据，你都可以随便调用，唉，太厉害了。

有个同学就问啦：EXT render的参数，是如何得到的呢。因为你讲的那些都是EXT自己内部的。它是如何把这些参数传递给render的呢br>
这个问题其实比较简单，只是你们想复杂了。既然是函数，就肯定有调用它的地方，你找到GridView.js在里边搜索一下renderer，就会看到调用render的地方，这些参数都是在这里传进去的。

好，看看效果吧。

剩下的，就是发挥各位聪明才智的时候了，舞台已经搭好，看你如何表演了。

html例子，1.x版本在lingo-sample/1.1.1目录下的02-02.html，2.0的版本在lingo-sample/2.0目录下的02-02.html。

2.6. 更进一步，自动行 和多选checkbox

实际上行 和多选checkbox都是renderer的延伸，当然多选checkbox更酷一点儿，两者经常一起使用，所以让我们放在一起讨论好了。

2.6.1. 自动行

只需要在cm中加上一行，这一行不会与ds中的任何数据对应，这也告诉我们可以凭空制作列，哈哈。

在之前的例子上改啦。

var cm = new Ext.grid.ColumnModel([
{header:’NO.’