[Ext JS 4] Grid 实战之分页功能

最新推荐文章于 2023-01-28 11:28:58 发布
最新推荐文章于 2023-01-28 11:28:58 发布
阅读量409 收藏
点赞数
分类专栏： extjs4

前言
分页功能的实现有两种途径：

一种是服务端分页方式， 也就是web客户端传递页码参数给服务端，服务端根据页面参数返回指定条数的数据。也就是要多少取多少。这种方式比较适合Grid  的数据量很大，需分批取。

另一种是客户端分页方式， 一次性从服务端取回所有的数据在客户端这边实现分页。这种自然适合数据量较少的状况，减少和服务端的交互， 对性能有一些帮助。这种方式还有一种好处就是对于初学Ext JS Grid 或分页功能比较简单和直观了。

Ext 目前的官方文档中，对于客户端分页的方式介绍和实例不多，而服务端的方式，跟具体的服务端的技术相关，Ext 也就没做太多的介绍了。

本篇先介绍分页实现的思想，然后从客户端的实现方式介绍开始，毕竟测试起来简单一些；最后介绍服务端的方式。

 


分页的效果：

 

 

 \
 


Grid Panel 分页实现思想
要在Grid上实现分页功能，

首先要给这个Grid Panel 添加一个 Ext.PagingToolbar

添加的方式可以使用 bbar 的config 添加到button bar

也可以使用dockedItems 的 config 添加

类似：


[javascript]
bbar: Ext.create('Ext.PagingToolbar',{ 
            store: store, 
            displayInfo: true, 
            displayMsg: 'Displaying topics {0} - {1} of {2}', 
            emptyMsg: "No topics to display", 
          } 
         ), 

bbar: Ext.create('Ext.PagingToolbar',{
      store: store,
      displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
          }
         ),

或是：


[javascript]
dockedItems: [{ 
            xtype: 'pagingtoolbar', 
            store: store,   // same store GridPanel is using  
            dock: 'bottom', 
            displayInfo: true 
        }] 

dockedItems: [{
         xtype: 'pagingtoolbar',
         store: store,   // same store GridPanel is using
         dock: 'bottom',
         displayInfo: true
     }]
使用Ext.create 或是直接在 [] config 都可以。

接下来就是这个store 的处理了。page 的store和一般的store 会有一些差别的地方，下面会介绍到。

 

 

客户端分页方式(local data)
Ext JS 中将客户端的分页也叫“local data‘ 的分页。

在Ext JS 的官方文档中有提到关于PageingStore这样一篇介绍

Ext.ux.data.PagingStore .

这种方式通过添加一些新的Class 的方式实现。而且这个扩展包是针对Ext js 3.x 来实现的， 需要下载扩展包。

而这篇介绍里的下载link 有需要权限。总之， 有点麻烦。

在Ext JS 4的新版本中，完全可以不用这种方式。

Ext JS API 中有以下这个Class, 用它构造的store 就可以实现分页效果了。


Ext.ux.data.PagingMemoryProxy   proxy: pagingmemory

需要特别注意的是 Ext 的导入包中ext-all.js 并没包含这个类， 看上去这个是作为扩展包。

所以使用前需要导入这个包的 定义js 文件，或是使用Ext 的动态载入方式导入。

 


直接看例子：

 

[javascript]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
 
<script type="text/javascript" src="../lib/extjs/ext-all.js"></script> 
<script type="text/javascript" src="../lib/extjs/ux/data/PagingMemoryProxy.js"></script> 
 
<link rel="stylesheet" type="text/css" href="../lib/extjs/resources/ext-theme-neptune/ext-theme-neptune-all.css" /> 
 
<script type="text/javascript"> 
 
