最近工作项目需要,我也来扩展一下 ExtJs 分页.网上有很多..但没有找到项目要求的.
/**
* @author LDJ
* @date 2010-10-14 本分页组件提供 两个用户可以配置属性
* @config everyPageCount 显示分页连接个数 默认为 11
* @config everyPageSizeData 每页大小设置 为一个数组. 如 : [['5', 5], ['10', 10]]
*
* @type
*/
Ext.namespace('Ext.ux.grid')
Ext.ux.grid.PagingToolbarExp = function(config) {
var config = config || {};
this.everyPageCount = config.everyPageCount || 7;
this.everyPageSizeData = [ ['5', 5], ['10', 10], ['20', 20],
['50', 50], ['100', 100]];
if (config.everyPageSizeData) {
Ext.apply(this.everyPageSizeData, config.everyPageSizeData);
}
Ext.ux.grid.PagingToolbarExp.superclass.constructor.call(this, config);
this.initAction();
}
var T = Ext.Toolbar;
Ext.extend(Ext.ux.grid.PagingToolbarExp, Ext.PagingToolbar, {
displayMsg : "显示 第 【{0}】 条到 【{1}】 条记录,一共 【{2}】 条",
emptyMsg : "没有记录",
beforePageText : '页码',
afterPageText : '总页数【{0}】',
firstText : '首页',
prevText : '上一页',
nextText : '下一页',
lastText : '末页',
refreshText : '刷新',
initAction : function() {
},
initComponent : function() {
var pagingItems = [this.first = new T.Button({
tooltip : this.firstText,
overflowText : this.firstText,
iconCls : 'x-tbar-page-first',
disabled : true,
handler : this.moveFirst,
scope : this
}), this.prev = new T.Button({
tooltip : this.prevText,
overflowText : this.prevText,
iconCls : 'x-tbar-page-prev',
disabled : true,
handler : this.movePrevious,
scope : this
}), '-', this.beforePageText,
this.inputItem = new Ext.form.NumberField({
cls : 'x-tbar-page-number',
allowDecimals : false,
allowNegative : false,
enableKeyEvents : true,
selectOnFocus : true,
submitValue : false,
listeners : {
scope : this,
keydown : this.onPagingKeyDown,
blur : this.onPagingBlur
}
}), '-',
'每页 ', this.pageSizeCombox = new Ext.form.ComboBox({
store : new Ext.data.SimpleStore({
fields : ['text', 'value'],
data : this.everyPageSizeData
}),
mode : 'local',
displayField : 'text',
valueField : 'value',
editable : false,
scope : this,
allowBlank : false,
triggerAction : 'all',
value : this.pageSize,
listWidth : 45,
width : 45,
listeners : {
scope : this,
select : this.gotoSelectPage
}
}), ' 条', this.afterTextItem = new T.TextItem({
text : String.format(this.afterPageText, 1)
}), '-', this.next = new T.Button({
tooltip : this.nextText,
overflowText : this.nextText,
iconCls : 'x-tbar-page-next',
disabled : true,
handler : this.moveNext,
scope : this
}), this.last = new T.Button({
tooltip : this.lastText,
overflowText : this.lastText,
iconCls : 'x-tbar-page-last',
disabled : true,
handler : this.moveLast,
scope : this
}), '-', this.refresh = new T.Button({
tooltip : this.refreshText,
overflowText : this.refreshText,
iconCls : 'x-tbar-loading',
handler : this.doRefresh,
scope : this
}), '-', this.panelMe = new Ext.Panel({
id : 'pageBarItems',
html : this.pageSpliter()
})];
var userItems = this.items || this.buttons || [];
if (this.prependButtons) {
this.items = userItems.concat(pagingItems);
} else {
this.items = pagingItems.concat(userItems);
}
delete this.buttons;
if (this.displayInfo) {
this.items.push('->');
this.items.push(this.displayItem = new T.TextItem({}));
}
Ext.PagingToolbar.superclass.initComponent.call(this);
this.addEvents('change', 'beforechange');
this.on('afterlayout', this.onFirstLayout, this, {
single : true
});
this.cursor = 0;
this.bindStore(this.store, true);
},
onLoad : function(store, r, o) {
if (!this.rendered) {
this.dsLoaded = [store, r, o];
return;
}
var p = this.getParams();
this.cursor = (o.params && o.params[p.start]) ? o.params[p.start] : 0;
var d = this.getPageData(), ap = d.activePage, ps = d.pages;
this.afterTextItem.setText(String.format(this.afterPageText, d.pages));
Ext.getCmp('pageBarItems').getEl().dom.innerHTML = this.pageSpliter(
d.activePage, d.pages);
this.inputItem.setValue(ap);
this.first.setDisabled(ap == 1);
this.prev.setDisabled(ap == 1);
this.next.setDisabled(ap == ps);
this.last.setDisabled(ap == ps);
this.refresh.enable();
this.updateInfo();
this.fireEvent('change', this, d);
},
/**
*
* @param {}
* activePage 当前去向多少页
* @param {}
* totalPage 总页数
* @return {}
*/
pageSpliter : function(activePage, totalPage) {
var p = [];
var flag = false;
var halfFlag = false;
var mybarId = this.getId();
var firstStart = 1;
var lastEnd = this.everyPageCount;
p.push(' 第: 【');
var start;
var limit;
if (this.everyPageCount % 2 == 0) {
this.halfMidile = parseInt((this.everyPageCount) / 2); // 中间数的一半
start = activePage - this.halfMidile;
if (start <= 0) {
start = 1;
}
limit = activePage + this.halfMidile;
if (limit <= this.everyPageCount) {
limit = this.everyPageCount + 1;
}
if (limit > totalPage) {
limit = totalPage + 1;
}
} else {
this.halfMidile = parseInt((this.everyPageCount + 1) / 2); // 中间数的一半
// 3
start = activePage - this.halfMidile + 1;
if (start <= 0) {
start = 1;
}
limit = activePage + this.halfMidile;
if (limit <= this.everyPageCount) {
limit = this.everyPageCount + 1;
}
if (limit > totalPage) {
limit = totalPage + 1;
}
}
for (var i = start; i < limit; i++) {
flag = true;
p.push("<a href='javascript:void(0)' class='x-btn-over' style='padding-top:1px;padding-left:2px;padding-bottom:10px;font-weight: bold;font-size : 12px;' onclick=Ext.getCmp('"
+ mybarId
+ "').gotoPage(this.innerHTML) > "
+ i
+ " </a>");
}
p.push(' 】页');
if (flag) {
return p.join('');
} else {
return '';
}
},
gotoSelectPage : function() {
this.pageSize = this.pageSizeCombox.getValue();
this.inputItem.setValue(1);// 重新设置页码
var pageToNum = this.inputItem.getValue();
this.doLoad((Ext.util.Format.trim(pageToNum) - 1) * this.pageSize);
this.inputItem.setValue(Ext.util.Format.trim(pageToNum));
},
gotoPage : function(pageToNum) {
this.doLoad((Ext.util.Format.trim(pageToNum) - 1) * this.pageSize);
this.inputItem.setValue(Ext.util.Format.trim(pageToNum));
}
});
Ext.reg('pagingtoolbarexp',Ext.ux.grid.PagingToolbarExp);
- 大小: 5.1 KB
分享到:
相关推荐
EXTJS分页通常与数据访问对象(DAO)和动作控制器(Action)结合使用,形成一个完整的数据获取和展示流程。下面将详细阐述EXTJS分页的核心概念、实现方法以及DAO和Action在其中的作用。 一、EXTJS分页核心概念 1. ...
"Extjs树分页组件扩展"就是为了解决这一问题而设计的,它通过扩展TreeLoader和PagingToolbar,实现了在树形组件中进行分页加载的效果。 **TreeLoader的扩展** TreeLoader是ExtJS中负责异步加载树节点的类。在原生...
为了解决这个问题,EXTJS提供了一个名为“树型分页”(Tree Paging)的特性。本文将深入探讨EXTJS树型分页组件的工作原理、实现方法及其实用价值。 1. 树型分页原理 树型分页不同于传统的表格分页,因为它需要处理...
在标题和描述中提到的“ExtJs DWR扩展”是指将这两者结合使用,以增强数据交换和UI更新的能力。 1. **DWRProxy**: DWRProxy是ExtJs中的一个类,它作为DWR和ExtJs之间的桥梁,使得ExtJs可以利用DWR的远程调用功能。...
"Extjs Grid 扩展实例"是一个演示如何增强Grid功能的实践案例,通过这个实例,我们可以学习到如何在原有Grid的基础上进行自定义扩展,实现更复杂的数据管理和用户交互。 首先,"extend"在编程中通常意味着类的继承...
至于"ExtJs分页",开发者通常会在后台提供一个能接受页码和每页大小参数的接口,然后在前端Grid组件中配置分页插件,通过AJAX请求获取数据并更新页面。 总之,Spring MVC、MyBatis、Ehcache和ExtJS的组合为构建高...
在ExtJS4.2中实现后台分页是一个重要的功能,特别是在处理大量数据时,它可以显著提高应用程序的性能和用户...通过结合使用这些文件,开发者能够实现一个高效、可扩展的后台分页系统,以满足ExtJS4.2应用程序的需求。
这部分内容虽然没有直接涉及分页,但我们可以从中提取一些关键信息并进行扩展讲解。 ### 实现步骤 #### 步骤一:设置项目环境 1. **创建一个新的ASP.NET Web Forms项目**: - 打开Visual Studio。 - 选择“新建...
在树形组件中,虽然没有内置的分页支持,但我们可以通过自定义扩展来实现类似的功能。 要实现分页树,我们需要做以下几步: 1. **数据模型**:创建一个数据模型(Ext.data.Model),定义树节点的数据结构,包括...
扩展可能包含了优化策略,如延迟加载、分页或内存优化,以确保在过滤操作时保持良好的用户体验。 通过阅读博文链接(尽管在这里无法直接访问),我们可以获取更多关于这个特定扩展的详细信息,包括具体的实现方式、...
在给定的“Extjs4 combogrid扩展”中,我们主要关注的是如何将传统的下拉框(combo)扩展为同时支持网格(grid)显示的功能。 标题中的“Extjs4 combogrid扩展”意味着我们要在ExtJS 4框架内,改造原有的 Combo ...
打印Grid插件是为了满足这种需求而设计的,它允许开发者扩展ExtJS4 Grid Panel的功能,使其具备打印能力。这个插件通常包含一系列方法和配置选项,用于自定义打印样式、布局以及要打印的数据范围。 在"extjs4-ux-...
ExtJS的GridPanel就是一个强大的数据网格组件,支持分页、排序、过滤和编辑等功能。ExtJsExtenderControl的GridControl可能进一步增强了这些功能,例如增加了对ASP.NET数据源的支持,或是提供了更丰富的定制选项。 ...
在本例中,“ux.Andrie.pPageSize”可能是一个EXT社区成员Andrie开发的自定义分页大小选择器,它扩展了默认的EXT分页工具栏。 2. **分页工具栏(paging toolbar)**:EXT Grid的分页功能通常通过分页工具栏来实现,...
EXTTLD(EXTJS Tag Library Descriptors)则是EXTJS扩展标记的元数据,它定义了这些自定义标签的行为和属性。 以下是对EXTJS扩展标记中涉及的一些主要知识点的详细解释: 1. **EXTJS组件**:EXTJS的核心是它的组件...
在这个MVC(Model-View-Controller)分页实例中,我们将探讨如何利用ExtJS 4.0的MVC架构来实现数据的分页展示。MVC模式是软件工程中的一个设计模式,它将应用程序分为三个主要部分:模型(Model)处理数据,视图...
此压缩包"ext-addons-7.0.0"包含了EXTJS 7.0的企业级扩展,这些扩展可能包括但不限于以下几类: 1. **新组件**:EXTJS 核心库可能已经包含了许多常见的UI组件,如表格、树形视图、图表等。然而,扩展包可能添加了更...
在本文中,我们将深入探讨如何实现一个基于ExtJS和Direct Web Remoting (DWR)的带分页、分组及后台排序功能的Grid组件。这个功能整合了多种技术,包括ExtJS、DWR、Spring和Hibernate,以创建一个高效且灵活的数据...
- 分页功能是处理大量数据时的常见需求,在Extjs中可以通过特定的组件如GridPanel实现分页。 #### 13. 表单组件 Extjs中的表单组件丰富,包括: - FormPanel类用于封装表单。 - 各种表单输入元素的配置和使用。 ...
1. **数据管理组件**:EXTJS本身提供了强大的数据管理机制,但扩展组件可能会提供更高级的数据过滤、分页、检索和同步功能。这在处理大数据量或实时更新的数据时尤其有用。 2. **用户界面组件**:EXTJS的扩展组件...