记录一下PageSizePlugin的使用:
PageSizePlugin.js
Ext.namespace('Ext.ux');
Ext.ux.PageSizePlugin = function() {
Ext.ux.PageSizePlugin.superclass.constructor.call(this, {
store: new Ext.data.SimpleStore({
fields: ['text', 'value'],
data: [['10', 10], ['20', 20], ['30', 30], ['50', 50], ['100', 100]]
}),
mode: 'local',
displayField: 'text',
valueField: 'value',
editable: false,
allowBlank: false,
triggerAction: 'all',
width: 60
});
};
Ext.extend(Ext.ux.PageSizePlugin, Ext.form.ComboBox, {
init: function(paging) {
paging.on('render', this.onInitView, this);
},
onInitView: function(paging) {
paging.add('-',
this,
'条/页'
);
this.setValue(paging.pageSize);
this.on('select', this.onPageSizeChanged, paging);
},
onPageSizeChanged: function(combo) {
this.pageSize = parseInt(combo.getValue());
compage = parseInt(combo.getValue());
this.doLoad(0);
}
});
本来想加一个“全部”选项,但还没试出来,如果那位弄出来了劳烦告诉在下一声。
grid中的代码片段:
bbar : new Ext.PagingToolbar({
pageSize : pagesize,
displayInfo : true,
emptyMsg : '没有找到相关数据',
store : store,
plugins : [new Ext.ux.PageSizePlugin()]
})
很简单,这就行了,当然之前还要把该传的参数给传过去,我是这样传的,一劳永逸:
store.on('beforeload', function(thiz, options) {
var a= Ext.get('a').dom.value;
var b= Ext.get('b').dom.value;
Ext.apply(thiz.baseParams, {
a: a,
b: b
});
});
- 大小: 7.2 KB
分享到:
- 2009-02-16 10:49
- 浏览 2562
- 评论(2)
- 论坛回复 / 浏览 (1 / 4728)
- 查看更多
相关推荐
本文将深入探讨EXT分页工具条的实现原理、使用方法以及如何自定义扩展。 EXT分页工具条通常与EXT的GridPanel或DataView等数据展示组件配合使用。它包含一系列按钮和输入框,如“上一页”、“下一页”、“跳转到第X...
- 使用EXTJS的远程分页(remote paging)模式,服务器根据`start`和`limit`返回对应数据,同时提供总记录数,以避免一次性加载大量数据。 6. **实际项目应用**: - 在实际项目中,可以将这个分页示例作为基础,...
分页组件如`Ext.toolbar.Paging`可以添加到界面中,提供页码导航和每页显示记录数的选择。`PagingToolbar`与`Store`关联,自动更新页码和记录总数,当用户翻页时会触发`load`事件,加载对应页的数据。 **排序** ...
2. **EXT Store配置**:分页功能在EXT的Store中实现,需要设置分页参数,如每页记录数(pageSize)、自动加载(autoLoad)和分页控件(pagingToolbar)。此外,Store还需要连接到后台服务器以获取数据。 3. **...
ACTION类可以使用EXT所需的数据结构返回数据,例如,分页数据应包含总记录数、当前页数据等信息。 3. 参数传递:EXT请求中的分页参数或树节点ID可以通过Struts2的拦截器或ActionContext传递给Action,以便进行正确...
在Grid Panel中,我们通常会使用`Ext.data.Store`来存储和管理数据,并通过配置`pagingToolbar`来实现分页界面。 2. **Ext.data.Store与分页配置** `Ext.data.Store`是数据模型的容器,负责加载、存储和管理数据。...
EXT分页视频是针对EXT框架中的分页功能进行深入讲解的教程资源,主要适用于Web开发人员,特别是使用EXT.js库的开发者。EXT.js是一个强大的JavaScript UI框架,它提供了丰富的组件和功能,包括表格分页,使得用户可以...
2. **分页插件(Paging Toolbar)**:当与数据存储结合使用时,分页工具栏(`Ext.PagingToolbar`)可以在底部显示页码导航,允许用户切换页面。它需要配置`store`属性来引用数据存储,并通过`displayMsg`和`emptyMsg...
Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码
实现EXT4表格分页实例,首先需要创建一个EXT JS项目,使用Eclipse作为IDE。在Eclipse中,可以使用Sencha CMD工具来生成项目结构和基础代码。项目创建后,需要编写以下主要部分: 1. **数据模型(Model)**:定义...
在Ext.NET中,当用户滚动数据网格或改变分页控件时,框架会发送一个请求到服务器,包含当前页数和每页记录数。服务器根据这些参数查询数据库,仅返回所需的数据块,然后将这些数据渲染到客户端的网格中。这样可以...
本示例主要介绍了如何使用Ext.js这个JavaScript框架来实现前端的分页查询功能。 首先,创建一个名为`resource`的数据存储(Store),它负责从服务器获取数据。这里的`Store`对象定义了字段(fields)、数据源URL...
2. 当用户滚动到Grid的底部或者点击分页导航条时,EXT Grid会触发Ajax请求,向服务器发送当前的页码和每页记录数。 3. DWR接收到请求后,根据这些参数在后端数据库执行相应的SQL查询,获取对应页的数据,并将其转换...
- Ext JS Grid的`store`可以通过Ajax请求与Servlet交互,一般使用`proxy`配置项设置为`Ext.data.proxy.Ajax`,并配置URL指向Servlet处理分页请求的端点。 - 当用户改变页码或每页条数时,Grid会自动发送带有相关...
用EXT来实现下拉框ComboBox 下拉框可以实现分页
7. **Pagination**:EXT2.0的分页组件,包括`pagingToolbar`,提供页码导航和每页记录数选择。 8. **AjaxRequest** 或 **JsonReader**:解析服务器返回的数据,将其转换为EXT2.0可以理解的格式。 在"Manage"这个...
- **使用Ext.Js**:前端页面使用Ext.Js创建GridPanel,并绑定PagingToolbar组件,以便实现分页功能。 ```javascript Ext.onReady(function() { var store = new Ext.data.JsonStore({ url: 'display.action', ...
`ext-ui-combo-pagesize.js`可能实现了通过下拉框(ComboBox)让用户选择分页大小的功能,而`ext-ui-slider-pagesize.js`则可能使用滑块(Slider)组件来直观地调整每页的记录数。这些自定义实现可以增强用户的交互...
首先,EXT提供了两种主要的分页模式:客户端分页(Client Paging)和服务器端分页(Server Paging)。客户端分页适用于数据量不大,且可以一次性加载到内存中的场景,而服务器端分页则适合处理大数据量的情况,它...
EXT 表格 本地分页的例子 EXT 表格 本地分页的例子