只需要在cm中加上一行，這一行不會(huì)與ds中的任何數(shù)據(jù)對應(yīng)，這也告訴我們可以憑空制作列，哈哈。

在之前的例子上改啦。

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，而是直接根據(jù)renderer返回rowIndex + 1，因?yàn)樗菑?開始的，所以加個(gè)一。截圖如下。

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

很遺憾的是，2.0里有自己的默認(rèn)實(shí)現(xiàn)了，咱們不能展現(xiàn)自己的手工技藝了，還是乖乖使用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'}
]);

你絕對會(huì)同意我的意見，Jack's work is amazing.實(shí)在是太神奇了。看看截圖就知道。

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

因?yàn)?.0里有checkboxSelectionModel，這樣完全可以證實(shí)用別人的輪子，比自己造輪子要方便。而且咱們造的輪子完全沒有jack圓。不信的話，看下面1.x里的實(shí)現(xiàn)。

我們一直在修改cm，這次我們也要對它動(dòng)刀了，不過SelectionModel既sm也要處理一下，這是為了改變單選和多選行的方式，以前這些可以靠shift或ctrl實(shí)現(xiàn)，而現(xiàn)在這些都要與checkbox關(guān)聯(lián)上了。

啦啦啦，先看圖片，后看代碼。

先看看具體多了什么

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

神奇的是這個(gè)sm身兼兩職，使用的時(shí)候既要放到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再加一列，像自動(dòng)編號那樣，不對應(yīng)數(shù)據(jù)，只顯示checkbox就可以了。難點(diǎn)就是checkbox與某一行被選擇的時(shí)候要對應(yīng)上，用checkbox選擇上，sm里也要讓這一行被選中，反之亦然。嗯，估計(jì)會(huì)比較復(fù)雜呢。

先放上顯示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上已經(jīng)有擴(kuò)展了，或者你可以看看我們弄下來的。 看看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就設(shè)計(jì)的這么好，腳底下專門留了地方讓你放東西。我們老實(shí)不客氣，把Ext.PagingToolbar放到上邊，就可以顯示分頁工具條了。

這分頁工具條可不是個(gè)擺設(shè)，你按了前一頁，后一頁，整個(gè)grid都要有反應(yīng)才對，要不咱們費(fèi)勁弄這個(gè)么東西過來干嘛呀？所以，我們在構(gòu)造 PagingToolbar的時(shí)候，不但告訴它，在gridFoot上顯示，還告訴它，進(jìn)行分頁跳轉(zhuǎn)的時(shí)候，要對ds也進(jìn)行操作。這個(gè)ds就是grid用 來獲取和顯示數(shù)據(jù)的，它一變整個(gè)grid都發(fā)生變化，嘿嘿~這就算共享數(shù)據(jù)模型了。厲害呀。

知道了分頁的玄機(jī)，讓我們?nèi)嗳嘌劬?，好好看看里邊的參?shù)。

最好要注意的是，這段代碼必須放在grid.render()之后，估計(jì)是因?yàn)閯?dòng)態(tài)生成grid的dom后，才能獲得對應(yīng)的footPanel。

現(xiàn)在給出例子，1.x的例子在lingo-sample/1.1.1/02-05.html。

其實(shí)，在下，一直，對于：必須先渲染grid才能獲得footPanel這事非常憤恨，你想啊，本來分頁也應(yīng)該屬于初始化的一部分，現(xiàn)在卻要先初始化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();

嘿嘿，加一個(gè)bbar的參數(shù)就可以了，bbar就是bottom bar啦，底端工具條。

不過還是要注意一點(diǎn)，與1.x中不同的是，如果配置了分頁工具條，ds.load()就必須在構(gòu)造grid以后才能執(zhí)行，否則分頁工具條會(huì)不起作用?？磥矸猪摴ぞ邨l會(huì)把自己和ds做一些關(guān)聯(lián)，來完成與grid共享數(shù)據(jù)模型的。

對了，還有一點(diǎn)不同，1.x中分頁條不會(huì)隨著瀏覽器的大小改變，自動(dòng)放縮，這點(diǎn)在2.0中也解決了。

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

grid會(huì)每次都顯示ds中所有的數(shù)據(jù)，咱們沒法利用靜態(tài)數(shù)據(jù)好好演示分頁，于是，必須寫后臺(tái)腳本，讓ext與后臺(tái)進(jìn)行數(shù)據(jù)交互才能看到真實(shí)的分頁效果。

咱們盡量在原來的基礎(chǔ)上修改啊，把注意力集中在關(guān)鍵部位，一次性突破。

我不會(huì)其他語言，后臺(tái)就用jsp寫啦。有個(gè)好消息是只要返回的數(shù)據(jù)格式一樣，ext才不管后臺(tái)是什么寫的呢。也就是這樣，不管你以后用什么實(shí)現(xiàn)后臺(tái)，前臺(tái)的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代碼：

結(jié)果經(jīng)過了一番折騰，我們的jsp已經(jīng)確定可以返回我們所需要的數(shù)據(jù)了。現(xiàn)在我們可以忘掉后臺(tái)是用什么語言寫的了，直接切入ext代碼，看看它是怎么樣才能跑去后臺(tái)獲得這些數(shù)據(jù)呢？

因?yàn)橐肓薺son作為數(shù)據(jù)傳輸格式，這次我們要對ext代碼進(jìn)行一次大換血了，請做好思想準(zhǔn)備。

最后，我們就可以使用分頁條上那些按鈕試試分頁了。呵呵~就這么簡單。

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，意思就是頭頂上的面板。我們把分頁條放在上面也不會(huì)有任何問題。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就更簡單了，只需要改一個(gè)字母，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: "沒有記錄"
    })
});