extjs分页与PHP交互,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 start=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;ijson +="{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;

}

}