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

在之前的例子上改啦。

var cm = new Ext.grid.ColumnModel([
    {header:'NO.',renderer:function(value, cellmeta, record, rowIndex){
        return rowIndex + 1;
    }},
    {header:'编号',dataIndex:'id'},
    {header:'性别',dataIndex:'sex'},
    {header:'名称',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
]);
            

如吾等所愿，不指定dataIndex，而是直接根据renderer返回rowIndex + 1，因为它是从0开始的，所以加个一。截图如下。

1.x的例子在lingo-sample/1.1.1/02-03.html

很遗憾的是，2.0里有自己的默认实现了，咱们不能展现自己的手工技艺了，还是乖乖使用jack提供的东东吧。

于是，在2.0里cm就变成了这幅模样。

var cm = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),
    {header:'编号',dataIndex:'id'},
    {header:'性别',dataIndex:'sex'},
    {header:'名称',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
]);
            

你绝对会同意我的意见，Jack's work is amazing.实在是太神奇了。看看截图就知道。

2.0的例子在lingo-sample/2.0/02-03.html

因为2.0里有checkboxSelectionModel，这样完全可以证实用别人的轮子，比自己造轮子要方便。而且咱们造的轮子完全没有jack圆。不信的话，看下面1.x里的实现。

我们一直在修改cm，这次我们也要对它动刀了，不过SelectionModel既sm也要处理一下，这是为了改变单选和多选行的方式，以前这些可以靠shift或ctrl实现，而现在这些都要与checkbox关联上了。

啦啦啦，先看图片，后看代码。

先看看具体多了什么

var sm = new Ext.grid.CheckboxSelectionModel();
            

神奇的是这个sm身兼两职，使用的时候既要放到cm里，也要放到grid中。代码如下。

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: 'grid',
    ds: ds,
    cm: cm,
    sm: sm
});
            

然后你就可以得到效果啦，代码在lingo-sample/2.0/02-04.html。

理论上只需要给cm再加一列，像自动编号那样，不对应数据，只显示checkbox就可以了。难点就是checkbox与某一行被选择的时候要对应上，用checkbox选择上，sm里也要让这一行被选中，反之亦然。嗯，估计会比较复杂呢。

先放上显示checkbox的代码和截图：

