Extjs+Servlet+Jsp+MySql分页

corelengine

浏览: 107817 次
性别:
来自: 上海

最近访客更多访客>>

yuan191226

xuwenyan

bethianan

Jxdwuao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

框架组合

Servlet JSP MySQL EXT CSS

分页的例子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" />

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

        <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" />

        
        <link rel="stylesheet" type="text/css" href="../css/examples.css" />
    </head>
    <body>
        <script type="text/javascript" src="../js/examples.js"></script>
        <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>

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

<link rel="stylesheet" type="text/css" href="../css/examples.css" />
    </head>
    <body>
        <script type="text/javascript" src="../js/examples.js"></script>
        <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>

</body>
</html>

HotelMaster.part1.rar (7.6 MB)
下载次数: 87

分享到：

CSV文件操作 | ExtJS读取xml数据并显示在GridPanel

2011-01-17 23:09
浏览 3076
评论(2)
分类:Web前端
查看更多

2 楼 Java路 2011-04-14

解压还少了东西！

1 楼 Java路 2011-04-14

项目少包里呀！

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论