Extjs分页数据与后台交互

自己就是记记笔记，欢迎讨论，测试通过

1，前端代码

这里最重要的就是：：1）路径：url:"role/search.do"

                                        2)配置json数据格式：例如：[{"total":50,"rows":[{"a":"3","b":"4"}]}];其中total，rows必须跟reader里一一对应

                                          3) 前端传来数据:例如：String start=req.getParameter("start");

                                                                              String limit=req.getParameter("limit");还可以得到其它值，为什么这样得到这个值，我也不懂

 Ext.onReady(function(){  

     var roleStore=Ext.create('Ext.data.Store',{

         fields: [{name : "id"},

                     {name : "name"},

                     {name : "age"},

                     {name:"createTime"}

                    ],

            pageSize: 20,  //页容量5条数据

            //是否在服务端排序 （true的话，在客户端就不能排序）

            remoteSort: true,

            remoteFilter: true,

            proxy: {

                type: 'ajax',

                url: "role/search.do",

                reader: {   //这里的reader为数据存储组织的地方，下面的配置是为json格式的数据，例如：[{"total":50,"rows":[{"a":"3","b":"4"}]}]

                    type: 'json', //返回数据类型为json格式

                    root: 'rows',  //数据

                    totalProperty: 'total'

                }

            },

            sorters: [{

                //排序字段。

                property:'id',

                //排序类型，默认为 ASC

                direction:'desc'

            }],

            listeners : {

                'load' : function(store, records, options) {                

                    grid.getSelectionModel().deselectAll();

                    grid.getSelectionModel().select(0);

                }

            },

            autoLoad: true  //即时加载数据

     });

    

     var grid=Ext.create('Ext.grid.Panel', {

         renderTo: 'grid',

            store: roleStore,

            autoScroll: 'auto',

            region: 'center',

            // layout:'fit',

            selModel: {

                selType: 'checkboxmodel'

            }, // 选择框

            columns: [

                      { text: 'ID', dataIndex: 'id', align: 'left', width: 50},

                      { text: '姓名', dataIndex: 'name',  minWidth: 300 },

                      { text: '年龄', dataIndex: 'age',  minWidth: 300 },

                      { text: '创建时间', dataIndex: 'createTime',  minWidth: 300 },

              ],

            bbar: [{

                xtype: 'pagingtoolbar',

                store: roleStore,

                displayMsg: '显示 {0} - {1} 条，共计 {2} 条',

                emptyMsg: "没有数据",

                beforePageText: "当前页",

                afterPageText: "共{0}页",

                displayInfo: true

            }],

            listeners: {

                'itemclick': function(view, record, item, index, e) {

                    // Ext.MessageBox.alert("提示",record.data.guid.guid);

                }

                

            },

            tbar: [{

                text: '新增',

                 iconCls:'a_add',

                handler: ""

            }, "-", {

                text: '编辑',

                handler: ""

            }, "-", {

                text: '知识点',

                handler: ""

            }, "-", {

                text: '标签',

                handler: ""

            }, "-",{

                text: '删除',

                handler: ""

            },"-", {

                text: "搜索",

                handler: ""

            }],

            height: "100%"

     });

        });  

     

2。后台代码

package com.tedu.note.web;

import java.util.Map;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import com.tedu.note.entity.RoleManager;

//@SuppressWarnings("serial")

@Controller

@RequestMapping("/role")

public class RoleController extends HttpServlet{

    @RequestMapping("/search.do")

    @ResponseBody

    public void search(RoleManager role,HttpServletRequest req,

            HttpServletResponse res, HttpSession httpSession){

        String st
9419
art=req.getParameter("start");

        String limit=req.getParameter("limit");

        System.out.println(start+" "+limit);

        

         try{  

                int index = Integer.parseInt(start);  

                int pageSize = Integer.parseInt(limit);  

                System.out.println(index);  

                System.out.println(pageSize);  

                  

                String json = "{total:100,rows:[";  

                for(int i = index;i<pageSize+index;i++){  

                    json +="{id:"+i+",name:'name"+i+"',age:'desc"+i+"'}";  

                    if(i!=pageSize + index - 1){  

                        json+=",";  

                    }  

                }  

                json+="]}";  

                res.getWriter().write(json);  

            }catch(Exception e){  

                e.printStackTrace();  

            }  

        //return null;

        

    }

}