在项目中遇到Grid前端分页,本人也是刚接触extjs没多久,为了实现效果,一直找了很久才实现出来,对于代码中的一些也不能详细的说明出来,

不知道能不能帮助到遇到同样问题的朋友,所以将例子代码贴出来大家一起相互学习下。

在项目中时常会用到前端分页的效果,使用grid来进行分页,

在源代码中\examples\ux\data\PagingMemoryProxy.js,此时要使用该js文件,在项目引用该文件。

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

分页的工具条是 Ext.toolbar.Paging类,xtype:pagingtoolbar,该工具绑定的store数据和grid绑定数据一样,

dockedItems: [{
xtype: 'pagingtoolbar',
store: me.mystore,
dock: 'bottom',
cls: "smallPagingToolBar",
inputItemWidth: 50,
displayInfo: true,
doRefresh: function () {
me.refresh();
}
}

创建store数据时要注意proxy,本人在使用时不太理解该属性中的信息,只能按照复制粘贴,创建的store数据会根据指定的pageSize,进行自行分页

            me.mystore = Ext.create("Ext.data.Store", {
fields: me.gridFilds,
pageSize: 5, // 指定每页显示2条记录
autoLoad: true,
data: me.gridData, /*生成的数组数据*/
proxy: {
type: 'pagingmemory', /*引用的PagingMemoryProxy类*/
reader: {
type: 'json',
totalProperty:'total'
}
}
});

以下是完整代码:

Ext.onReady(function(){
// Ext.Msg.alert("提示","hello world!!!")
Ext.define("MyGridPanel",{
/*静态数据,可以从后台获取*/
gridData:[
{id:"1001",name:"wind",tel:"18603071234"},
{id:"1002",name:"小月",tel:"18603073578"},
{id:"1003",name:"冷清雪",tel:"18603073569"},
{id:"1004",name:"布隆",tel:"18603073214"},
{id:"1005",name:"莫甘娜",tel:"18603072568"},
{id:"1006",name:"阿里",tel:"18603073247"},
{id:"1001",name:"阿卡丽",tel:"18603071563"},
{id:"1001",name:"卡特",tel:"18603074758"},
{id:"1001",name:"死歌",tel:"18603072354"},
], //保存数据 totalCount:0, //数据总条数
pageSize:5, //每页显示的条数
mystore:null, // 创建的store数据对象
myGridPanel: null , //GridPanel对象
gridFilds:[], //数据列模型 /* 构建一个GridPanel组件 */
CreateGridPanel:function(){
/* 创建列数据 */
var gridColumn = [{
header: "用户ID",
dataIndex: "id",
width:100,
hideable: false,
sortable: true,
draggable: false,
}, {
header: "用户名",
width: 180,
dataIndex: "name",
hideable: false,
sortable: true,
draggable: false,
}, {
header: "手机号",
flex:1,
dataIndex: "tel",
}]; var me = this;
for (var i = 0; i < gridColumn.length; i++) {
me.gridFilds.push(gridColumn[i].dataIndex);
} /* 构建一个store数据 */
me.totalCount = me.gridData.length;
me.mystore = Ext.create("Ext.data.Store", {
fields: me.gridFilds,
pageSize: me.pageSize, // 指定每页显示2条记录
autoLoad: true,
data: me.gridData,
proxy: {
type: 'pagingmemory',
reader: {
type: 'json',
totalProperty:'total'
}
}
}); var picker = Ext.create("Ext.grid.Panel", {
store: me.mystore,
columns: gridColumn,
layout:"fit",
height:350,
enableColumnHide: false,
sortableColumns: false,
autoScroll: true,
columnLines: true,
noDefaultSelect: true, //不默认选择第一行
viewConfig:{
stripeRows:true,//在表格中显示斑马线
},
dockedItems: [{
xtype: 'pagingtoolbar',
store: me.mystore,
dock: 'bottom',
cls: "smallPagingToolBar",
inputItemWidth: 50,
displayInfo: true,
doRefresh: function () {
me.refresh();
}
}, {
xtype: "toolbar",
dock: "top",
height: 40,
style: "padding-bottom:0;border-bottom:1px solid #ddd !important",
items: [{
xtype: 'textfield',
name: 'fastKey',
fieldLabel: '查找',
labelWidth: 40,
labelAlign: "right",
emptyText: "没有查询到数据", // 分页没有数据时,分页右侧显示的内容
width: 230,
listeners: {
change: function (a) {
/*过滤查询*/
me.filterData();
}
}
}, {
xtype: "displayfield",
value: "可选择信息("
}, {
xtype: 'label',
style: "color:red",
text: me.totalCount,
name: "totalCount"
}, {
xtype: "displayfield",
value: ")条"
}, "->"]
}]
}); return picker;
}, refresh:function(){
//清空筛选输入框的数据,
var fastKey = this.myGridPanel.query("[name='fastKey']")[0];
fastKey.setValue("");
/*重新加载数据*/
this.filterData();
}, /*筛选数据*/
filterData: function () {
var me = this;
var fastKey = me.myGridPanel.query("[name='fastKey']")[0];
var searchValue = fastKey.getValue().toString().toLowerCase(),
newData = []; //newData保存筛选出来的数据
if (searchValue == "") {
newData = me.gridData;
} else {
for (var i = 0, len = me.gridData.length; i < len; i++) {
for (var j = 1, jlen = me.gridFilds.length; j < jlen; j++) {
if (me.gridData[i][me.gridFilds[j]] && me.gridData[i][me.gridFilds[j]].toString().toLowerCase().indexOf(searchValue) >= 0) {
newData.push(me.gridData[i]);
break;
}
}
}
}
/*重新加载数据*/
me.myGridPanel.store.loadData(newData);
me.myGridPanel.store.getProxy().data = newData; //更新在缓存的数据
me.myGridPanel.store.loadPage(1); //重新刷新
me.myGridPanel.query("[name='totalCount']")[0].setText(newData.length);
}, /*创建窗体*/
CreateWindow:function(){
/*构建gridpanel组件*/
var me = this;
me.myGridPanel = me.CreateGridPanel();
var win = Ext.create("Ext.window.Window",{
title:"Grid前端分页",
width:500,
height:400,
id:"MyWindow",
renderTo:Ext.getBody(),
items:me.myGridPanel
});
win.show();
}
});
var mygridpanel = Ext.create("MyGridPanel");
mygridpanel.CreateWindow(); });

效果图:

    

Extjs中grid前端分页使用PagingMemoryProxy【二】的更多相关文章

  1. EXTJS中grid的数据特殊显示,不同窗口的数据传递

    //EXTJS中grid的数据特殊显示renderer : function(value, metaData, record, rowIndex, colIndex, store, view) { v ...

  2. 基于vue2.0实现仿百度前端分页效果(二)

    前言 上篇文章中,已经使用vue实现前端分页效果,这篇文章我们单独将分页抽离出来实现一个分页组件 先看实现效果图 代码实现 按照惯例,我们在冻手实现的时候还是先想一想vue实现组件的思路 1.需要提前 ...

  3. Extjs中grid 的ColumnModel 属性配置

    一, 用数组的方式配置ColumnModel var colModel = new Ext.grid.ColumnModel([ { header:'编号', dataIndex:'id',width ...

  4. 64. Extjs中grid 的ColumnModel 属性配置

    转自:https://blog.csdn.net/u011530389/article/details/45821945 本文导读:Ext.grid.ColumnModel 该类用于定义表格的列模型, ...

  5. Extjs中grid行的上移和下移

    一.将up和down按钮放到tbar中,然后选中grid行即可实现上移和下移 var up = new Ext.Action({ text : 'Up', icon : 'up.png',//或者添加 ...

  6. Extjs中grid表格中去掉红三角

    在编辑Extjs的gridpanel的时候,数据有错误或是修改在每个单元格上都会出现红色的小三角,在每个列上面可以配置allowBlank: false来标识这个不可以为空 有的时候在保存数据时如果不 ...

  7. NSS_07 extjs中grid在工具条上的查询

    碰到的每个问题, 我都会记下走过的弯路,尽量回忆白天的开发过程, 尽量完整, 以使自己以后可以避开这些弯路. 这个问题在系统中应用得比较多, 在一个gridpanel的工具条上有俩搜索框, panel ...

  8. NSS_04 extjs中grid接收datetime类型参数列

    今天在做用户列表时发现, asp.net mvc3的控制器在返回JsonResult结果时, 会把对象内的DateTime类型成员,解析为类似于\/Date(1238606590509)\/的格式 , ...

  9. extjs中grid中行内文本或图片居中显示

    我是看了网上写的方法调试自己的代码来实现的,实现的方式是当加载store数据时改变grid的行样式,源码如下: html代码: <div id="weatherP_grid-body& ...

随机推荐

  1. 最简化模型2——css3分阶段动画效果(经过实测)之转动的div

    @keyframes mymove{    0%{top: 0;left: 0;transform:rotate(50deg);}    10%{top: 100px;left: 50px;trans ...

  2. js架构设计模式——由项目浅谈JS中MVVM模式

    1.    背景 最近项目原因使用了durandal.js和knockout.js,颇有受益.决定写一个比较浅显的总结. 之前一直在用SpringMVC框架写后台,前台是用JSP+JS+标签库,算是很 ...

  3. [转载]rabbitmq可靠发送的自动重试机制

    转载地址http://www.jianshu.com/p/6579e48d18ae http://www.jianshu.com/p/4112d78a8753 接这篇 在上文中,主要实现了可靠模式的c ...

  4. BNU Online Judge-29140

    题目链接 http://www.bnuoj.com/bnuoj/problem_show.php?pid=29140 看到这样的题,应该想到an  与an-1  的关系,他们是会有关系的你要去找 代码 ...

  5. C# 编写通用的JSON数据进行序列化和反序列化

    注意事项:使用JSON系列化和反系列化,必须要添加引用System.Runtime.Serialization. 1.通用类代码如下: /// <summary>    /// JSON序 ...

  6. NSException异常处理

    异常处理是管理非典型事件(例如未被识别的消息)的过程,此过程将会中断正常的程序执行.如果没有足够的错误处理,遇到非典型事件时,程序可能立刻抛出(或者引发)一种被称之为异常的东西,然后结束运行. 异常的 ...

  7. ASP.NET Zero--12.一个例子(5)商品分类管理-编辑分类

    1.添加编辑按钮 打开文件Index.js [..\MyCompanyName.AbpZeroTemplate.Web\Areas\Mpa\Views\Category\Index.js] 在acti ...

  8. ArcGIS10.2直连PostgreSQL存在问题

    现象: 将下载到的libeay32.dll, libiconv-2.dll, libintl-8.dll, libpq.dll, ssleay32.dll文件拷贝到Desktop 安装目录的bin目录 ...

  9. PHP反射之类的反射

    最近在琢磨如何用PHP实现站点的插件功能,需要用到反射,于是现学了一下,笔记如下: class Person { public $name = 'Lily'; public $gender = 'ma ...

  10. Python学习--17 进程和线程

    线程是最小的执行单元,而进程由至少一个线程组成.如何调度进程和线程,完全由操作系统决定,程序自己不能决定什么时候执行,执行多长时间. 进程 fork调用 通过fork()系统调用,就可以生成一个子进程 ...