/**
* Page Size Plugin for Paging Toolbar
*
* @author wjc
*/
Ext.ux.PageSizePlugin = Ext.extend(Ext.form.ComboBox, {
store: new Ext.data.SimpleStore({
fields: ['text', 'value'],
data: [['5', 5], ['10', 10], ['15', 15], ['20', 20], ['25', 25], ['50', 50], ['100', 100]]
}),
mode: 'local',
displayField: 'text',
valueField: 'value',
allowBlank: false,
triggerAction: 'all',
width: 50,
maskRe: /[0-9]/ ,
beforeText:'显示',
afterText:'条/页',
init: function(paging) {
paging.on('render', this.onInitView, this);
},
onInitView: function(paging) {
paging.insert(paging.items.length-2,'-', this.beforeText, this, this.afterText);
function GetCookie(cookieName){
var cookies = document.cookie;
var cStartIndex = -1, cEndIndex = -1;
cookieName = cookieName + "=";
cStartIndex = cookies.indexOf(cookieName);
if(cookies.length && (-1 != cStartIndex))
{
cEndIndex = cookies.indexOf(";", cStartIndex + cookieName.length)
if(-1 == cEndIndex)
{
cEndIndex = cookies.length;
}
return cookies.substring(cStartIndex + cookieName.length, cEndIndex);
}
return null;
};
var pageSize = GetCookie("PageSizePlugin_pageSize");
if (pageSize!=null && pageSize!=""){
this.setValue(pageSize);
}else{
this.setValue(paging.pageSize);
}
this.on('select', this.onPageSizeChanged, paging);
this.on('specialkey', function(combo, e) {
if(13 === e.getKey()) {
this.onPageSizeChanged.call(paging, this);
}
});
},
onPageSizeChanged: function(combo) {
function SetCookie(cookieName, value){
cookieValue=value;
var date = new Date();
date.setTime (date.getTime() + 3600000000); //设置过期时间
document.cookie = cookieName + "=" + cookieValue + ";expires=" + date.toGMTString()+";path=/"; //设置cookie值
};
this.pageSize = parseInt(combo.getRawValue(), 10);
SetCookie("PageSizePlugin_pageSize",this.pageSize);
this.doLoad(0);
}
});
分享到:
相关推荐
在EXTJS中,PagingToolbar 是一个非常实用的组件,用于在大数据集上实现分页显示,提升用户体验。然而,在实际使用过程中,我们可能会遇到一些问题,比如在点击“下一页”按钮时,加载的数据与预设的查询条件不符。...
在这个主题中,我们将深入探讨如何结合TreeStore和pagingToolbar实现分页功能。 在传统的表格数据展示中,分页是一种常见的优化策略,它允许用户逐页查看大量数据,而不是一次性加载所有内容。在树形数据中,由于...
Ext JS PagingToolbar组件是用于实现数据分页显示的重要工具,尤其在处理大量数据时非常有用。它提供了一种用户友好的界面,使用户能够轻松浏览和导航大量的信息。PagingToolbar通常与Ext JS的数据存储(如Store)和...
参考: Ext.PagingToolbar.js 如有BUG还请各位提出或留言. 附件中有图片, 一看就知道. 用法: var grid = new Ext.grid.GridPanel({ bbar: new Ext.PM3PagingToolbar({ store : store, displayInfo : true, ...
在EXTJS3中,`Ext.PagingToolbar()` 是一个非常重要的组件,用于在大量数据的网格或视图中实现分页功能。这个组件允许用户轻松地浏览和操作大量的记录,而不需要一次性加载所有数据,从而提高了应用程序的性能和用户...
非传统分页工具. 简单说明下: ...参考: Ext.PagingToolbar.js 因为我开发测试完这个分页工具后, 电脑上显示刚好是15:00, 所以取名: PM3PagingToolbar 如有BUG还请各位提出或留言. 附件中有图片, 一看就知道.
1. **创建PagingToolbar实例**:`<mx:PagingToolbar id="pagingToolbar" dataProvider="{dataProvider}" />`,这里`dataProvider`是数据源,它告诉分页控件有多少数据和每页应显示多少条。 2. **设置属性**:可以...
Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码
"Extjs树分页组件扩展"就是为了解决这一问题而设计的,它通过扩展TreeLoader和PagingToolbar,实现了在树形组件中进行分页加载的效果。 **TreeLoader的扩展** TreeLoader是ExtJS中负责异步加载树节点的类。在原生...
ext PagingToolbar 带参数的翻页
var pagingToolbar = new Ext.PagingToolbar({ store: store, // store is the data store for this grid displayInfo: true, displayMsg: 'Displaying posts {0} - {1} of {2}', emptyMsg: "No posts to ...
3. **PagingToolbar**:创建一个PagingToolbar,并将其与Store关联起来,以便自动处理分页。 ```javascript var pagingToolbar = Ext.create('Ext.toolbar.Paging', { store: store, dock: 'bottom', ...
因此,ExtJS提供了一个分页工具条,称为Ext.PagingToolbar,它可以帮助开发者快速实现分页功能。 在本例中,我们使用ExtJS 4.2创建了一个简单的表格控件,并使用Ext.PagingToolbar实现了分页功能。首先,我们创建了...
在EXTJS中,分页是实现大数据量展示时不可或缺的功能,它能有效地提高网页性能,减少服务器压力。EXTJS分页通常与数据访问对象(DAO)和动作控制器(Action)结合使用,形成一个完整的数据获取和展示流程。...
`pagingToolbar`是一个包含导航按钮(如“上一页”、“下一页”)和当前页信息的工具栏,它与数据源(通常是`Ext.data.Store`)关联,控制数据的加载。 1. **创建Store**:首先,我们需要创建一个`Ext.data.Store`...
pagingToolbar.pageSize = parseInt(records[0].get('value')); // 更新分页大小 pagingToolbar.moveFirst(); // 重新加载数据 } } }); // 然后在你的分页工具栏配置中添加这个ComboBox plugins: [{ ... ...
var pagingToolbar = new YAHOO.widget.PagingToolbar({ container: "pagingContainer", pages: 10, // 每页显示的记录数 recordsPerPage: 10 // 分页大小 }); dataTable.set("paginator", pagingToolbar); ```...
在这个文件中,可能会定义一个新的组件或扩展,允许用户在界面上选择不同的记录数,然后动态更新PagingToolbar的`store`,实现用户自定义的分页大小。 实现这些功能的关键步骤包括: 1. 创建主子表的GridPanel,...
在Grid Panel中,我们通常会使用`Ext.data.Store`来存储和管理数据,并通过配置`pagingToolbar`来实现分页界面。 2. **Ext.data.Store与分页配置** `Ext.data.Store`是数据模型的容器,负责加载、存储和管理数据。...
2. **PagingToolbar组件**:`Ext.PagingToolbar`是一个用于分页操作的工具栏组件,它可以与Store进行绑定,实现数据的分页加载。 3. **远程分页**:在Ext_Js中,通常采用远程分页的方式,即数据的分页逻辑发生在...