Extjs-表格 Ext.grid.GridPanel 分页------------------------------------------------

最新推荐文章于 2024-01-14 08:00:00 发布

itlwc

最新推荐文章于 2024-01-14 08:00:00 发布

阅读量2k

点赞数

分类专栏： Extjs 文章标签： header stylesheet string json function html

本文链接：https://blog.csdn.net/itlwc/article/details/7871908

版权

Extjs 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

1.表格添加分页条

分页store不能使用Ext.data.SimpleStore,因为分页需要调用load(),load()与Proxy有关,SimpleStore不但没有设置Proxy,而且也没有重写load()所有会出现错误

2.通过后台脚本获取分页数据

JSON里面除了name就是value,如果是数字不用加引号,如果加引号就是字符串,如果用[]包裹就是数组,如果出现{}就是嵌套的JSON

list.jsp

<%@ page language="java"  pageEncoding="UTF-8"%>
<%	
	String start = request.getParameter("start");
	String limit = request.getParameter("limit");
	int index = 0;//Integer.parseInt(start);
	int pageSize = 4;//Integer.parseInt(limit);
	String name = "李文超";
	String descn = "李文超的描述";
	String sex = "17";
	String json = "{totalProperty : 10,root:[";
	for(int i =index;i<pageSize+index;i++){
		json+="{id:'"+i+"',name:'"+name+"',descn:'"+descn+"',sex:'"+sex+"'}";
		if(i!=pageSize+index-1){
			json+=",";
		}
	}
	json+="]}";
	System.out.println(json);
	response.getWriter().write(json);
%>

index.jsp

<%@ page language="java"  pageEncoding="UTF-8"%>
<%	String rootpath = request.getContextPath();%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/>
	<script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script>
	<!-- 带进度条的分页需要加下面这个文件 -->   
	<script type="text/javascript" src="<%=rootpath%>/ext/examples/ux/ProgressBarPager.js"></script>
	<script type="text/javascript" defer>
		Ext.onReady(function(){
			Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
			var start = 0;
			var limit = 3;
			var params = {start:start,limit:limit};
			
			var record = Ext.data.Record.create([ 
				{name : 'id'},
				{name : 'name'},
				{name : 'descn'},
				{name : 'sex'}
			]);
			
			var store = new Ext.data.Store({
				proxy : new Ext.data.HttpProxy({
					url : 'list.jsp'
				}),
				reader : new Ext.data.JsonReader({
					totalProperty : 'totalProperty',
					root : 'root',
					fields: record
				})
			});
			
			var sm = new Ext.grid.CheckboxSelectionModel({
				singleSelect : true //true表示只可以选择单行
			});
			
			var cm = new Ext.grid.ColumnModel([
				new Ext.grid.RowNumberer(),sm,
				{header:'编号',dataIndex:'id'},
				{header:'名称',dataIndex:'name'},
				{header:'描述',dataIndex:'descn'},
				{header:'性别',dataIndex:'sex'}
			]);
			
			var grid = new Ext.grid.GridPanel({
				store : store,
				height : 20,
				cm : cm,
				sm : sm,
				bbar : new Ext.PagingToolbar({
					pageSize : limit,//每页显示几条数据
					store : store,
					displayInfo : true,//是否显示数据信息
					displayMsg : '显示第{0}条到{1}条记录,一种{2}条',//displayInfo:true时才有效,{0},{1}会自动被替换成数据
					emptyMsg : '没有数据',//没有数据时显示
					//带进度条的分页工具条   
                    plugins : new Ext.ux.ProgressBarPager()
				}),
				listeners : {
					'beforerender' : function(){
						store.load({params:params});
					}
				}
			});
			new Ext.Viewport({
				layout:'fit',
				items: [grid]
			});
		});
	</script>
  </head>
  <body>
  </body>
</html>

3.本地数组读取数据,并且实现内存分页

<%@ page language="java"  pageEncoding="UTF-8"%>
<%	String rootpath = request.getContextPath();%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/>
	<script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/PagingMemoryProxy.js"></script>
	<!-- 带进度条的分页需要加下面这个文件 -->   
	<script type="text/javascript" src="<%=rootpath%>/ext/examples/ux/ProgressBarPager.js"></script>
	<script type="text/javascript" defer>
		Ext.onReady(function(){
			Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
			var limit = 2;
			var start = 0;
			var data = [
				['1','李文超','李文超的描述','male'],
				['2','范勇','范勇的描述','female'],
				['3','马新军','马新军的描述','male'],
				['4','常高军','常高军的描述','female'],
				['5','何卫国','何卫国的描述','male']
			];
			var store = new Ext.data.Store({
				proxy : new Ext.data.PagingMemoryProxy(data),
				reader : new Ext.data.ArrayReader({},[
					{name : 'id',mapping:0},
					{name : 'name',mapping:1},
					{name : 'descn',mapping:2},
					{name : 'sex',mapping:3},
				])
			});
			store.load({params:{start:start,limit:limit}});
			var sm = new Ext.grid.CheckboxSelectionModel();
			var cm = new Ext.grid.ColumnModel([
				new Ext.grid.RowNumberer(),sm,
				{header:'编号',dataIndex:'id'},
				{header:'名称',dataIndex:'name'},
				{header:'描述',dataIndex:'descn'},
				{header:'性别',dataIndex:'sex'}
			]);
			
			var grid = new Ext.grid.GridPanel({
				store : store,
				height : 20,
				cm : cm,
				sm : sm,
				bbar : new Ext.PagingToolbar({
					pageSize : limit,//每页显示几条数据
					store : store,
					displayInfo : true,//是否显示数据信息
					//displayInfo:true时才有效,{0},{1}会自动被替换成数据
					displayMsg : '显示第{0}条到{1}条记录,一种{2}条',
					emptyMsg : '没有数据',//没有数据时显示
					//带进度条的分页工具条   
                    plugins : new Ext.ux.ProgressBarPager()
					
				})
			});
			new Ext.Viewport({
				layout:'fit',
				items: [grid]
			});
		});
	</script>
  </head>
  <body>
  </body>
</html>

itlwc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Extjs-表格 Ext.grid.GridPanel 分页------------------------------------------------

1.表格添加分页条分页store不能使用Ext.data.SimpleStore,因为分页需要调用load(),load()与Proxy有关,SimpleStore不但没有设置Proxy,而且也没有重写load()所有会出现错误2.通过后台脚本获取分页数据JSON里面除了name就是value,如果是数字不用加引号,如果加引号就是字符串,如果用[]包裹就是数组,如果出现{}就是嵌套
复制链接

扫一扫

专栏目录