Extjs-表格 Ext.grid.GridPanel 分页------------------------------------------------
1.表格添加分页条
分页store不能使用Ext.data.SimpleStore,因为分页需要调用load(),load()与Proxy有关,SimpleStore不但没有设置Proxy,而且也没有重写load()所有会出现错误
2.通过后台脚本获取分页数据
JSON里面除了name就是value,如果是数字不用加引号,如果加引号就是字符串,如果用[]包裹就是数组,如果出现{}就是嵌套的JSON
list.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<%
String start = request.getParameter("start");
String limit = request.getParameter("limit");
int index = 0;//Integer.parseInt(start);
int pageSize = 4;//Integer.parseInt(limit);
String name = "李文超";
String descn = "李文超的描述";
String sex = "17";
String json = "{totalProperty : 10,root:[";
for(int i =index;i<pageSize+index;i++){
json+="{id:'"+i+"',name:'"+name+"',descn:'"+descn+"',sex:'"+sex+"'}";
if(i!=pageSize+index-1){
json+=",";
}
}
json+="]}";
System.out.println(json);
response.getWriter().write(json);
%>index.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<% String rootpath = request.getContextPath();%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script>
<script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script>
<!-- 带进度条的分页需要加下面这个文件 -->
<script type="text/javascript" src="<%=rootpath%>/ext/examples/ux/ProgressBarPager.js"></script>
<script type="text/javascript" defer>
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
var start = 0;
var limit = 3;
var params = {start:start,limit:limit};
var record = Ext.data.Record.create([
{name : 'id'},
{name : 'name'},
{name : 'descn'},
{name : 'sex'}
]);
var store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'list.jsp'
}),
reader : new Ext.data.JsonReader({
totalProperty : 'totalProperty',
root : 'root',
fields: record
})
});
var sm = new Ext.grid.CheckboxSelectionModel({
singleSelect : true //true表示只可以选择单行
});
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),sm,
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'},
{header:'性别',dataIndex:'sex'}
]);
var grid = new Ext.grid.GridPanel({
store : store,
height : 20,
cm : cm,
sm : sm,
bbar : new Ext.PagingToolbar({
pageSize : limit,//每页显示几条数据
store : store,
displayInfo : true,//是否显示数据信息
displayMsg : '显示第{0}条到{1}条记录,一种{2}条',//displayInfo:true时才有效,{0},{1}会自动被替换成数据
emptyMsg : '没有数据',//没有数据时显示
//带进度条的分页工具条
plugins : new Ext.ux.ProgressBarPager()
}),
listeners : {
'beforerender' : function(){
store.load({params:params});
}
}
});
new Ext.Viewport({
layout:'fit',
items: [grid]
});
});
</script>
</head>
<body>
</body>
</html>
3.本地数组读取数据,并且实现内存分页
<%@ page language="java" pageEncoding="UTF-8"%>
<% String rootpath = request.getContextPath();%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script>
<script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=rootpath%>/ext/PagingMemoryProxy.js"></script>
<!-- 带进度条的分页需要加下面这个文件 -->
<script type="text/javascript" src="<%=rootpath%>/ext/examples/ux/ProgressBarPager.js"></script>
<script type="text/javascript" defer>
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
var limit = 2;
var start = 0;
var data = [
['1','李文超','李文超的描述','male'],
['2','范勇','范勇的描述','female'],
['3','马新军','马新军的描述','male'],
['4','常高军','常高军的描述','female'],
['5','何卫国','何卫国的描述','male']
];
var store = new Ext.data.Store({
proxy : new Ext.data.PagingMemoryProxy(data),
reader : new Ext.data.ArrayReader({},[
{name : 'id',mapping:0},
{name : 'name',mapping:1},
{name : 'descn',mapping:2},
{name : 'sex',mapping:3},
])
});
store.load({params:{start:start,limit:limit}});
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),sm,
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'},
{header:'性别',dataIndex:'sex'}
]);
var grid = new Ext.grid.GridPanel({
store : store,
height : 20,
cm : cm,
sm : sm,
bbar : new Ext.PagingToolbar({
pageSize : limit,//每页显示几条数据
store : store,
displayInfo : true,//是否显示数据信息
//displayInfo:true时才有效,{0},{1}会自动被替换成数据
displayMsg : '显示第{0}条到{1}条记录,一种{2}条',
emptyMsg : '没有数据',//没有数据时显示
//带进度条的分页工具条
plugins : new Ext.ux.ProgressBarPager()
})
});
new Ext.Viewport({
layout:'fit',
items: [grid]
});
});
</script>
</head>
<body>
</body>
</html>