ext2.0.2+jsp分页简单实现

最新推荐文章于 2021-03-11 23:07:21 发布

软件-攻城狮

最新推荐文章于 2021-03-11 23:07:21 发布

阅读量585

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/smshuxue/article/details/12956197

版权

JavaScript 专栏收录该内容

67 篇文章 0 订阅

订阅专栏

    当访问1.html时，会执行extcs.js中的代码，用ajax技术请求1.jsp中的信息，取得数据后分页显示。1.jsp中数据必须是json数据，以便于取回到extcs.js文件后处理显示。  
      
    1.jsp源码  
     <%@ page language="java" contentType="text/html; charset=utf-8"  
        pageEncoding="utf-8"%>  
      
    <%  
        String start=request.getParameter("start");  
        String limit=request.getParameter("limit");  
          
        try{  
            int index=Integer.parseInt(start);  
            int pageSize=Integer.parseInt(limit);  
            String json="{total:100,root:[";  
            for(int i=index;i<pageSize+index;i++){  
                json+="{id:"+i+",name:'name"+i+"',color:'color"+i+"'}";  
                if(i!=pageSize+index-1){  
                    json+=",";  
                }  
            }  
            json+="]}";  
            out.write(json);  
            }catch(Exception e){  
                  
            }  
          
    %>

    1.html源码  
    <html>  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <title>Hello World</title>  
    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />  
    <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>  
    <script type="text/javascript" src="../ext-all.js"></script>  
    <script type="text/javascript" src="../build/locale/ext-lang-zh_CN.js"></script>  
    <script type="text/javascript" src="extcs.js"></script>  
    </head>  
    <body>  
    <div id="grid"></div>  
    </body>  
    </html>

    var sm=new Ext.grid.CheckboxSelectionModel({handleMouseDown:Ext.emptyFn});  
    var store=new Ext.data.Store(  
    {proxy:new Ext.data.HttpProxy({url:'1.jsp'}),  
    reader:new Ext.data.JsonReader(  
    {totalProperty:'total',root:'root'},  
    [{name:'id'},{name:'name'},{name:'color'}]  
    )})  
    var grid=new Ext.grid.GridPanel(  
    {renderTo:'grid',  
    store:store,  
    autoHeight:true,  
    cm:cm,  
    sm:sm,  
    enableColumnMove:true,  
    enableColumnResize:true,  
     loadMask:true,   
    bbar:new Ext.PagingToolbar(  
    { pageSize:10,   
    store:store,   
    displayInfo:true,   
    displayMsg:'显示{0}条到{1}条记录,一共{2}条',  
     emptyMsg:'没有记录'   
    }),   
    viewConfig:{ forceFit:true } })  
    store.load({params:{start:0,limit:10}});

效果显示