小弟刚刚接触Ext,看书看的脑袋都大了,因为公司要用Ext开发个后台界面,现在做到分页显示数据这块,在网上找了段代码,
代理数据的时候是走了,但是不知道为什么不显示数据,希望各位大侠帮忙看看。
Ext表格代码 Ext.onReady(function(){
var sm = new Ext.grid.CheckboxSelectionModel();
var store2 = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url:"http://localhost:8080/testExt/store.action?aa=123",
method:"post"
}),
reader: new Ext.data.JsonReader({//读取json数据
root:'newsList', //
totalProperty:'totalProperty', //总记录数
id:'id'
},[{name:'id'},
{name:'newstype'},
{name:'newsTitle'},
{name:'newsContent'},
{name:'newsDateTime'}
])
});
//创建列
var column = new Ext.grid.ColumnModel([
sm, //复选框
{header:'编号',dataIndex:'id'},
{header:'类型',dataIndex:'newstype'},
{header:'标题',dataIndex:'newsTitle'},
{header:'内容',dataIndex:'newsContent'},
{header:'时间',dataIndex:'newsDateTime'}
]);
column.defaultSortable = true;//默认可排序
//创建一个工具条
var tba = new Ext.Toolbar();
//面板
var grid = new Ext.grid.GridPanel({
el:'showNews',
width:600,
height:300,
title:'新闻列表',
store:store2,
cm:column, //创建的列
trackMouseOver:false,
autoScroll: true,
loadMask: {msg:'正在加载数据,请稍侯……'},
sm:sm,
//下边
bbar:new Ext.PagingToolbar({
pageSize:5,
store:store2,
displayInfo:true,
displayMsg:'显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg:'没有记录'
})
});
grid.render();
store2.load();
});
</script>
</head>
<body>
<div id="showNews" ></div>
store.action代码 生成一个json格式的字符串 response.setContentType("text/html;charset=gbk");
PrintWriter out = response.getWriter();
System.out.println(request.getParameter("aa"));
List jsonArray = new ArrayList();
int i = 0;
while(i<20){
Map map = new HashMap();
map.put("id", i);
map.put("newstype", "国内新闻");
map.put("newsTitle", "第"+i+"条新闻标题");
map.put("newsContent", "第"+i+"条新闻内容");
map.put("newsDateTime", "2009-9-9");
jsonArray.add(map);
i++;
}
String jsonStr = jsonArray.toString();
String jsonString = "{start:"+0+",limit:"+5+",totalProperty:"+20+",newsList:"+jsonStr+"}";
out.write(jsonString);
生成的json格式字符串 {start:0,limit:5,totalProperty:20,newsList:[{newsContent=第0条新闻内容, newsDateTime=2009-9-9, newsTitle=第0条新闻标题, newstype=国内新闻, id=0}, {newsContent=第1条新闻内容, newsDateTime=2009-9-9, newsTitle=第1条新闻标题, newstype=国内新闻, id=1}, {newsContent=第2条新闻内容, newsDateTime=2009-9-9, newsTitle=第2条新闻标题, newstype=国内新闻, id=2}, {newsContent=第3条新闻内容, newsDateTime=2009-9-9, newsTitle=第3条新闻标题, newstype=国内新闻, id=3}, {newsContent=第4条新闻内容, newsDateTime=2009-9-9, newsTitle=第4条新闻标题, newstype=国内新闻, id=4}, {newsContent=第5条新闻内容, newsDateTime=2009-9-9, newsTitle=第5条新闻标题, newstype=国内新闻, id=5}, {newsContent=第6条新闻内容, newsDateTime=2009-9-9, newsTitle=第6条新闻标题, newstype=国内新闻, id=6}, {newsContent=第7条新闻内容, newsDateTime=2009-9-9, newsTitle=第7条新闻标题, newstype=国内新闻, id=7}, {newsContent=第8条新闻内容, newsDateTime=2009-9-9, newsTitle=第8条新闻标题, newstype=国内新闻, id=8}, {newsContent=第9条新闻内容, newsDateTime=2009-9-9, newsTitle=第9条新闻标题, newstype=国内新闻, id=9}, {newsContent=第10条新闻内容, newsDateTime=2009-9-9, newsTitle=第10条新闻标题, newstype=国内新闻, id=10}, {newsContent=第11条新闻内容, newsDateTime=2009-9-9, newsTitle=第11条新闻标题, newstype=国内新闻, id=11}, {newsContent=第12条新闻内容, newsDateTime=2009-9-9, newsTitle=第12条新闻标题, newstype=国内新闻, id=12}, {newsContent=第13条新闻内容, newsDateTime=2009-9-9, newsTitle=第13条新闻标题, newstype=国内新闻, id=13}, {newsContent=第14条新闻内容, newsDateTime=2009-9-9, newsTitle=第14条新闻标题, newstype=国内新闻, id=14}, {newsContent=第15条新闻内容, newsDateTime=2009-9-9, newsTitle=第15条新闻标题, newstype=国内新闻, id=15}, {newsContent=第16条新闻内容, newsDateTime=2009-9-9, newsTitle=第16条新闻标题, newstype=国内新闻, id=16}, {newsContent=第17条新闻内容, newsDateTime=2009-9-9, newsTitle=第17条新闻标题, newstype=国内新闻, id=17}, {newsContent=第18条新闻内容, newsDateTime=2009-9-9, newsTitle=第18条新闻标题, newstype=国内新闻, id=18}, {newsContent=第19条新闻内容, newsDateTime=2009-9-9, newsTitle=第19条新闻标题, newstype=国内新闻, id=19}]}
System.out.println(request.getParameter("aa"));这段在后台显示了123所以应该代理部分是走了
但是不知道为什么数据没有显示
代理数据的时候是走了,但是不知道为什么不显示数据,希望各位大侠帮忙看看。
Ext表格代码 Ext.onReady(function(){
var sm = new Ext.grid.CheckboxSelectionModel();
var store2 = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url:"http://localhost:8080/testExt/store.action?aa=123",
method:"post"
}),
reader: new Ext.data.JsonReader({//读取json数据
root:'newsList', //
totalProperty:'totalProperty', //总记录数
id:'id'
},[{name:'id'},
{name:'newstype'},
{name:'newsTitle'},
{name:'newsContent'},
{name:'newsDateTime'}
])
});
//创建列
var column = new Ext.grid.ColumnModel([
sm, //复选框
{header:'编号',dataIndex:'id'},
{header:'类型',dataIndex:'newstype'},
{header:'标题',dataIndex:'newsTitle'},
{header:'内容',dataIndex:'newsContent'},
{header:'时间',dataIndex:'newsDateTime'}
]);
column.defaultSortable = true;//默认可排序
//创建一个工具条
var tba = new Ext.Toolbar();
//面板
var grid = new Ext.grid.GridPanel({
el:'showNews',
width:600,
height:300,
title:'新闻列表',
store:store2,
cm:column, //创建的列
trackMouseOver:false,
autoScroll: true,
loadMask: {msg:'正在加载数据,请稍侯……'},
sm:sm,
//下边
bbar:new Ext.PagingToolbar({
pageSize:5,
store:store2,
displayInfo:true,
displayMsg:'显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg:'没有记录'
})
});
grid.render();
store2.load();
});
</script>
</head>
<body>
<div id="showNews" ></div>
store.action代码 生成一个json格式的字符串 response.setContentType("text/html;charset=gbk");
PrintWriter out = response.getWriter();
System.out.println(request.getParameter("aa"));
List jsonArray = new ArrayList();
int i = 0;
while(i<20){
Map map = new HashMap();
map.put("id", i);
map.put("newstype", "国内新闻");
map.put("newsTitle", "第"+i+"条新闻标题");
map.put("newsContent", "第"+i+"条新闻内容");
map.put("newsDateTime", "2009-9-9");
jsonArray.add(map);
i++;
}
String jsonStr = jsonArray.toString();
String jsonString = "{start:"+0+",limit:"+5+",totalProperty:"+20+",newsList:"+jsonStr+"}";
out.write(jsonString);
生成的json格式字符串 {start:0,limit:5,totalProperty:20,newsList:[{newsContent=第0条新闻内容, newsDateTime=2009-9-9, newsTitle=第0条新闻标题, newstype=国内新闻, id=0}, {newsContent=第1条新闻内容, newsDateTime=2009-9-9, newsTitle=第1条新闻标题, newstype=国内新闻, id=1}, {newsContent=第2条新闻内容, newsDateTime=2009-9-9, newsTitle=第2条新闻标题, newstype=国内新闻, id=2}, {newsContent=第3条新闻内容, newsDateTime=2009-9-9, newsTitle=第3条新闻标题, newstype=国内新闻, id=3}, {newsContent=第4条新闻内容, newsDateTime=2009-9-9, newsTitle=第4条新闻标题, newstype=国内新闻, id=4}, {newsContent=第5条新闻内容, newsDateTime=2009-9-9, newsTitle=第5条新闻标题, newstype=国内新闻, id=5}, {newsContent=第6条新闻内容, newsDateTime=2009-9-9, newsTitle=第6条新闻标题, newstype=国内新闻, id=6}, {newsContent=第7条新闻内容, newsDateTime=2009-9-9, newsTitle=第7条新闻标题, newstype=国内新闻, id=7}, {newsContent=第8条新闻内容, newsDateTime=2009-9-9, newsTitle=第8条新闻标题, newstype=国内新闻, id=8}, {newsContent=第9条新闻内容, newsDateTime=2009-9-9, newsTitle=第9条新闻标题, newstype=国内新闻, id=9}, {newsContent=第10条新闻内容, newsDateTime=2009-9-9, newsTitle=第10条新闻标题, newstype=国内新闻, id=10}, {newsContent=第11条新闻内容, newsDateTime=2009-9-9, newsTitle=第11条新闻标题, newstype=国内新闻, id=11}, {newsContent=第12条新闻内容, newsDateTime=2009-9-9, newsTitle=第12条新闻标题, newstype=国内新闻, id=12}, {newsContent=第13条新闻内容, newsDateTime=2009-9-9, newsTitle=第13条新闻标题, newstype=国内新闻, id=13}, {newsContent=第14条新闻内容, newsDateTime=2009-9-9, newsTitle=第14条新闻标题, newstype=国内新闻, id=14}, {newsContent=第15条新闻内容, newsDateTime=2009-9-9, newsTitle=第15条新闻标题, newstype=国内新闻, id=15}, {newsContent=第16条新闻内容, newsDateTime=2009-9-9, newsTitle=第16条新闻标题, newstype=国内新闻, id=16}, {newsContent=第17条新闻内容, newsDateTime=2009-9-9, newsTitle=第17条新闻标题, newstype=国内新闻, id=17}, {newsContent=第18条新闻内容, newsDateTime=2009-9-9, newsTitle=第18条新闻标题, newstype=国内新闻, id=18}, {newsContent=第19条新闻内容, newsDateTime=2009-9-9, newsTitle=第19条新闻标题, newstype=国内新闻, id=19}]}
System.out.println(request.getParameter("aa"));这段在后台显示了123所以应该代理部分是走了
但是不知道为什么数据没有显示
不使用=要用:,字符串两边要引号{start:0,limit:5,totalProperty:20,newsList:[
{newsContent:"第0条新闻内容", newsDateTime:"2009-9-9",
newsTitle:"第0条新闻标题",newstype:"国内新闻", id:0},
{newsContent:"第1条新闻内容", newsDateTime:"2009-9-9",
newsTitle:"第1条新闻标题", newstype:"国内新闻", id:1}
]}
paging.html:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Paging Grid Example</title><link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /> <!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS --> <script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="paging.js"></script>
<link rel="stylesheet" type="text/css" href="grid-examples.css" /></head>
<body><h1>Paging Grid Example</h1>
<p>This example shows how to create a grid with paging. This grid uses a ScriptTagProxy to fetch cross-domain
remote data (from the Ext forums).</p>
<p>Note that the jsis not minified so it is readable. See <a href="paging.js">paging.js</a>.</p><div id="topic-grid"></div></body>
</html>paging.js:Ext.onReady(function(){
var store = new Ext.data.JsonStore({
root: 'data',
totalProperty: 'total',
id: 'id',
fields: [
{name: 'id', type: 'string'},
{name: 'name', type: 'string'},
{name: 'email', type: 'string'}
],
proxy: new Ext.data.HttpProxy({
url: 'http://localhost:8080/1.jsp'
})
}); var pagingBar = new Ext.PagingToolbar({
pageSize: 3,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
}); var grid = new Ext.grid.GridPanel({
el:'topic-grid',
width:500,
height:300,
title:'ExtJS Paging Test',
store: store,
columns:[
{header:"ID",dataIndex:"id"},
{header:"Name",dataIndex:"name"},
{header:"EMail",dataIndex:"email"}
],
bbar: pagingBar
});
grid.render();
store.load({params:{start:0, limit:3}});
});1.jsp: 模拟后台分页取数据的代码:<%
request.setCharacterEncoding("utf-8");
String _start = request.getParameter("start");
String _limit = request.getParameter("limit");
int start = Integer.parseInt(_start);
int limit = Integer.parseInt(_limit);
//返回的json字符串
String responseString = "{total:50,data:[";
for(int i=0; i<limit; i++){
responseString+= ("{id: 'id" + i+start + "',name:'name" + i+start + "',email:'email" + i+start + "'}");
if(i!=limit-1){
responseString+= ",";
}
}
responseString+="]}";
System.out.println(responseString);
response.setCharacterEncoding("utf-8");
response.setContentType("text/json;charset=utf-8");
response.getWriter().write(responseString);
response.flushBuffer();
response.getWriter().close();
%>