Ext 的分页数据无法显示，却仅是一个单引号没加上去，让我郁闷了两天
一，代码使用：Spring+struts+hibernate+ext实现
1，Action代码，后台处理数据：
//分页设置
public ActionForward pageSet(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
PageModel pageModel = customerManager.allCustomers();
int start;
int limit;
int total = pageModel.getTotal();
String json =null; //构造json形式 json = {id:"id",root:[{sn:'',name:''},{}]}数据
try{
start = Integer.parseInt(request.getParameter("start").toString());
limit = Integer.parseInt(request.getParameter("limit").toString());
List datas = pageModel.getDatas();
json = "{totalProperty:"+total+",root:[";
if (start + limit < total) { // start是从0开始的
for (int i = start; i < start + limit; i++) {// 可能有IndexOutOfBoundsException，数据越界,需if条件处理。
Customer customer = (Customer) datas.get(i);
json += "{sn:'" + customer.getSn() + "',name:'"
+ customer.getName() + "',evaluation:'"
+ customer.getEvaluation() + "',source:'"
+ customer.getSource() + "',createTime:'"
+ customer.getCreateTime() + "'}";
if (i != limit + start - 1) {
json += ",";
}
}
}
else {
for (int i = start; i < total; i++) {// 可能有IndexOutOfBoundsException，数据越界,需if条件处理。
Customer customer = (Customer) datas.get(i);
json += "{sn:'" + customer.getSn() + "',name:'" // 必须符合json的格式，不然也无法显示数据
+ customer.getName() + "',evaluation:'"
+ customer.getEvaluation() + "',source:'"
+ customer.getSource() + "',createTime:'"
+ customer.getCreateTime() + "'}";
if (i != total - 1) {
json += ",";
}
}
}
json+="]}";
response.setContentType("text/json;charset=GBK"); //json格式乱码处理
response.getWriter().write(json);
response.getWriter().close();
//关闭数据流，未关闭有些情况下会导致无法加载显示数据
}catch(Exception e) {
e.printStackTrace();
}
return null;
}
注意：
json += "{sn:'" + customer.getSn() + "',name:'"
+ customer.getName() + "',evaluation:'"
+ customer.getEvaluation() + "',source:'"
+ customer.getSource() + "',createTime:'"
+ customer.getCreateTime() + "'}";
就这里的单引号没加上去，让我郁闷了两天，才解决,汗
符合json格式：
json={id:'id',totalProperty:'totalProperty',root:[{sn:'XX',name:'XX'},{}}
所以这里要注意别忘了单引号，而且不能在json两边多加了[]，中括号；
下列代码，注重
var store = new Ext.data.Store({
proxy:new Ext.data.HttpProxy({url:"../customer.do?method=pageSet"}),//回到跟目录下
reader:new Ext.data.JsonReader({
totalProperty:'totalProperty',
root:'root',
successProperty :'success'
},fields), //List数据
，其他没什么变化。
2，js代码
Ext.onReady(function(){
// 格式化日期显示
function formatDate(value){
return value ? value.dateFormat('Y, M d') : '';
}
//获得总记录数
// var total;
// JCustomerManager.allCustomers(function(data) {
// total = data.total;
// });
// alert(total);
var fields = Ext.data.Record.create([
{name: 'sn', type: 'string' },
{name: 'name', type: 'string'},
{name: 'evaluation', type: 'string'},
{name: 'source', type: 'string'}, //客户来源
{name:'createTime',type:'date', dateFormat: 'Y/m/d'}
]);
// dataIndex 将特定的列映射到数据源(Data Store)中的数据列
//定义勾选框,不需要可以不定义
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),//增加自动编号，不需要可不定义
sm, //勾选框，不需要可不定义
{
id:'sn',
header: "编号",
dataIndex: 'sn'
// width:50
},
{
id:'name',
header: "客户名称",
dataIndex:'name',
// width:50,
editor: new Ext.form.TextField({
allowBlank: false// 不能为空
})
},
{
id:'evaluation',
header: "价值评估",
dataIndex: 'evaluation',
width:70,
editor: new Ext.form.TextField({
allowBlank: false// 不能为空
})
},
{
id:'source',
header: "客户来源",
dataIndex: 'source',
width:70,
editor: new Ext.form.ComboBox({
//transform:"sourceList", //所对应的下拉菜单名称<select name="sourceList"><option></option></select>
triggerAction:"all",
lazyRender:true
})
},
{
header: "录入时间",
dataIndex: 'createTime',
width: 95,
renderer: formatDate, //格式化时间
//rnderer:Ext.util.Format.dateRenderer("Y, M d"),
editor: new Ext.form.DateField({
format: 'y/m/d',
minValue: '1970/01/01',//最小值
disabledDays: [0, 6],// 禁止选择的日期
disabledDaysText: '非上班时间不可录入' })
}
]);
var store = new Ext.data.Store({
proxy:new Ext.data.HttpProxy({url:"../customer.do?method=pageSet"}),//回到跟目录下
reader:new Ext.data.JsonReader({
totalProperty:'totalProperty',
root:'root',
successProperty :'success'
},fields), //List数据
sortInfo:{field:'name', direction:'ASC'},// 排序信息
remoteSort:true
});
// 默认情况下列是可排序的
cm.defaultSortable = true;
// 创建编辑器表格
var grid = new Ext.grid.EditorGridPanel({
store:store,
cm: cm,
width:800,
height:420,
//autoExpandColumn:'name', //根据用户自动填充表格
title:'客户信息管理',// 标题
frame:true,
clicksToEdit:1,//设置点击几次才可编辑
//设置勾选按钮://true单选，false多选
sm:sm,
//工具栏
tools:[{id:"save"},
{id:"help",
handler:function(){Ext.Msg.alert("help","please help me!");}
},{id:"close"}],
// 顶部工具栏按钮
tbar: [{
text: '添加用户',
iconCls:'add',//按钮图标的CSS名称
handler : function(){
}
},{
text: '查看所选',
iconCls: 'details',
handler : function(){
}
},{
text: '删除所选',
iconCls:'remove',
handler : function(){
}
},{
text: '删除所有',
iconCls: 'user-delete',
handler : function(){
}
},{
text: '检索中心',
//iconCls: 'user-delete',
//viewConfig 属性来打开一个新的面板
handler : function(){
}
},{
text: '刷新',
//iconCls: 'user-delete',
pressed:true,
handler : function(){
}
}],
// 底部工具栏按钮
bbar:new Ext.PagingToolbar({
pageSize:15, //每页显示的长度
store:store,
displayInfo:true,
displayMsg:"当前{0}到{1}共{2}",
emptyMsg:"没有数据请返回",
items:null
})
});
grid.render(mydiv);
store.load({params:{start:0,limit:15}});
});
3，jsp页面
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<!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=GB18030">
<script type="text/javascript" src="../dwr/engine.js"></script>
<script type="text/javascript" src="../dwr/util.js"></script>
<script type="text/javascript" src="../dwr/interface/JCustomerManager.js"></script>
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<!-- 手工添加dwrproxy.js -->
<script type="text/javascript" src="../ext/dwrproxy.js"></script>
<script type="text/javascript" src="../script/edit_grid_customer.js"></script>
<!--注意要从根目录看起，这里目录需要回退 -->
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="../style/edit_grid_customer.css"/>
<title>Insert title here</title>
</head>
<body>
<div id="mydiv" style="width: 100%;height: 100%"></div>
</body>
</html>