关于EXT-JS分页有关问题请问
日期：2014-05-17 浏览次数：20818 次
关于EXT-JS分页问题请教
最近初学EXT-JS，对它还不是很了解，网上没有找到好的解决办法，所以请教一下大家
我希望是一次性把所需要的数据全部查出来，写成一个JSMON数组，下放到页面， 这样在WEB页面上刷新时都是前台处理，以减少后台的请求压力。
但是实际情况是我发现，前台每次都把所有的数据全都加载到页面了
即，我设置每页10条，如果总共有59条记录，它会产生6页数据，每页都是59条。
然后我通过前台发到后台的参数，让页面每次只取中页面上应该取的数据，这样显示效果就对了，但是后台压力非常大。
即我每刷新一页，或翻页，它都会去后台请求，而且请求的次数是页面条数的两倍，即每次翻一页都要请求数据库20次，而且每次数据库请求都是取这所有的59条记录，到了前端根据分页信息再截取对应信息。
这样的话，分页不仅没有达到减轻服务器压力的初衷，反而成倍提高了服务器的压力，得不偿失。
我下面把源代码贴出来，请帮我看看应该如何修正，谢谢
数据库表结构
CREATE TABLE MON_SERVER_CONFIG
(
INDEX_NO NUMBER(8) NOT NULL,
NAME VARCHAR2(20 CHAR) NOT NULL,
VALUE VARCHAR2(40 CHAR) NOT NULL,
COMMON VARCHAR2(200 CHAR),
IS_CONFIG VARCHAR2(2 CHAR) NOT NULL
);
用于页面展示的页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<HTML>
<HEAD>
<TITLE>SmartMonitor</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css"
href="../ext-4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-4.0/bootstrap.js">
</script>
<script type="text/javascript"
src="../ext-4.0/locale/ext-lang-zh_CN.js">
</script>
<script type="text/javascript">
var ctxpath = '<%=basePath%>';
Ext.Loader.setConfig( {
enabled : true
});
Ext.Loader.setPath('Ext.ux', '../ext-4.0/ux/');
Ext.require( [ 'Ext.data.*', 'Ext.grid.*', 'Ext.util.*',
'Ext.ux.data.PagingMemoryProxy', 'Ext.ux.ProgressBarPager' ]);
Ext.onReady(function() {
var itemsPerPage = 20;//指定分页大小
var store = Ext.create('Ext.data.Store', {
autoLoad : {
start : 0,
limit : itemsPerPage
},
fields : [ 'name', 'value', 'common' ],
pageSize : itemsPerPage, //设置分页大小
proxy : {
type : 'ajax',
url : ctxpath + 'system/configList.jsp',
reader : {
type : 'json',
root : 'properties',
totalProperty : 'total'
}
}
});
//创建Grid表格组件
var grid = Ext.create('Ext.grid.Panel', {
renderTo : Ext.getBody(),
frame : true,
layout : 'fit',
ViewConfig : {
forceFit : true,
最近初学EXT-JS，对它还不是很了解，网上没有找到好的解决办法，所以请教一下大家
我希望是一次性把所需要的数据全部查出来，写成一个JSMON数组，下放到页面， 这样在WEB页面上刷新时都是前台处理，以减少后台的请求压力。
但是实际情况是我发现，前台每次都把所有的数据全都加载到页面了
即，我设置每页10条，如果总共有59条记录，它会产生6页数据，每页都是59条。
然后我通过前台发到后台的参数，让页面每次只取中页面上应该取的数据，这样显示效果就对了，但是后台压力非常大。
即我每刷新一页，或翻页，它都会去后台请求，而且请求的次数是页面条数的两倍，即每次翻一页都要请求数据库20次，而且每次数据库请求都是取这所有的59条记录，到了前端根据分页信息再截取对应信息。
这样的话，分页不仅没有达到减轻服务器压力的初衷，反而成倍提高了服务器的压力，得不偿失。
我下面把源代码贴出来，请帮我看看应该如何修正，谢谢
数据库表结构
CREATE TABLE MON_SERVER_CONFIG
(
INDEX_NO NUMBER(8) NOT NULL,
NAME VARCHAR2(20 CHAR) NOT NULL,
VALUE VARCHAR2(40 CHAR) NOT NULL,
COMMON VARCHAR2(200 CHAR),
IS_CONFIG VARCHAR2(2 CHAR) NOT NULL
);
用于页面展示的页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<HTML>
<HEAD>
<TITLE>SmartMonitor</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css"
href="../ext-4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-4.0/bootstrap.js">
</script>
<script type="text/javascript"
src="../ext-4.0/locale/ext-lang-zh_CN.js">
</script>
<script type="text/javascript">
var ctxpath = '<%=basePath%>';
Ext.Loader.setConfig( {
enabled : true
});
Ext.Loader.setPath('Ext.ux', '../ext-4.0/ux/');
Ext.require( [ 'Ext.data.*', 'Ext.grid.*', 'Ext.util.*',
'Ext.ux.data.PagingMemoryProxy', 'Ext.ux.ProgressBarPager' ]);
Ext.onReady(function() {
var itemsPerPage = 20;//指定分页大小
var store = Ext.create('Ext.data.Store', {
autoLoad : {
start : 0,
limit : itemsPerPage
},
fields : [ 'name', 'value', 'common' ],
pageSize : itemsPerPage, //设置分页大小
proxy : {
type : 'ajax',
url : ctxpath + 'system/configList.jsp',
reader : {
type : 'json',
root : 'properties',
totalProperty : 'total'
}
}
});
//创建Grid表格组件
var grid = Ext.create('Ext.grid.Panel', {
renderTo : Ext.getBody(),
frame : true,
layout : 'fit',
ViewConfig : {
forceFit : true,
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
