Extjs+Servlet+Jsp+MySql分页

分页的例子paging.js ， 不过只是前台代码，不过没关系，聊胜于无。一个字：改！下面是成果：
      DataGrid.js
Js代码
Ext.onReady(function(){  
    // create the Data Store  
    var store = new Ext.data.JsonStore({  
        root: 'bugs',  
        totalProperty: 'totalCount',  
        idProperty: 'threadid',  
        remoteSort: true,  
        fields: [  
            'id', 'name', 'date', 'origin',  
        ],  
        proxy: new Ext.data.HttpProxy({  
            //url:'http://localhost:8080/ExtjsPaging/Bug',  
            url:'../Bug',  
            method:'GET'
        })  
    });    
    var grid = new Ext.grid.GridPanel({  
        width:550,  
        height:300,  
        title:'ExtJS.com - Browse Forums',  
        store: store,  
        trackMouseOver:false,  
        disableSelection:true,  
        loadMask: true,  
        // grid columns  
        columns:[{  
            header: "Id",  
            dataIndex: 'id',  
            width: 220,  
            sortable: false
        },{  
            header: "Name",  
            dataIndex: 'name',  
            width: 100,  
            sortable: false
        },{  
            header: "Date",  
            dataIndex: 'date',  
            width: 70,  
            align: 'right',  
            sortable: false
        },{  
            header: "Origin",  
            dataIndex: 'origin',  
            width: 150,  
            sortable: false
        }],  
        // paging bar on the bottom  
        bbar: new Ext.PagingToolbar({  
            pageSize: 5,  
            store: store,  
            displayInfo: true,  
            displayMsg: 'Displaying topics {0} - {1} of {2}',  
            emptyMsg: "No topics to display",  
            items:[  
                '-', {  
                pressed: true,  
                enableToggle:true,  
                text: 'Show Preview',  
                cls: 'x-btn-text-icon details',  
                toggleHandler: function(btn, pressed){  
                    var view = grid.getView();  
                    view.showPreview = pressed;  
                    view.refresh();  
                }  
            }]  
        })  
    });  
    // render it  
    grid.render('topic-grid');  
    // trigger the data store load  
    store.load({params:{start:0, limit:5}});  
});
Ext.onReady(function(){
    // create the Data Store
    var store = new Ext.data.JsonStore({
        root: 'bugs',
        totalProperty: 'totalCount',
        idProperty: 'threadid',
        remoteSort: true,
        fields: [
            'id', 'name', 'date', 'origin',
        ],
        proxy: new Ext.data.HttpProxy({
            //url:'http://localhost:8080/ExtjsPaging/Bug',
            url:'../Bug',
            method:'GET'
        })
    });
    var grid = new Ext.grid.GridPanel({
        width:550,
        height:300,
        title:'ExtJS.com - Browse Forums',
        store: store,
        trackMouseOver:false,
        disableSelection:true,
        loadMask: true,
        // grid columns
        columns:[{
            header: "Id",
            dataIndex: 'id',
            width: 220,
            sortable: false
        },{
            header: "Name",
            dataIndex: 'name',
            width: 100,
            sortable: false
        },{
            header: "Date",
            dataIndex: 'date',
            width: 70,
            align: 'right',
            sortable: false
        },{
            header: "Origin",
            dataIndex: 'origin',
            width: 150,
            sortable: false
        }],
        // paging bar on the bottom
        bbar: new Ext.PagingToolbar({
            pageSize: 5,
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
            items:[
                '-', {
                pressed: true,
                enableToggle:true,
                text: 'Show Preview',
                cls: 'x-btn-text-icon details',
                toggleHandler: function(btn, pressed){
                    var view = grid.getView();
                    view.showPreview = pressed;
                    view.refresh();
                }
            }]
        })
    });
    // render it
    grid.render('topic-grid');
    // trigger the data store load
    store.load({params:{start:0, limit:5}});
});

     这前台没什么好说的，本来用的是ScriptTagProxy，我试了一下没成功，原因还没弄清楚，可能是回传数据的问题，以后再研究。个人感觉这些js这些东西的关键就是如何实现前后台数据的交互。

     BugDataServlet

Java代码
package org.shelocks.extjspaging;  

import java.io.IOException;  
import java.io.PrintWriter;  
import java.util.List;  
import javax.servlet.ServletException;  
import javax.servlet.http.HttpServlet;  
import javax.servlet.http.HttpServletRequest;  
import javax.servlet.http.HttpServletResponse;  
import org.apache.jasper.tagplugins.jstl.core.ForEach;  
import org.shelocks.extjspaging.dao.BugDao;  
import org.shelocks.extjspaging.domain.Bug;  

/**
*
* @author shelocks
*/
public class BugDataServlet extends HttpServlet {  

