Extjs4中的分页应用结合前后台
更新时间:2013年12月13日 15:35:54 作者:
本文为大家介绍下Extjs4中的分页如何使用且结合前后台,具体的示例如下,感兴趣的朋友可以参考下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
前台部分:
Ext.define('GS.system.role.store.RoleGridStore',{
extend:'Ext.data.Store',
model:'GS.system.role.model.RoleGridModel',
id:'roleStoreId',
pageSize:4,//分页大小
proxy:{
type:'ajax',
url:'/gs_erp/roleAction!getRoleList',
reader: {
type: 'json',
root: 'rows',
totalProperty: 'total'
}
},
sorters: [{
property: 'id', //排序字段
direction: 'asc'// 默认ASC
}],
autoLoad:{start: 0, limit: 4}//start是从第几条开始,limit是每页的条数
});
store.loadPage(1); //加载第一页
后台部分:
private int limit;//每一页的条数
private int start;//从哪一条数据开始查
private int total;//总条数
/**
* 查找所有角色
*/
public void getRoleList()
{
List<Role> roleList=new ArrayList<Role>();
StringBuffer toJson=new StringBuffer();//用来放json数据
System.out.println(start+","+limit+","+total);
try
{
roleList=(List<Role>) pageServiceImpl.commonPagination(Role.class, "", start, limit);
total=pageServiceImpl.getTotalNum(Role.class, "");
toJson.append("{total:").append(""+total+"").append(",success:true,").append("start:")
.append(""+start+"").append(",");
toJson.append("rows:[");
for(int i=0;i<roleList.size();i++)
{
toJson.append("{id:").append("'").append(""+roleList.get(i).getId()+"").append("'")
.append(",name:").append("'").append(""+roleList.get(i).getName()+"")
.append("'").append(",desc:").append("'").append(""+roleList.get(i).getDesc()+"")
.append("'").append("}");
if(i<roleList.size()-1)
{
toJson.append(",");
}
}
toJson.append("]}");
} catch (Exception e1)
{
// TODO Auto-generated catch block
e1.printStackTrace();
}
try
{
response.setHeader("Cache-Control", "no-cache");
response.setContentType("text/json;charset=utf-8");
response.getWriter().print(toJson);
System.out.println(toJson);
} catch (IOException e)
{
// TODO Auto-generated catch block
e.printStackTrace();
}
}
复制代码 代码如下:
Ext.define('GS.system.role.store.RoleGridStore',{
extend:'Ext.data.Store',
model:'GS.system.role.model.RoleGridModel',
id:'roleStoreId',
pageSize:4,//分页大小
proxy:{
type:'ajax',
url:'/gs_erp/roleAction!getRoleList',
reader: {
type: 'json',
root: 'rows',
totalProperty: 'total'
}
},
sorters: [{
property: 'id', //排序字段
direction: 'asc'// 默认ASC
}],
autoLoad:{start: 0, limit: 4}//start是从第几条开始,limit是每页的条数
});
store.loadPage(1); //加载第一页
后台部分:
复制代码 代码如下:
private int limit;//每一页的条数
private int start;//从哪一条数据开始查
private int total;//总条数
/**
* 查找所有角色
*/
public void getRoleList()
{
List<Role> roleList=new ArrayList<Role>();
StringBuffer toJson=new StringBuffer();//用来放json数据
System.out.println(start+","+limit+","+total);
try
{
roleList=(List<Role>) pageServiceImpl.commonPagination(Role.class, "", start, limit);
total=pageServiceImpl.getTotalNum(Role.class, "");
toJson.append("{total:").append(""+total+"").append(",success:true,").append("start:")
.append(""+start+"").append(",");
toJson.append("rows:[");
for(int i=0;i<roleList.size();i++)
{
toJson.append("{id:").append("'").append(""+roleList.get(i).getId()+"").append("'")
.append(",name:").append("'").append(""+roleList.get(i).getName()+"")
.append("'").append(",desc:").append("'").append(""+roleList.get(i).getDesc()+"")
.append("'").append("}");
if(i<roleList.size()-1)
{
toJson.append(",");
}
}
toJson.append("]}");
} catch (Exception e1)
{
// TODO Auto-generated catch block
e1.printStackTrace();
}
try
{
response.setHeader("Cache-Control", "no-cache");
response.setContentType("text/json;charset=utf-8");
response.getWriter().print(toJson);
System.out.println(toJson);
} catch (IOException e)
{
// TODO Auto-generated catch block
e.printStackTrace();
}
}
相关文章
ExtJS4 Grid改变单元格背景颜色及Column render学习
利用的是Column的render实现单元格背景颜色改变,本文给予了实现代码,感兴趣的朋友可以了解下,或许对你学习ExtJS4 Grid有所帮助2013-02-02Ext JS 4实现带week(星期)的日期选择控件(实战一)
有一些日期选择的需求是要看到星期,就是日期中的哪一天是这一年的第几周,遗憾的是Ext js 并没有提供这样的配置,下面为大家分享下理想的解决方法2013-08-08关于viewport,Ext.panel和Ext.form.panel的关系
那个深入浅出ext作者比我还懒 viewport存放Ext.panel对象,其容器中的成员可以以borderlayout方式布局2009-05-05Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
本教程将详细介绍下设置Ext.data.Store传参的请求方式;亮点,设置请求方式,默认为GET,感兴趣的朋友可以参考下哈2013-04-04Extjs3.0 checkboxGroup 动态添加item实现思路
Extjs3.0中的CheckboxGroup默认不能动态添加item,如需要数据动态创建,试着创建整个CheckboxGroup,而不是动态添加item,具体实现如下,感兴趣的朋友可以了解下2013-08-08Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Extjs中TabPane在一些特殊用途时把其嵌在其他的网页中,很多新手朋友可能对此不是很熟悉,小编就在本文章中详细的介绍一下,感兴趣的你可不要错过了啊,希望本文对你有所帮助2013-01-01
最新评论