sencha touch实现分页

从客户端传过来的参数为:limit,start

服务端代码:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@page import="java.sql.SQLException"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="com.gr.jiang.json.JsonString"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
Connection con = null ;
ResultSet set  = null ;
PreparedStatement pre = null ;
 try{ 
   Class.forName("com.mysql.jdbc.Driver").newInstance() ;
  String url = "jdbc:mysql://localhost:3306/news_mobile" ;
  con = DriverManager.getConnection(url,"root","jiang") ;
  
  int pagecount = 0 ;
  String SEL = "SELECT * FROM books limit ?,?" ;
  String COU = "SELECT COUNT(*) FROM books" ;
  pre = con.prepareStatement(SEL) ;
  pre.setInt(1,Integer.parseInt(request.getParameter("start"))) ;
  pre.setInt(2,Integer.parseInt(request.getParameter("limit"))) ;
  set = pre.executeQuery() ;
  int count = 0 ;
  
  //JsonString json = new JsonString() ;
  String str = "[" ;
  while(set.next()){
      str += "{\"id\":\""+set.getInt("id")+"\",\"image_url\":\""
          +set.getString("image_url")+"\",\"book_name\":\""
          +set.getString("book_name")+"\",\"author\":\""
          +set.getString("author")+"\",\"description\":\""
          +set.getString("description")+"\"}," ;
     // json.start() ;
      //json.setJson("id",set.getInt("id")) ;
      //json.setJson("image_url",set.getString("image_url")) ;
      //json.setJson("book_name",set.getString("book_name")) ;
      //json.setJson("author",set.getString("author")) ;
      //json.setJson("description",set.getString("description")) ;
      //json.end() ;
      count = set.getRow() ;
  }
  str = str.substring(0,str.length()-1)+"]" ;
  //System.out.println(str) ;
  pre = con.prepareStatement(COU) ;
  set = pre.executeQuery() ;
 
  set.next() ;
      pagecount = set.getInt(1) ;
  
  if(count > 0){
      out.println("{\"success\":\"true\",\"bookCount\":\""+pagecount+"\",\"books\":"+str+"}") ;
  }
  else
  {
      out.println("{\"success\":\"false\",\"message\":\"读取数据失败\"}") ;
  }
 }catch(SQLException e){
     out.println("{\"success\":\"false\",\"message\":\"读取数据失败\"}") ;
     e.printStackTrace() ;
 }finally{
     set.close() ;
     pre.close() ;
     con.close() ;
     
 }
%>

客户端app.js:

Ext.require([
    'Ext.data.Store',
    'Ext.data.reader.Json',
    'Ext.dataview.DataView'
])
Ext.application({
    name: 'MyApp',
    icon: 'images/icon.png',
    glossOnIcon: false,
    phoneStartupScreen: 'images/phone_startup.png',
    tabletStartupScreen: 'images/tablet_startup.png',
    launch: function() { 
        Ext.define('BookInfo', {
            extend: 'Ext.data.Model',
            config:{ 
                fields:['image_url','book_name','author','description']
            }
        });
        var bookReader=Ext.create('Ext.data.reader.Json',{
            type: 'json',
            rootProperty: 'books',
            totalProperty:'bookCount'
        });
        var pageCount;//页数
        var bookStore=Ext.create('Ext.data.Store',{
            autoLoad:true,
            model:'BookInfo',
            proxy: {
                type: 'ajax',
                url : 'http://10.65.9.223:8080/news_mobile/json.jsp',
                reader: bookReader
            },
            pageSize:5,
            scope:this,
            listeners: {                 
                load:function(store,records,successful,operation) {  
                    //读取数据失败
                    if(!successful)
                        //弹出错误信息
                        Ext.Msg.alert(
                            this.getProxy().getReader().rawData.message
                        );
                    else
                    {
                        var recordCount=bookReader.rawData[bookReader.getTotalProperty()];
                        var pageSize=this.getPageSize();
                        pageCount=(recordCount-recordCount%pageSize)/pageSize;
                        if(recordCount%pageSize>0)
                            pageCount+=1;
                        Ext.getCmp('pageInfo').setText(
                            String(this.currentPage)+"/"+pageCount+"页"
                        );
                    }
                }
            }
        });
        var toolbar =Ext.create('Ext.Toolbar',{
            docked : 'bottom',  
            width:'100%',
            layout:{
                type:'hbox',
                pack:'center'
            },     
            items: [
            {
                iconMask:true,
                iconCls: 'firstpage',
                handler:function(){
                    bookStore.loadPage(1);
                }
            },
            {
                iconMask:true,
                iconCls: 'arrow_left',
                handler:function(){
                    if(bookStore.currentPage>1)
                    {
                        bookStore.previousPage();
                    }
                }
            },
            {
                iconMask:true,
                iconCls: 'arrow_right',
                handler:function(){
                    if(bookStore.currentPage<pageCount)
                    {
                        bookStore.nextPage();
                    }
                }
            },
            {
                iconMask:true,
                iconCls: 'lastpage',
                handler:function(){
                    bookStore.loadPage(pageCount);
                }
            },
            {
                html:'',
                style:'font-size:16px',
                id:'pageInfo'
            }]
        });

        
        var bookTemplate=new Ext.XTemplate( 
            '<tpl for=".">',             
            '<div class="Book_img"><img src="{image_url}"/></div>', 
            '<div class="Book_info">',
            '<h2>{book_name}</h2><br><h3>作者：{author}<h3>',
            '<p>{description:ellipsis(40)}</p>',
            '</div>',
            '</tpl>'                  
        ); 
        var dataview=Ext.create('Ext.DataView',{
            store:bookStore,
            items:toolbar,
            itemTpl:bookTemplate, 
            emptyText:'没有数据',           
            baseCls:'Book'
        });
        Ext.Viewport.add(dataview);
    }
});

HTML
 <!DOCTYPE html>
<html>
<head>
<title>对服务器端数据进行分页</title>
<link rel="stylesheet" href="css/application.css"
type="text/css">
<style type="text/css">
.Book-item {
    padding: 10px 0 10px 68px;
    border-top: 1px solid #ccc;
}
.Book-item h2 {
    font-weight: bold;
}
.Book-item .Book_img {
    position: absolute;
    left: 10px;
}
.Book-item .Book_img img {
    max-width: 59px;
}
.Book-item .Book_info{
    padding-left:5px;
    font-size:12px;
}
</style>
<script src="js/sencha-touch.js">
</script><script src="js/app.js"></script>
</head>
<body></body>
</html>