`
java_xiaoyi
  • 浏览: 48292 次
  • 性别: Icon_minigender_1
  • 来自: 木木乃州
社区版块
存档分类
最新评论

一个简单的ext分页

    博客分类:
  • EXT
EXT 
阅读更多
学习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分页就完成了!页面截图:

  • 大小: 30.3 KB
分享到:
评论

相关推荐

    简单的小例子Ext+servlet 分页

    本示例探讨了如何结合Ext JS(一个强大的JavaScript框架)和Servlet(Java Web开发中的服务器端组件)来实现简单的分页功能。下面将详细解释这个主题。 首先,Ext JS是一个用于构建用户界面的前端JavaScript库,它...

    ext grid json分页显示

    在IT领域,尤其是在Web开发中,"ext grid json分页显示"是一个常见的需求,它涉及到前端数据展示和后端数据交互的关键技术。本例中提到的解决方案是利用DWR(Direct Web Remoting)和EXT.js库来实现。下面将详细阐述...

    ext4 表格分页实例代码

    实现EXT4表格分页实例,首先需要创建一个EXT JS项目,使用Eclipse作为IDE。在Eclipse中,可以使用Sencha CMD工具来生成项目结构和基础代码。项目创建后,需要编写以下主要部分: 1. **数据模型(Model)**:定义...

    Ext_Js分页显示案例详解

    2. **PagingToolbar组件**:`Ext.PagingToolbar`是一个用于分页操作的工具栏组件,它可以与Store进行绑定,实现数据的分页加载。 3. **远程分页**:在Ext_Js中,通常采用远程分页的方式,即数据的分页逻辑发生在...

    EXT JSON Sqlserver 分页 全部正常运行

    在IT领域,这个标题涉及到的是一个使用EXT JS(一种基于JavaScript的富客户端框架)和JSON(JavaScript Object Notation)数据格式,结合SQL Server数据库实现分页功能的示例。EXT JS允许开发者创建复杂的、交互式的...

    Ext中对于多种store数据分页实现示例

    分页功能通常与分页工具栏结合使用,它提供了一个友好的用户界面来切换页面。创建分页工具栏的代码如下: ```javascript var toolbar = Ext.create('Ext.toolbar.Paging', { store: myStore, // 关联的store ...

    ext设置分页大小.rar

    标题"ext设置分页大小.rar"暗示了这是一个关于EXT库中调整分页大小的手动教程或者代码资源,可能包含了一些示例文件。描述中的"ext设置 手工 分页大小"再次强调了这一主题,意味着我们将探讨如何手动配置EXT中的分页...

    EXT2.0分页

    EXT2.0是一个基于JavaScript的富客户端应用程序框架,由Sencha公司开发,它提供了丰富的组件库和强大的数据管理能力,能够构建高度交互的Web应用。 EXT2.0的分页机制核心在于将大量数据分成多个小块(页)进行加载...

    Ext + dwr 实现分页功能

    首先,在服务器端创建一个简单的Java类,该类将被DWR代理所调用。这个类中定义的方法将用于处理前端的分页请求。 ```java public class PagingService { public List getData(int start, int limit) { // 模拟从...

    Ext教程ext2-Ext简易教程

    以下是一个简单的例子,展示如何使用MessageBox组件弹出一个警告对话框: ```html Ext.onReady(function() { Ext.MessageBox.alert("你好", "wayfoon"); }); ``` Ext的布局系统是其强大功能的关键之一,提供了...

    Mvc4 分页 排序 搜索

    我们将通过一个简单的初学者示例来解释这些概念,确保它们既实用又易于理解。 ### 分页 分页是处理大量数据时不可或缺的功能,它允许用户以较小的块浏览信息,从而提高页面加载速度并改善用户体验。在MVC4中,我们...

    Ext解决题目(内存分页+导出Excel)

    首先,我们需要一个数据源,如`Ext.data.Store`,并为其配置分页参数,例如每页显示的记录数(pageSize)。然后,通过监听`store.load`事件,我们可以动态加载或切换页面。分页组件还会提供导航按钮和信息展示,方便...

    grid js 例子一个 ext 的

    总之,本文提供了一个简单的 Ext JS Grid 实现案例,通过这个案例,读者可以了解到如何在一个 JSP 页面中嵌入 Ext JS 的 Grid 组件,并对其进行基本配置。此外,还介绍了一些扩展知识点,帮助开发者更全面地理解如何...

    Jquery页面分页

    EXT是一个强大的JavaScript组件库,它提供了完善的分页组件EXT.data.PagingToolbar。在EXT应用中,只需配置数据源和分页参数,即可轻松实现分页功能。EXT的分页不仅包含UI展示,还包含了数据加载、状态管理等完整...

    使用Ext的Grid,Form,Dialog来实现分页列表,创建,修改,删除功能

    在Web开发中,Ext是一个强大的JavaScript库,用于构建用户界面,尤其适用于企业级应用。本文将详细介绍如何使用Ext的Grid、Form和Dialog组件来实现分页列表、创建、修改和删除功能。 1. **Ext Grid组件**:Grid是...

    extjs 简单分页例子

    EXTJS通过其Grid组件支持分页,Grid组件是一个可配置的表格视图,能够显示大量数据并进行排序、筛选和分页操作。 首先,我们需要创建一个EXTJS Grid组件。在JS文件中,定义Grid的基本配置,包括列模型(column ...

    Ext grid 简单实例

    Ext Grid是Ext JS库中的一个核心组件,用于展示和操作数据集。在Web应用程序中,它经常被用来作为数据表格,允许用户查看、排序、筛选和编辑数据。在这个"Ext Grid简单实例"中,我们将探讨如何从Web服务提取数据并将...

    Ext+sqlserver增删改查简单实例

    本文将基于"Ext+sqlserver增删改查简单实例"这个主题,详细讲解如何使用ExtJS(一个强大的JavaScript框架)与SQL Server数据库进行基本的CRUD(创建、读取、更新、删除)操作,并关注分页技术的实现。 首先,ExtJS...

    Ext-2.1 Ext 2全文档

    Ext 2.1是Ext JS库的一个版本,它是一个用于构建富互联网应用程序(RIA)的JavaScript框架。这个框架提供了一套完整的组件模型、数据绑定、布局管理以及丰富的用户界面控件,使得开发者能够创建功能强大且具有桌面...

    Ext组件描述,各个组件含义

    - **功能描述**:Button 是一个简单的按钮控件,用于触发某些操作或事件。 - **主要用途**:用于各种用户交互操作,如提交表单、执行某个动作等。 **1.3 Color Palette (Ext.ColorPalette)** - **xtype**: `...

Global site tag (gtag.js) - Google Analytics