    @Override
    public void init() throws ServletException {  
    }  

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {  
        String start = req.getParameter("start");  
        String limit = req.getParameter("limit");  

        String sql = "select * from bug LIMIT " + start + "," + limit;  

        BugDao bugDao = new BugDao();  
        List<Bug> list = bugDao.queryBySql(sql);  

        StringBuilder sb = new StringBuilder();  
        sb.append("{totalCount:14,bugs:[");  
        for (Bug bug : list) {  
            sb.append("{");  
            sb.append("id:" + bug.getId());  
            sb.append(",name:" + "\'" + bug.getName() + "\'");  
            sb.append(",date:" + "\'" + bug.getDate() + "\'");  
            sb.append(",origin:" + "\'" + bug.getOrigin() + "\'");  
            sb.append("},");  

        }  
        String json = sb.substring(0, sb.length() - 1);  
        json += "]}";  
        resp.setContentType("text/html");  
        resp.setCharacterEncoding("UTF-8");  
        PrintWriter out = resp.getWriter();  
        out.println(json);  
        out.close();  
    }  

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {  
        doGet(req, resp);  
    }  

    @Override
    public void destroy() {  
    }  
}
package org.shelocks.extjspaging;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.jasper.tagplugins.jstl.core.ForEach;
import org.shelocks.extjspaging.dao.BugDao;
import org.shelocks.extjspaging.domain.Bug;

/**
*
* @author shelocks
*/
public class BugDataServlet extends HttpServlet {

    @Override
    public void init() throws ServletException {
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String start = req.getParameter("start");
        String limit = req.getParameter("limit");

        String sql = "select * from bug LIMIT " + start + "," + limit;

        BugDao bugDao = new BugDao();
        List<Bug> list = bugDao.queryBySql(sql);

        StringBuilder sb = new StringBuilder();
        sb.append("{totalCount:14,bugs:[");
        for (Bug bug : list) {
            sb.append("{");
            sb.append("id:" + bug.getId());
            sb.append(",name:" + "\'" + bug.getName() + "\'");
            sb.append(",date:" + "\'" + bug.getDate() + "\'");
            sb.append(",origin:" + "\'" + bug.getOrigin() + "\'");
            sb.append("},");

        }
        String json = sb.substring(0, sb.length() - 1);
        json += "]}";
        resp.setContentType("text/html");
        resp.setCharacterEncoding("UTF-8");
        PrintWriter out = resp.getWriter();
        out.println(json);
        out.close();
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }

    @Override
    public void destroy() {
    }
}
   Servlet的配置

Xml代码
<servlet>
    <servlet-name>Bug</servlet-name>
    <servlet-class>org.shelocks.extjspaging.BugDataServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>Bug</servlet-name>
    <url-pattern>/Bug</url-pattern>
</servlet-mapping>
    <servlet>
        <servlet-name>Bug</servlet-name>
        <servlet-class>org.shelocks.extjspaging.BugDataServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>Bug</servlet-name>
        <url-pattern>/Bug</url-pattern>
    </servlet-mapping>
     BugDataServlet负责从后台获得数据，转换为json格式。bug是数据库表，4个字段id、name、date、origin，Bug是相应的类。

     paging.jsp

Html代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Paging Grid Example</title>

        <link rel="stylesheet" type="text/css" href="../css/ext-all.css" />

        <!-- GC -->
        <!-- LIBS -->
        <script type="text/javascript" src="../Extjs/adapter/ext/ext-base.js"></script>
        <!-- ENDLIBS -->

        <script type="text/javascript" src="../Extjs/ext-all.js"></script>

        <script type="text/javascript" src="../js/DataGrid.js"></script>
        <link rel="stylesheet" type="text/css" href="../css/grid-examples.css" />

        <!-- Common Styles for the examples -->
        <link rel="stylesheet" type="text/css" href="../css/examples.css" />
    </head>
    <body>
        <script type="text/javascript" src="../js/examples.js"></script><!-- EXAMPLES -->
        <h1>Paging Grid Example</h1>
        <p>This example shows how to create a grid with paging. This grid uses a ScriptTagProxy to fetch cross-domain  
            remote data (from the Ext forums).</p>
        <p>Note that the js is not minified so it is readable. See <a href="../js/DataGrid.js">DataGrid.js</a>.</p>

        <div id="topic-grid"></div>

    </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Paging Grid Example</title>

        <link rel="stylesheet" type="text/css" href="../css/ext-all.css" />

        <!-- GC -->
        <!-- LIBS -->
        <script type="text/javascript" src="../Extjs/adapter/ext/ext-base.js"></script>
        <!-- ENDLIBS -->

        <script type="text/javascript" src="../Extjs/ext-all.js"></script>

        <script type="text/javascript" src="../js/DataGrid.js"></script>
        <link rel="stylesheet" type="text/css" href="../css/grid-examples.css" />

        <!-- Common Styles for the examples -->
        <link rel="stylesheet" type="text/css" href="../css/examples.css" />
    </head>
    <body>
        <script type="text/javascript" src="../js/examples.js"></script><!-- EXAMPLES -->
        <h1>Paging Grid Example</h1>
        <p>This example shows how to create a grid with paging. This grid uses a ScriptTagProxy to fetch cross-domain
            remote data (from the Ext forums).</p>
        <p>Note that the js is not minified so it is readable. See <a href="../js/DataGrid.js">DataGrid.js</a>.</p>

        <div id="topic-grid"></div>

    </body>
</html>