Ext.onReady(function(){ 
     
    var itemsPerPage = 4; 
    var store = Ext.create('Ext.data.Store', { 
        fields:['name', 'email', 'phone'], 
        pageSize: itemsPerPage, 
        proxy: { 
            type: 'pagingmemory', 
            data: [ 
                                    { 'name': 'ALisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  }, 
                                    { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" }, 
                                    { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  }, 
                                    { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }, 
                                    { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  }, 
                                    { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" }, 
                                    { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  }, 
                                    { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  }, 
                                    { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" }, 
                                    { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  }, 
                                    { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  } 
           ] 
        } 
    });  
     
    store.loadPage(1); 
     
    Ext.create('Ext.grid.Panel', { 
        title: 'Simpsons', 
        store: store, 
        columns: [ 
            { text: 'Name',  dataIndex: 'name' }, 
            { text: 'Email', dataIndex: 'email', flex: 1 }, 
            { text: 'Phone', dataIndex: 'phone' } 
        ], 
        height: 200, 
        width: '100%', 
        dockedItems: [{ 
            xtype: 'pagingtoolbar', 
            store: store,   // same store GridPanel is using  
            dock: 'bottom', 
            displayInfo: true 
        }], 
        renderTo: Ext.getBody() 
    }); 
 
 
}); 
</script> 
 
</head> 
<body> 
 
</body> 
</html> 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="../lib/extjs/ext-all.js"></script>
<script type="text/javascript" src="../lib/extjs/ux/data/PagingMemoryProxy.js"></script>

<link rel="stylesheet" type="text/css" href="../lib/extjs/resources/ext-theme-neptune/ext-theme-neptune-all.css" />

<script type="text/javascript">

Ext.onReady(function(){
 
 var itemsPerPage = 4;
 var store = Ext.create('Ext.data.Store', {
     fields:['name', 'email', 'phone'],
     pageSize: itemsPerPage,
     proxy: {
         type: 'pagingmemory',
         data: [
                               { 'name': 'ALisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
                              { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
                              { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
                              { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  },
                              { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
                              { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
                              { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
                              { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
                              { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
                              { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
                              { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
        ]
     }
 }); 
 
 store.loadPage(1);
 
 Ext.create('Ext.grid.Panel', {
     title: 'Simpsons',
     store: store,
     columns: [
         { text: 'Name',  dataIndex: 'name' },
         { text: 'Email', dataIndex: 'email', flex: 1 },
         { text: 'Phone', dataIndex: 'phone' }
     ],
     height: 200,
     width: '100%',
     dockedItems: [{
         xtype: 'pagingtoolbar',
         store: store,   // same store GridPanel is using
         dock: 'bottom',
         displayInfo: true
     }],
     renderTo: Ext.getBody()
 });


});
</script>

</head>
<body>

</body>
</html>需要说明的：

1.一定要导入PagingMemoryProxy.js

<script type="text/javascript" src="../lib/extjs/ux/data/PagingMemoryProxy.js"></script>

也可以使用动态导入的方式（先设置允许动态导入和导入的文件路径，接着使用require 方式导入）


[javascript]
Ext.Loader.setConfig({enabled: true}); 
Ext.Loader.setPath('Ext.ux', 'lib/extjs/ux'); 
Ext.require([ 
             'Ext.ux.data.PagingMemoryProxy' 
         ]); 

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'lib/extjs/ux');
Ext.require([
             'Ext.ux.data.PagingMemoryProxy'
         ]);
2. store 的proxy 里的type一定要是 'pagingmemory'。 如果要是按照一般的store 方式定义。

则在页面上 toolbar 会有， 但是一次会把所有数据显示出来， 翻页就没什么效果了。

 

 

服务器端分页方式

服务器端的分页方式和客户端比较起来，差别仅仅在store 的定义上。

添加的PagingToolbar有前进或后退按钮，点击的时候是会把页面的一些信息通过url 传递到服务端。类似 ?_dc=1374646308167&page=2&start=4&limit=4


以jsp 来说，就可以通过request.getParameter得到这些值了。


String sPage = request.getParameter("page");
String sStart = request.getParameter("start");
String sLimit = request.getParameter("limit");

有了这些值，就可以在服务端做一些过滤了， 看例子：有两个文件

testPageGrid.html

pageGridData.jsp  -- jsp 输出服务端数据


[javascript]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
 
<script type="text/javascript" src="../lib/extjs/ext-all.js"></script> 
<link rel="stylesheet" type="text/css" href="../lib/extjs/resources/ext-theme-neptune/ext-theme-neptune-all.css" /> 
<script> 
 
Ext.Loader.setConfig({enabled: true}); 
Ext.Loader.setPath('Ext.ux', '../lib/extjs/ux'); 
Ext.require([ 
             'Ext.ux.data.PagingMemoryProxy' 
         ]); 
          
Ext.onReady(function(){ 
    var itemsPerPage = 4; 
    var store = Ext.create('Ext.data.Store', { 
        fields:['name', 'email', 'phone'], 
        pageSize: itemsPerPage, 
        proxy: { 
            type: 'ajax', 
            url: 'pageGridData.jsp', 
            reader: { 
                root: 'items', 
                totalProperty: 'totalCount' 
            } 
        }        
    });  
     
    store.loadPage(1); 
     
    Ext.create('Ext.grid.Panel', { 
        title: 'Simpsons', 
        store: store, 
        columns: [ 
            { text: 'Name',  dataIndex: 'name' }, 
            { text: 'Email', dataIndex: 'email', flex: 1 }, 
            { text: 'Phone', dataIndex: 'phone' } 
        ], 
        height: 200, 
        width: '100%', 
        dockedItems: [{ 
            xtype: 'pagingtoolbar', 
            store: store,   // same store GridPanel is using  
            dock: 'bottom', 
            displayInfo: true 
        }], 
        renderTo: Ext.getBody() 
    }); 
     
}); 
</script> 
</head> 
<body> 
 
</body> 
</html> 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="../lib/extjs/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../lib/extjs/resources/ext-theme-neptune/ext-theme-neptune-all.css" />
<script>

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../lib/extjs/ux');
Ext.require([
             'Ext.ux.data.PagingMemoryProxy'
         ]);
        
Ext.onReady(function(){
 var itemsPerPage = 4;
 var store = Ext.create('Ext.data.Store', {
     fields:['name', 'email', 'phone'],
     pageSize: itemsPerPage,
     proxy: {
            type: 'ajax',
            url: 'pageGridData.jsp',
            reader: {
                root: 'items',
                totalProperty: 'totalCount'
            }
     }    
 }); 
 
 store.loadPage(1);
 
 Ext.create('Ext.grid.Panel', {
     title: 'Simpsons',
     store: store,
     columns: [
         { text: 'Name',  dataIndex: 'name' },
         { text: 'Email', dataIndex: 'email', flex: 1 },
         { text: 'Phone', dataIndex: 'phone' }
     ],
     height: 200,
     width: '100%',
     dockedItems: [{
         xtype: 'pagingtoolbar',
         store: store,   // same store GridPanel is using
         dock: 'bottom',
         displayInfo: true
     }],
     renderTo: Ext.getBody()
 });
 
});
</script>
</head>
<body>

</body>
</html>
[java]
<% 
response.setContentType( "text/html; charset=UTF-8" ); 
 
//page=2&start=4&limit=4  
String sPage = request.getParameter("page"); 
String sStart = request.getParameter("start"); 
String sLimit = request.getParameter("limit"); 
int iPage = Integer.valueOf(sPage); 
int iStart = Integer.valueOf(sStart); 
int iLimit = Integer.valueOf(sLimit); 
int totalCount = 12; 
 
StringBuffer dataBuffer = new StringBuffer(); 
dataBuffer.append("{totalCount:'").append(totalCount).append("',"); 
dataBuffer.append("items:["); 
 
for(int i =0;i<iLimit;i++) 
{ 
    dataBuffer.append("{"); 
    String name = "jack_"+sPage+"_"+String.valueOf(i); 
    String mail = "jack"+sPage+"_"+String.valueOf(i)+"@email.com"; 
    String phone = "000-"+sPage+"_"+String.valueOf(i); 
    dataBuffer.append("name:'"+name+"',"); 
    dataBuffer.append("email:'"+mail+"',"); 
    dataBuffer.append("phone:'"+phone+"'"); 
    dataBuffer.append("}"); 
    if(i<iLimit-1) 
    { 
        dataBuffer.append(","); 
    } 
} 
 
dataBuffer.append("]"); 
dataBuffer.append("}"); 
out.write(dataBuffer.toString()); 
out.flush(); 
%> 

<%
response.setContentType( "text/html; charset=UTF-8" );

//page=2&start=4&limit=4
String sPage = request.getParameter("page");
String sStart = request.getParameter("start");
String sLimit = request.getParameter("limit");
int iPage = Integer.valueOf(sPage);
int iStart = Integer.valueOf(sStart);
int iLimit = Integer.valueOf(sLimit);
int totalCount = 12;

StringBuffer dataBuffer = new StringBuffer();
dataBuffer.append("{totalCount:'").append(totalCount).append("',");
dataBuffer.append("items:[");

for(int i =0;i<iLimit;i++)
{
 dataBuffer.append("{");
 String name = "jack_"+sPage+"_"+String.valueOf(i);
 String mail = "jack"+sPage+"_"+String.valueOf(i)+"@email.com";
 String phone = "000-"+sPage+"_"+String.valueOf(i);
 dataBuffer.append("name:'"+name+"',");
 dataBuffer.append("email:'"+mail+"',");
 dataBuffer.append("phone:'"+phone+"'");
 dataBuffer.append("}");
 if(i<iLimit-1)
 {
  dataBuffer.append(",");
 }
}

dataBuffer.append("]");
dataBuffer.append("}");
out.write(dataBuffer.toString());
out.flush();
%>
需特别注意的是：

1. 一定要通过http url  的方式访问测试。放在tomcat 或是weblogic 中。

2. store 中要指定reader 的totalProperty。否则就只有一页了。


开心的静静
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ext4.1 Grid 分页查询
dawuafang
11-16 140
最近用Ext4.1自己做了做项目的练习：把一些知识点，在这里记录下来了！ 上面一个form表单，用作添加用户信息，包含了一些验证技巧。下面是一个带查询参数的分页Grid。 /**预加载的组件**/ Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.toolbar.Paging', ...
学习EXT第五日--Grid组件的简易分页
键键的专栏
01-22 2524
关于grid的分页方式我个人理解有两种，我只针对对数据库表或视图的操作思路做一些讲解。第一种是通过json类的调用，使查询出来的数据格式化，然后传回grid所在页面。在这种方法下，需要.net framework 2.0以上框架和一个json类的支持，当然此方法操作数据表最方便。第二种则是通过拼接字符串，就可以达到效果。这种方法只需要.net framework1.1框架以上支持就可以了。
Ext Grid分页
dwj520的专栏
12-12 1258
代码如下: Ext.onReady(function() { var ds = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url:db.jsp}), reader: new Ext.data.JsonReader({ root: root1,
EXT2.0: GridPanel 分页方法绝好例子
南极光经验分享
07-15 5165
EXT2.0: GridPanel 分页方法绝好例子将代码保持成html文件，放在ext 包路径下面，直接打开即可，看到效果 "-//W3C//DTD HTML 4.0 Transitional//EN">        "ext2.0/resources/css/ext-all.css" type=text/css rel=stylesheet>       
ExtJs动态grid的生成
03-20
在IT领域，ExtJS是一个广泛使用的JavaScript库，用于构建富客户端Web应用程序，特别是那些需要复杂用户界面的应用。本文将深入探讨如何在ExtJS中动态生成Grid，这是一个非常实用的功能，可以适应不断变化的数据需求...
Ext实战项目-进销存管理系统
10-28
3. **表格（Grid）**：用于显示和编辑数据，例如供应商列表、商品列表等，ExtJS的GridPanel提供了分页、排序、过滤等功能。 4. **表单（Form）**：处理用户输入，如添加新的供应商、商品信息，使用FieldSet、...
ext-3.4.0开发包
08-30
在"example"部分，开发者可以找到EXTJS 3.4.0的实战示例代码，这些示例涵盖了EXTJS的各种组件和功能，包括基础组件的使用、数据绑定的实例、布局管理的展示等。通过学习和研究这些例子，开发者可以快速掌握EXTJS的...
ext2.0的源码和一些example
07-03
EXT 2.0中的Grid组件用于展示大量结构化数据，支持分页、排序、过滤等功能。Grid的创建涉及配置项如store（数据源）、columns（列定义）等。例如： ```javascript var grid = Ext.create('Ext.grid.Panel', { ...
extjs grid示例代码
05-06
Grid组件在Web应用中广泛使用，因为它提供了强大的数据展示、排序、分页、筛选和编辑功能。以下是对`ExtJS Grid`示例代码的详细解析： 1. **Grid的基本结构** - `Ext.grid.Panel`：这是Grid组件的基础类，它包含了...
jqGrid分页
12-17
里面有所需的jar包，css文件和js文件，还有写的demo，从分页.js开始发送请求，action.java里查出数据，daoImpl.java是写的SQL层。
动画效果的grid分页
03-12
动画效果的grid分页动画效果的grid分页动画效果的grid分页动画效果的grid分页动画效果的grid分页动画效果的grid分页动画效果的grid分页
Ext前台分页（页面分页）
05-27
实现前台分页的扩展文件（来源于网络） 博文链接：https://simplehumn.iteye.com/blog/552702
grid分页
hxehuang的专栏
06-29 371
最近一直学习Ext，关于gird分页也困扰了我好久，而且网上找了很多资料，现总结一下：1、js中定义的store        var Store = new Ext.data.Store({  proxy:new Ext.data.HttpProxy({url: 后台操作的servlet}),  reader:new Ext.data.JsonReader({   t
[Ext JS Grid] 前端数据分页Grid(内存)
最新发布
oscar999的专栏
01-28 673
在后端数据接口中， 根据page、start和limit 这三个参数， 返回对应页数的数据。 但是如果使用的是memory等类型的前端数据时，数据是一开始就全部初始化好了的， 分页要怎样处理呢？
J2EE之 Extjs4.0 Grid 分页显示
skyxuyan的专栏
01-13 9704
ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。 功能丰富，无人能出其右。 无论是界面之美，还是功能之强，ext的表格控件都高居榜首。 单选行，多选行，高亮显示选中的行，拖拽改变列宽度，按列排序，这些基本功能ExtJS轻量级实现。 自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些
ExtJS Grid组件实现分页功能
u013905744的专栏
12-26 1444
在网上找了半天，也没有找到很好的Grid组件实现分页功能的实例。 用了半天时间搞定了，来记录下 前端使用的是ExtJS MVC模式 1. store /// Ext.define("AM.store.UserInfo", { extend: 'Ext.data.Store', model: 'AM.model.UserInfo', pageSize: 4
extjs grid 分页 java_extjs grid 分页
weixin_39567169的博客
02-23 146
在使用extjs创建带分页功能的 grid 如下：１.创建一个模型// 　创建算定义模型　模型名称 UserExt.define('User', {extend: 'Ext.data.Model',fields: ['name', 'email', 'phone', 'birthDate']　// 加载指定的数据字段});２.　创建store 来存储模型，其中　myPageSize 是默认的页面初...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值