在项目中遇到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. Keepalived+Nginx提供前端负载均衡+主从双机热备+自动切换

    原文链接:http://unun.in/linux/156.html 方案: 采用两台Nginx服务器作为前端,提供静态web内容,分发web请求,一主一从,Keepalived实现状态监测,保证 N ...

  2. 使用(Drawable)资源———ClipDrawable资源

    ClipDrawable代表从其他位图上截取的一个"图片片段".在XML文件中定义ClipDrawable对象使用<clip.../>元素,该元素的语法为: <? ...

  3. StackView的功能和用法

    StackView也是AdapterViewAnimator的子类,它也用于显示Adapter提供的系列View.SackView将会以“堆叠(Stack)”方式来显示多个列表项. 为了控制Stack ...

  4. MySQL密码丢失,解决方法

    我的MySQ安装路径是:D:\Program Files\MySQL 1.所以先cmd下切入盘 输入-> D: 输入->cd "D:\Program Files\MySQL\My ...

  5. 【Unity3d游戏开发】游戏中的贝塞尔曲线以及其在Unity中的实现

    RT,马三最近在参与一款足球游戏的开发,其中涉及到足球的各种运动轨迹和路径,比如射门的轨迹,高吊球,香蕉球的轨迹.最早的版本中马三是使用物理引擎加力的方式实现的足球各种运动,后来的版本中使用了根据物理 ...

  6. [html5] 学习笔记-Canvas标签的使用

    Canvas通过JavaScript来绘制2D图形.Canvas是逐像素渲染的.在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注.如果其位置发生变化,那么整个场景也需要重新绘制,包括 ...

  7. nRF51800 蓝牙学习 进程记录 1:感想

    一直想开一个高大上点的博客,觉得博客园不错,便申请了.一直没时间看,都快忘了,无意间登上提示申请到了.便写个东西看看. 正在学习nRF51822的蓝牙开发板,为了做毕设准备.备考中,一直没时间学,但今 ...

  8. HTML5部分元素

    Document HTML4文档声明 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &qu ...

  9. 偶遇event.target

    今天在学习其他人代码的时候见到了event.target.nodeName,event.target.dataset.刚开始是一头雾水,便google一下.发现大多数给出的词条都是有关jQuery事件 ...

  10. Fiddler教程【转】

    阅读目录 Fiddler的基本介绍 Fiddler的工作原理 同类的其它工具 Fiddler如何捕获Firefox的会话 Fiddler如何捕获HTTPS会话 Fiddler的基本界面 Fiddler ...