var cm = new Ext.grid.ColumnModel([
    {header:'NO.',renderer:function(value, cellmeta, record, rowIndex){
        return rowIndex + 1;
    }},
    {header:'<input type="checkbox" onclick="selectAll(this)">',renderer:function(value, cellmeta, record, rowIndex){
        return '<input type="checkbox" name="cb">';
    }},
    {header:'编号',dataIndex:'id'},
    {header:'性别',dataIndex:'sex'},
    {header:'名称',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
]);
            

与sm对接的方面比较麻烦，好在extjs.com上已经有扩展了，或者你可以看看我们弄下来的。 看看1.x多选树的截图。

从图片可以清晰的看到，在grid下边多出来一行东东，包括了前一页，后一页，第一页，最后一页，刷新，以及提示信息。而我们不过写了如下几行代码而已，神奇呀。

var gridFoot = grid.getView().getFooterPanel(true);

var paging = new Ext.PagingToolbar(gridFoot, ds, {
    pageSize: 10,
    displayInfo: true,
    displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
    emptyMsg: '没有记录'
});
            

首先使用grid.getView().getFootPanel(true)，获得grid下边那一条，嘿嘿，人家grid就设计的这么好，脚底下专门留了地方让你放东西。我们老实不客气，把Ext.PagingToolbar放到上边，就可以显示分页工具条了。

这分页工具条可不是个摆设，你按了前一页，后一页，整个grid都要有反应才对，要不咱们费劲弄这个么东西过来干嘛呀？所以，我们在构造PagingToolbar的时候，不但告诉它，在gridFoot上显示，还告诉它，进行分页跳转的时候，要对ds也进行操作。这个ds就是grid用来获取和显示数据的，它一变整个grid都发生变化，嘿嘿~这就算共享数据模型了。厉害呀。

知道了分页的玄机，让我们揉揉眼睛，好好看看里边的参数。

最好要注意的是，这段代码必须放在grid.render()之后，估计是因为动态生成grid的dom后，才能获得对应的footPanel。

现在给出例子，1.x的例子在lingo-sample/1.1.1/02-05.html。

其实，在下，一直，对于：必须先渲染grid才能获得footPanel这事非常愤恨，你想啊，本来分页也应该属于初始化的一部分，现在却要先初始化grid，配置完毕，渲染，回过头来再从grid里把footPanel拿出来，再咕哝分页的配置。真，真，真郁闷呀。

所以2.0里的方式，简直大快民心。

var grid = new Ext.grid.GridPanel({
    el: 'grid',
    ds: ds,
    cm: cm,
    bbar: new Ext.PagingToolbar({
        pageSize: 10,
        store: ds,
        displayInfo: true,
        displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
        emptyMsg: "没有记录"
    })
});
ds.load();
            

嘿嘿，加一个bbar的参数就可以了，bbar就是bottom bar啦，底端工具条。

不过还是要注意一点，与1.x中不同的是，如果配置了分页工具条，ds.load()就必须在构造grid以后才能执行，否则分页工具条会不起作用。看来分页工具条会把自己和ds做一些关联，来完成与grid共享数据模型的。

对了，还有一点不同，1.x中分页条不会随着浏览器的大小改变，自动放缩，这点在2.0中也解决了。

2.0的例子在lingo-sample/2.0/02-05.html。

grid会每次都显示ds中所有的数据，咱们没法利用静态数据好好演示分页，于是，必须写后台脚本，让ext与后台进行数据交互才能看到真实的分页效果。

咱们尽量在原来的基础上修改啊，把注意力集中在关键部位，一次性突破。

我不会其他语言，后台就用jsp写啦。有个好消息是只要返回的数据格式一样，ext才不管后台是什么写的呢。也就是这样，不管你以后用什么实现后台，前台的ext代码都一样。

<%
String start = request.getParameter("start");
String limit = request.getParameter("limit");
try {
    int index = Integer.parseInt(start);
    int pageSize = Integer.parseInt(limit);

    String json = "{totalProperty:100,root:[";
    for (int i = index; i < pageSize + index; i++) {
        json += "{id:" + i + ",name:'name" + i + "',descn:'descn" + i + "'}";
        if (i != pageSize + index - 1) {
            json += ",";
        }
    }
    json += "]}";
    response.getWriter().write(json);
} catch(Exception ex) {
}
%>
            

下面我们来解读这段jsp代码：

结果经过了一番折腾，我们的jsp已经确定可以返回我们所需要的数据了。现在我们可以忘掉后台是用什么语言写的了，直接切入ext代码，看看它是怎么样才能跑去后台获得这些数据呢？

因为引入了json作为数据传输格式，这次我们要对ext代码进行一次大换血了，请做好思想准备。

最后，我们就可以使用分页条上那些按钮试试分页了。呵呵~就这么简单。

1.x的例子在lingo-sample/1.1.1/02-06.html，jsp文件在lingo-sample/1.1.1/grid.jsp，下面是它的截图：

有趣的是，1.x中，不需要为div指定高度，它自己就知道如何显示，不晓得为什么2.0里不这样做呢。

2.0的例子在lingo-sample/2.0/02-06.html，jsp文件在lingo-sample/2.0/grid.jsp，下面是它的截图：

我的意思是，grid除了FootPanel以外，还有HeaderPanel，意思就是头顶上的面板。我们把分页条放在上面也不会有任何问题。1.x中的代码仅仅是将getFooterPanel改成getHeaderPanel，这样分页条就跑到上头去了。

var gridHead = grid.getView().getHeaderPanel(true);

var paging = new Ext.PagingToolbar(gridHead, ds, {
    pageSize: 10,
    displayInfo: true,
    displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
    emptyMsg: '没有记录'
});
            

1.x的例子可以在lingo-sample/1.1.1/02-07.html找到。

2.0就更简单了，只需要改一个字母，b -> t，呵呵~，让原来的bbar（bottom bar）变成tbar（top bar）就可以让我们的工具条登天了。

var grid = new Ext.grid.GridPanel({
    el: 'grid',
    ds: ds,
    cm: cm,
    tbar: new Ext.PagingToolbar({
        pageSize: 10,
        store: ds,
        displayInfo: true,
        displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
        emptyMsg: "没有记录"
    })
});
            

2.0的例子可以在lingo-sample/2.0/02-07.html找到。

呃，当然你可以让上下都加上分页条，反正它们最后都是共享一个ds，功能不会有任何问题哈。吼吼。