`
lawrenst
  • 浏览: 46798 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ext JS 分页

阅读更多
转载请注明出处,谢谢。

最近在看Ext JS,写了一个使用ExtJS进行分页的程序,后台是jsp代码。

ExtJS 代码:
Ext.onReady(function(){

var sm = new Ext.grid.CheckboxSelectionModel();

var cm = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),      //增加列模型
    sm,
        {header:'编号',dataIndex:'id',sortable:true},
        {header:'名称',dataIndex:'name',sortable:true},
        {header:'性别',dataIndex:'sex',sortable:true,renderer:function(value){
        if(value=='male'){
          return " <span style='color:red;font-weight:bold;'>红男 </span> <img src='image/user_male.png'>";
        }else{
          return " <span style='color:green;font-weight:bold;'>绿女 </span> <img src='image/user_female.png'>";
        }
        }},
        {header:'描述',dataIndex:'descn',sortable:true}
    ]);
    cm.defaultSortable = true;

    var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url:'fenye.jsp'}),  //后台,数据来源
        reader: new Ext.data.JsonReader({
                totalProperty: 'totalProperty',
                root: 'root'
    },
    [
        {name: 'id',mapping:'id'},
        {name: 'name',mapping:'name'},
        {name:'sex',mapping:'sex'},
        {name: 'descn',mapping:'descn'}
    ]),
    remoteSort:true
  
    });
     
    var grid = new Ext.grid.GridPanel({
    el: 'grid',
    title:'Ext Grid Test',
    width:450,
    height:410,
    trackMouseOver:false,
    loadMask: {msg:'正在加载数据,请稍侯……'},   //装在数据时候显示
    store:ds,
    cm: cm,
    sm:sm,
    bbar: new Ext.PagingToolbar({
            pageSize: 15,
            store: ds,
            displayInfo: true,
            displayMsg: '当前显示 {0} - {1}条记录 /共 {2}条记录',
            emptyMsg: "No topics to display"
        })
});

    grid.render();
  
    ds.load({params:{start:0, limit:15}});
  
});


后台代码:fenye.jsp

<%
  int TOTALCOUNT=100;   //共有100条数据
  String start = request.getParameter("start");
  String limit = request.getParameter("limit");

  int index = Integer.parseInt(start);
  int pageSize = Integer.parseInt(limit);
  String json = "{totalProperty:"+TOTALCOUNT+",root:[";
  String sex = "";
  int temp_count=0; //临时存储,后面要用到
  if(pageSize+index>TOTALCOUNT)  //最后一页,如果超出总数,则以总数为大 
temp_count=TOTALCOUNT;
  else
  temp_count=pageSize+index;
  for (int i = index; i < temp_count; i++) {
  if (i % 2 == 0) {
  sex = "male";
  } else {
  sex = "female";
  }
  json += "{id:" + i + ",name:'" + i + "',sex:'" + sex
  + "',descn:'descn" + i + "'}";
  if (i != temp_count - 1) {
  json += ",";
  }
  }
  json += "]}";
  response.getWriter().write(json);
  response.getWriter().close();  //必须将流关闭,才能显示数据,否则数据无法显示 

System.out.print(json);
  %>

好了,第一个小例子,下一个例子时候,将从数据库中读取数据。










1
1
分享到:
评论

相关推荐

    ext tree 分页

    在EXT JS框架中,"ext tree 分页"是一种优化技术,用于处理大量数据时避免页面卡顿的问题。在EXT JS的树形组件(TreePanel)中,如果一次性加载所有节点,特别是当树结构非常深或者节点数量巨大时,不仅会消耗大量...

    Ext-Js分页示例代码详解.pdf

    在EXT JS中,分页是一种常见且重要的功能,特别是在数据量较大时,为了提高用户体验,分页能够有效地分批次加载数据,避免一次性加载过多数据导致页面卡顿。EXT JS主要支持XML和JSON两种数据格式来实现分页。下面将...

    Ext实现分页查询,前台

    本示例主要介绍了如何使用Ext.js这个JavaScript框架来实现前端的分页查询功能。 首先,创建一个名为`resource`的数据存储(Store),它负责从服务器获取数据。这里的`Store`对象定义了字段(fields)、数据源URL...

    Ext 本地分页PagingStore.js

    可以直接在本地对数据进行分页显示,很强大!!!!(分页可以是JSON格式 也可以是Array格式)

    EXT分页工具条

    通过阅读`pageTool.js`源码,我们可以深入了解EXT分页工具条的工作原理,包括事件处理、DOM操作以及数据绑定等细节。 总的来说,EXT分页工具条是EXT框架中的一个重要组成部分,它为Web应用提供了一种高效、直观的...

    简单的小例子Ext+servlet 分页

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

    ext分页客户端demo Java js

    在这个"ext分页客户端demo Java js"的示例中,我们将探讨EXTJS如何实现客户端分页,以及如何与后端(如Java)进行数据交互,而无需在服务器端编写额外的Java代码。 EXTJS中的分页组件主要由Ext.grid.Panel和Ext....

    JS表格分页源码,EXT表格分页的迷你版

    JS的表格分页小工具代码,自己开发遇到需求时候开发的,只有分页功能,EXT表格的迷你版。有问题到:http://blog.csdn.net/ben_gmail/article/details/6585141留言谢谢。

    ext grid json分页显示

    总结来说,"ext grid json分页显示"是通过EXT.js的Grid组件结合DWR的Ajax能力,实现前端数据的分页加载和显示。这种方式既提高了用户界面的响应速度,又有效管理了大数据量的显示,是现代Web应用中常用的数据展示...

    ext4 表格分页实例代码

    EXT4虽然主要关注的是文件系统,但EXT4在这里可能是指EXT JS库的一个版本,EXT JS是一个强大的JavaScript UI框架,用于构建富客户端应用。EXT JS提供了丰富的组件,包括表格(Grid),支持分页功能,便于处理大量...

    Ext前台分页

    本篇文章将详细讲解基于Ext JS框架实现前台分页的原理和方法。 首先,理解“前台分页”概念。前台分页指的是在客户端,即用户的浏览器端进行数据的分页处理,而不是在服务器端。这种方式的优点是减少了服务器的负载...

    EXT JSON Sqlserver 分页 全部正常运行

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

    EXT树表分页(SERVLET)

    7. **部署与运行**:将开发完成的EXT应用程序(包括HTML、JavaScript、CSS文件等)和Servlet部署到服务器上,配置好Web应用容器(如Tomcat),确保URL路径正确,即可正常访问和使用EXT TreeGrid分页功能。...

    ext TreeGrid分页可编辑

    ### 关于Ext TreeGrid分页与可编辑功能的实现 #### 一、背景与目标 在Web应用开发中,特别是涉及到复杂数据展示的应用场景中,`Ext TreeGrid`是一种非常实用且灵活的数据展示组件,它结合了树形结构与表格的形式来...

    Ext组合框comboBox带分页

    用EXT来实现下拉框ComboBox 下拉框可以实现分页

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

    在EXT JS这个强大的JavaScript框架中,Store是用于管理和操作数据的核心组件。Store通常与Grid、Tree等组件结合,提供数据的加载、存储和分页功能。这篇博客“Ext中对于多种store数据分页实现示例”将深入探讨EXT JS...

    ext设置分页大小.rar

    `EXT`是一个流行的JavaScript库,主要用于构建富客户端应用程序,它提供了丰富的组件和功能,包括用于分页的组件。在EXT中设置分页大小是一项关键任务,这关系到用户如何控制和浏览数据。 标题"ext设置分页大小.rar...

    ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询

    2. **分页插件(Paging Toolbar)**:当与数据存储结合使用时,分页工具栏(`Ext.PagingToolbar`)可以在底部显示页码导航,允许用户切换页面。它需要配置`store`属性来引用数据存储,并通过`displayMsg`和`emptyMsg...

    Ext.Net 服务器端分页 存储过程

    Ext.NET是一个强大的JavaScript框架,用于构建富客户端Web应用程序。在这个场景中,我们关注的是"Ext.NET服务器端分页",这是一个优化用户界面性能并提高用户体验的技术。服务器端分页意味着每次只从服务器获取一...

Global site tag (gtag.js) - Google Analytics