欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

一个简单的ext分页

程序员文章站 2022-03-03 08:17:47
...
学习ext也有一段时间了,明白只有不断的总结,才能让自己进步的更快,遂写此文,权当积累经验~呵呵
<script type="text/javascript">
	Ext.onReady(function(){
		var cm = new Ext.grid.ColumnModel([{header:'编号',dataIndex:'id'},
		                                   {header:'名称',dataIndex:'name'},
		                                   {header:'描述',dataIndex:'descn'}]);
		var ds = new Ext.data.Store({
			proxy:new Ext.data.HttpProxy({url:'data.jsp'}),
			reader:new Ext.data.JsonReader({totalProperty:'totalProperty',root:'root'},[{name:'id'},
			                                                                            {name:'name'},
			                                                                            {name:'descn'}
			                                  ]),
		});
		ds.load({params:{start:0,limit:10}});	
              var grid = new Ext.grid.GridPanel({
			el:'grid',//在body里要有个<div id="grid" style="height:270px;"></div>的东西,主要就是为了让系统知道表格显示的位置,后面的style属性主要是分页显示数据的时候所占的高度
			ds:ds,
			cm:cm,
			//分页工具条
			bbar:new Ext.PagingToolbar({
				pageSize:10,
				store:ds,
				displayInfo:true,
				displayMsg:'显示第{0}条到第{1}条记录,一共{2}条',
				emptyMsg:'没有记录'
			})
		});
		grid.render();//渲染
	});
</script>

上面是前台的代码,下面把后台代码贴上:(data.jsp)
<%
	int index = new Integer(request.getParameter("start") == null ? "0": request.getParameter("start"));  
	System.out.println("index="+index);
	int pageSize = Integer.parseInt(request.getParameter("limit")==null?"10":request.getParameter("limit"));
	System.out.println("pageSize="+pageSize);
	String json = "{totalProperty:100,root:[";
	for(int i=index;i<pageSize+index;i++)
	{
		json+="{id:"+i+",name:"+"'"+i+"'"+",descn:"+"'"+i+"'"+"}";	
		if(i != pageSize+index-1){
			json+=",";
		}
	}
	json+="]}";
	response.getWriter().write(json);
	System.out.println(json);
%>

注:data.jsp页面不需要html标签,因为只需要返回形如:
{totalProperty:100,root:[{id:0,name:'name',descn:'descn'},{id:1,name:'name1',descn:'descn1'},{id:2,name:'name2',descn:'descn2'}}

这样的数据格式返回即可。在前台的jsonreader即可识别!呵呵,一个简单的ext分页就完成了!页面截图:
一个简单的ext分页
            
    
    博客分类: EXT EXT 
  • 一个简单的ext分页
            
    
    博客分类: EXT EXT 
  • 大小: 30.3 KB
相关标签: EXT