ExtJs读取后台数据进行分页？
ExtJs读取后台数据并利用PageToolbar进行分页？我是初学者，只想找个例子看。现在我写了个前台，不知道后台数据怎样处理。Ext.onReady(function...
ExtJs读取后台数据并利用PageToolbar进行分页？我是初学者，只想找个例子看。现在我写了个前台，不知道后台数据怎样处理。
Ext.onReady(
function(){
//Ext.BLANK_IMAGE_URL='../../ext/resources/image/default/s.gif';
Ext.BLANK_IMAGE_URL = imgurl;
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'qtip';
alert("1");
var store = new Ext.data.Store({
autoLoad:{params:{start:0,limit:2}},
reader : new Ext.data.JsonReader(),
proxy:new Ext.data.HttpProxy({
url:'grid.jsp'
})
});
alert(store);
alert("2");
var grid = new Ext.grid.GridPanel({
title:'表格数据分页',
applyTo :'grid-div',
width:600,
height:200,
frame:true,
tbar:new Ext.PagingToolbar({
store:store,
pageSize:2,
displayInfo:true,
displayMsg:'第{0}条到{1}条，一共{2}条',
emptyMsg:'没有记录'
}),
store:store,
columns:[
new Ext.grid.RowNumberer(),
{header:"id",width:50,dataIndex:'personId',sortable:true},
{header:"性名",width:80,dataIndex:'personName',sortable:true},
{header:"年龄",width:80,dataIndex:'personAge',sortable:true}
]
});
alert(grid);
}
);
现希望谁写出grid.jsp中的内容。不要求连接数据库，只要求数据符合我上面的要求即可。
随便返回5条左右记录就行。
我只想照着实例学习。
其中的alert()是做测试用的，要有好答案，会另有奖励。 展开
Ext.onReady(
function(){
//Ext.BLANK_IMAGE_URL='../../ext/resources/image/default/s.gif';
Ext.BLANK_IMAGE_URL = imgurl;
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'qtip';
alert("1");
var store = new Ext.data.Store({
autoLoad:{params:{start:0,limit:2}},
reader : new Ext.data.JsonReader(),
proxy:new Ext.data.HttpProxy({
url:'grid.jsp'
})
});
alert(store);
alert("2");
var grid = new Ext.grid.GridPanel({
title:'表格数据分页',
applyTo :'grid-div',
width:600,
height:200,
frame:true,
tbar:new Ext.PagingToolbar({
store:store,
pageSize:2,
displayInfo:true,
displayMsg:'第{0}条到{1}条，一共{2}条',
emptyMsg:'没有记录'
}),
store:store,
columns:[
new Ext.grid.RowNumberer(),
{header:"id",width:50,dataIndex:'personId',sortable:true},
{header:"性名",width:80,dataIndex:'personName',sortable:true},
{header:"年龄",width:80,dataIndex:'personAge',sortable:true}
]
});
alert(grid);
}
);
现希望谁写出grid.jsp中的内容。不要求连接数据库，只要求数据符合我上面的要求即可。
随便返回5条左右记录就行。
我只想照着实例学习。
其中的alert()是做测试用的，要有好答案，会另有奖励。 展开
2个回答
展开全部
oStore = new Ext.data.JsonStore({
url: '/backend/getdata', // 这儿就是你说的后台
root: 'data',
totalProperty: 'total', // total 里面放记录总数
remoteSort: true,
fields: [ // 具体有哪些字段？
'field1',
'field2',
... ...
]
});
var selModel = new Ext.grid.CheckboxSelectionModel();
var colModel = new Ext.grid.ColumnModel([selModel, {
//表格列定义
... ...
]);
oGrid = new Ext.grid.GridPanel({
title: '标题',
iconCls:'icon_xxx', // 图标
ds: oStore,
cm: colModel,
sm: selModel,
loadMask: {
msg: 'Loading...'
},
tbar:[{ //头部工具条
text: '按钮1',
iconCls: 'icon-fileup',
tooltip: '按钮1的动作',
handler: function(btn, e){
//
}
}],
bbar: new Ext.PagingToolbar({ //底部工具条（分页在这儿实现）
store: oStore,
pageSize: 30, //每页显示的记录数
displayInfo: true,
plugins: [new Ext.ux.PageSizePlugin()], // 这是一个插件，在网上找找
emptyMsg: "没有数据"
}),
listeners: {
render: function() {
//加载首页数据
oStore.load({params:{start:0, limit:30}});
}
}
});
/backend/getdata 返回的数据应该是这样
{
data: [...],
total: 100
}
url: '/backend/getdata', // 这儿就是你说的后台
root: 'data',
totalProperty: 'total', // total 里面放记录总数
remoteSort: true,
fields: [ // 具体有哪些字段？
'field1',
'field2',
... ...
]
});
var selModel = new Ext.grid.CheckboxSelectionModel();
var colModel = new Ext.grid.ColumnModel([selModel, {
//表格列定义
... ...
]);
oGrid = new Ext.grid.GridPanel({
title: '标题',
iconCls:'icon_xxx', // 图标
ds: oStore,
cm: colModel,
sm: selModel,
loadMask: {
msg: 'Loading...'
},
tbar:[{ //头部工具条
text: '按钮1',
iconCls: 'icon-fileup',
tooltip: '按钮1的动作',
handler: function(btn, e){
//
}
}],
bbar: new Ext.PagingToolbar({ //底部工具条（分页在这儿实现）
store: oStore,
pageSize: 30, //每页显示的记录数
displayInfo: true,
plugins: [new Ext.ux.PageSizePlugin()], // 这是一个插件，在网上找找
emptyMsg: "没有数据"
}),
listeners: {
render: function() {
//加载首页数据
oStore.load({params:{start:0, limit:30}});
}
}
});
/backend/getdata 返回的数据应该是这样
{
data: [...],
total: 100
}
本回答由提问者推荐
已赞过
已踩过<
你对这个回答的评价是？
展开全部
<%@ page language="java" contentType="text/html; charset=GBK"
pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
int start = (Integer)request.getAttribute("start");
int limit = (Integer)request.getAttribute("limit");
String sql="select * from table limit "+ start+","+limit;
//执行你的SQL就可以了。。再封装成json数据格式再
response回来数据
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
</body>
</html>
pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
int start = (Integer)request.getAttribute("start");
int limit = (Integer)request.getAttribute("limit");
String sql="select * from table limit "+ start+","+limit;
//执行你的SQL就可以了。。再封装成json数据格式再
response回来数据
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
