java extjs4 分页_Extjs分页使用Java实现数据库数据查询

var obj = this;

var pageSize = 20;   //统计结果分页每一页显示数据条数

//在这里使用Store来创建一个类似于数据表的结构，因为需要远程获取数据，所以应该使用

//HttpProxy类，我是从后台读取的是json数据格式的数据，所以使用JsonReader来解析；

var proxy = new Ext.data.HttpProxy({

url:"com.test.check.servlets.QueryDetailServlet"

});

var statTime = Ext.data.Record.create([

{name:"rowNo",type:"string",mapping:"rowNo"},

{name:"gpsid",type:"string",mapping:"gpsid"},

{name:"policeName",type:"string",mapping:"policeName"}

]);

var reader = new Ext.data.JsonReader({

totalProperty:"count", //此处与后台json数据中相对应，为数据的总条数

root:"data"      //这里是后台json数据相对应

},statTime);

var store = new Ext.data.Store({

proxy:proxy,

reader:reader

});

//定义分页工具条

var bbarObj = new Ext.PagingToolbar({

pageSize: pageSize,

store: store,

width: 300,

displayInfo: true,      //该属性为需要显示分页信息是设置

//这里的数字会被分页时候的显示数据条数所自动替换显示

displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',

emptyMsg: "没有记录",

prependButtons: true

});

在我的项目中使用的是GridPanel来进行显示数据表，所以定义如下：

var grid = new Ext.grid.GridPanel({

store: store,

columns: [

{header:'序号',width: 33, sortable: true,dataIndex:'rowNo',align:'center'},

{id:'gpsid',header:'GPS编号',width: 85, sortable: true,dataIndex:'gpsid',align:'center'},

{header:'警员名称',width: 90, sortable: true,dataIndex:'policeName',align:'center'}

],

region:'center',

stripeRows: true,

title:'统计表',

autoHeight:true,

width:302,

autoScroll:true,

loadMask:true,

stateful: true,

stateId: 'grid',

columnLines:true,

bbar:bbarObj   //将分页工具栏添加到GridPanel上

});

//在以下方法中向后台传送需要的参数，在后台servlet中可以使用

//request.getParameter("");方法来获取参数值；

store.on('beforeload',function(){

store.baseParams={

code: code,

timeType: timeType,

timeValue: timeValue

}

});

//将数据载入，这里参数为分页参数，会根据分页时候自动传送后台

//也是使用request.getParameter("")获取

store.reload({

params:{

start:0,

limit:pageSize

}

});

duty.leftPanel.add(grid); //将GridPanel添加到我项目中使用的左侧显示栏

duty.leftPanel.doLayout();

duty.leftPanel.expand();  //左侧显示栏滑出