关于EXT-JS分页问题请教
本帖最后由 aptweasel 于 2013-01-27 16:02:59 编辑 最近初学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,
scripeRows : true
},
multiSelect : true,//支持多选
selModel : {
selType : 'checkboxmodel'//复选框选择模式Ext.selection.CheckboxModel
},
store : store,
columns : [//配置表格列
Ext.create('Ext.grid.RowNumberer', {
text : '行号',
width : 35
}), {
header : "参数名称",
width : 200,
//sortable : false,
dataIndex : 'name'
}, {
header : "参数值",
width : 100,
//sortable : false,
dataIndex : 'value'
}, {
header : "描述",
width : 300,
//sortable : false,
dataIndex : 'common'
} ],
tbar : [ {
xtype : 'buttongroup',
items : [ {
text : 'Add',
icon : '../images/add.gif',
scale : 'medium'
}, {
text : 'Edit',
icon : '../images/edit.gif',
scale : 'medium',
handler : function() {
//获取被操作的数据记录
var msg = '';
var rows = grid.getSelectionModel().getSelection();
if (rows.length == 0) {
alert('请选择一行编辑');
} else if (rows.length > 1) {
alert('只能选择一行编辑');
} else {
alert('编辑' + rows[0].get('name'));
}
}
}, {
text : 'Delete',
icon : '../images/del.gif',
scale : 'medium',
handler : function() {
var msg = '';
var rows = grid.getSelectionModel().getSelection();
if (rows.length == 0) {
alert('请至少选择一行');
} else {
for ( var i = 0; i < rows.length; i++) {
msg = msg + rows[i].get('name') + '\n';
}
alert(msg);
}
}
} ]
} ],
dockedItems : [ {
xtype : 'pagingtoolbar',
pageSize : itemsPerPage,
store : store, // same store GridPanel is using
dock : 'bottom',
emptyMsg: "没有记录",
displayInfo : true
} ]
});
});
</script>
</head>
<BODY STYLE="margin: 0px"></BODY>
</html>
用于管理页面回显数据的页system/configList.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ page import="java.util.*"%>
<%@ page import="com.dc.bus.system.PropertiesConfig"%>
<%@ page import="net.sf.json.JSONArray"%>
<%
int start=Integer.parseInt(request.getParameter("start"));
int limit=Integer.parseInt(request.getParameter("limit"));
System.out.println("start:"+start+",limit:"+limit);
PropertiesConfig pc=new PropertiesConfig();
List list=new ArrayList();
for(int i=start;i<start+limit;i++){
if(i==pc.listProperties().size()){
break;
}
list.add(pc.listProperties().get(i));
}
String str = JSONArray.fromObject(list).toString();
//System.out.println(ja.toString());
String user ="{'success': true,'total': "
+ pc.listProperties().size()+","
+ "'properties': "
+ str
+ "}";
System.out.println(user);
response.getWriter().write(user);
%>
从数据库取数据的java
/**
*
*/
package com.dc.bus.system;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import org.apache.log4j.Logger;
import com.dc.jdbc.LocalDB;
/**
* @author black
*
*/
public class PropertiesConfig {
private static final Logger log = Logger.getLogger(PropertiesConfig.class);
public List<HashMap> listProperties(){
List list=new ArrayList<HashMap>();
LocalDB localdb=new LocalDB();
String sql="SELECT INDEX_NO,NAME,VALUE,COMMON,IS_CONFIG FROM MON_SERVER_CONFIG where INDEX_NO<80 and INDEX_NO>20";
log.info(sql);
try {
Connection conn = localdb.getConnection();
Statement stmt = conn.createStatement();
ResultSet rs=stmt.executeQuery(sql);
while(rs.next()){
PropertyBean bean=new PropertyBean();
bean.setIndex_no(rs.getString("INDEX_NO"));
bean.setName(rs.getString("NAME"));
bean.setValue(rs.getString("VALUE"));
bean.setCommon(rs.getString("COMMON"));
bean.setIsConfig(rs.getString("IS_CONFIG"));
list.add(bean);
}
rs.close();
stmt.close();
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
}
下面是程序中用到的一个JAVABEAN
/**
*
*/
package com.dc.bus.system;
/**
* @author black
*
*/
public class PropertyBean {
private String index_no;
private String name;
private String value;
private String common;
private String isConfig;
/**
* 省略get set方法
*/
}
请各路大仙帮分析下，是什么原因，正确的方法应该是怎么样的，谢谢！
[解决办法]
我不是高手 ，但用过ext1 2 3 没有用过4
你的问题我没怎么看懂，真的，
ext grid 分页显示， 后台分页查询很麻烦么？
别喷我 呵呵
[解决办法]
没人回帖也不奇怪，你这一上来老长老长代码一贴，贴就贴了把，您老也用编辑器里的代码格式啊，这看了不头晕啊。。。
按你所说，就是没有实现分页效果了。我贴你一个正常的，你自己比对出错在哪里：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>分页</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/expand/RowEditor.js"></script>
<link rel="stylesheet" type="text/css" href="ext/expand/roweditorgrid.css" />
<script type="text/javascript" src="ext/ext-lang-zh_CN-utf8.js"></script>
</head>
<body>
<div id="grid"></div><br>
</body>
<script language="javascript">
Ext.onReady(function() {
var sm = new Ext.grid.CheckboxSelectionModel({handleMouseDown: Ext.emptyFn});
//建立列模型
var cm = new Ext.grid.ColumnModel([
sm,
{header:'编号',dataIndex:'id',sortable: true, editor: {xtype: 'numberfield'}},// sortable: true 排序1
{header:'名称',dataIndex:'name',sortable: true, editor: {xtype: 'textfield'}},
{header:'描述',dataIndex:'descn',sortable: true, editor: {xtype: 'textfield'}},
{header:'状态',dataIndex:'state',sortable: true, editor: {xtype: 'checkbox'}}
]);
var MyRecord = Ext.data.Record.create([
{name: 'id',type: 'int'},
{name: 'name',type: 'string'},
{name: 'descn',type: 'string'},
{name: 'state',type: 'checkbox'}
]);
var addstore = new Ext.data.Store({//用于存储新增行的数据
reader:new Ext.data.ArrayReader({},MyRecord)
});
//转化数据
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'PageServlet'}), //后台分页
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'data'
},[
{name: 'id'},
{name: 'name'},
{name: 'descn'},
{name: 'state'}
]),
//remoteSort: true,//后台排序
sortInfo:{field: 'id',direction: 'ASC'}//排序2
});
//装配
var pageSize = 10;
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
width: 1000,
height: 300,
plugins: [new Ext.ux.grid.RowEditor()],
loadMask: true,
autoHeight:true,
store: store,
cm: cm,
sm: sm,
viewConfig:{
columnsText: '要显示的列',//要显示的列
scrollOffset: 25,//为滚动条预留的宽度
forceFit: true
},
bbar: new Ext.PagingToolbar({
pageSize: pageSize,
store: store,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg: '没有记录'
})
});
store.load({
params:{
start: 0,
limit: pageSize
}
});
});
</script>
</html>
