`
zivpiggy
  • 浏览: 22705 次
  • 性别: Icon_minigender_1
  • 来自: 荆楚大地
最近访客 更多访客>>
社区版块
存档分类
最新评论

ext分页的页数选择,记录PageSizePlugin的使用

    博客分类:
  • Ext
EXT 
阅读更多
记录一下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
分享到:
评论
2 楼 skying007 2013-01-28  
  挺好用的。
1 楼 clq9761 2009-03-04  
谢谢,看看能不能行。

相关推荐

    EXT分页工具条

    本文将深入探讨EXT分页工具条的实现原理、使用方法以及如何自定义扩展。 EXT分页工具条通常与EXT的GridPanel或DataView等数据展示组件配合使用。它包含一系列按钮和输入框,如“上一页”、“下一页”、“跳转到第X...

    ext分页客户端demo Java js

    - 使用EXTJS的远程分页(remote paging)模式,服务器根据`start`和`limit`返回对应数据,同时提供总记录数,以避免一次性加载大量数据。 6. **实际项目应用**: - 在实际项目中,可以将这个分页示例作为基础,...

    Ext分页排序 Ext分页排序

    分页组件如`Ext.toolbar.Paging`可以添加到界面中,提供页码导航和每页显示记录数的选择。`PagingToolbar`与`Store`关联,自动更新页码和记录总数,当用户翻页时会触发`load`事件,加载对应页的数据。 **排序** ...

    EXT树表分页(SERVLET)

    2. **EXT Store配置**:分页功能在EXT的Store中实现,需要设置分页参数,如每页记录数(pageSize)、自动加载(autoLoad)和分页控件(pagingToolbar)。此外,Store还需要连接到后台服务器以获取数据。 3. **...

    EXT 分页,树形结构案列

    ACTION类可以使用EXT所需的数据结构返回数据,例如,分页数据应包含总记录数、当前页数据等信息。 3. 参数传递:EXT请求中的分页参数或树节点ID可以通过Struts2的拦截器或ActionContext传递给Action,以便进行正确...

    Ext 分页核心代码

    在Grid Panel中,我们通常会使用`Ext.data.Store`来存储和管理数据,并通过配置`pagingToolbar`来实现分页界面。 2. **Ext.data.Store与分页配置** `Ext.data.Store`是数据模型的容器,负责加载、存储和管理数据。...

    EXT分页视频

    EXT分页视频是针对EXT框架中的分页功能进行深入讲解的教程资源,主要适用于Web开发人员,特别是使用EXT.js库的开发者。EXT.js是一个强大的JavaScript UI框架,它提供了丰富的组件和功能,包括表格分页,使得用户可以...

    ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询

    2. **分页插件(Paging Toolbar)**:当与数据存储结合使用时,分页工具栏(`Ext.PagingToolbar`)可以在底部显示页码导航,允许用户切换页面。它需要配置`store`属性来引用数据存储,并通过`displayMsg`和`emptyMsg...

    Ext grid 分页实例源码

    Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码

    ext4 表格分页实例代码

    实现EXT4表格分页实例,首先需要创建一个EXT JS项目,使用Eclipse作为IDE。在Eclipse中,可以使用Sencha CMD工具来生成项目结构和基础代码。项目创建后,需要编写以下主要部分: 1. **数据模型(Model)**:定义...

    Ext.Net 服务器端分页 存储过程

    在Ext.NET中,当用户滚动数据网格或改变分页控件时,框架会发送一个请求到服务器,包含当前页数和每页记录数。服务器根据这些参数查询数据库,仅返回所需的数据块,然后将这些数据渲染到客户端的网格中。这样可以...

    Ext实现分页查询,前台

    本示例主要介绍了如何使用Ext.js这个JavaScript框架来实现前端的分页查询功能。 首先,创建一个名为`resource`的数据存储(Store),它负责从服务器获取数据。这里的`Store`对象定义了字段(fields)、数据源URL...

    ext grid json分页显示

    2. 当用户滚动到Grid的底部或者点击分页导航条时,EXT Grid会触发Ajax请求,向服务器发送当前的页码和每页记录数。 3. DWR接收到请求后,根据这些参数在后端数据库执行相应的SQL查询,获取对应页的数据,并将其转换...

    简单的小例子Ext+servlet 分页

    - Ext JS Grid的`store`可以通过Ajax请求与Servlet交互,一般使用`proxy`配置项设置为`Ext.data.proxy.Ajax`,并配置URL指向Servlet处理分页请求的端点。 - 当用户改变页码或每页条数时,Grid会自动发送带有相关...

    Ext组合框comboBox带分页

    用EXT来实现下拉框ComboBox 下拉框可以实现分页

    EXT2.0动态树,分页!

    7. **Pagination**:EXT2.0的分页组件,包括`pagingToolbar`,提供页码导航和每页记录数选择。 8. **AjaxRequest** 或 **JsonReader**:解析服务器返回的数据,将其转换为EXT2.0可以理解的格式。 在"Manage"这个...

    Ext_Js分页显示案例详解

    - **使用Ext.Js**:前端页面使用Ext.Js创建GridPanel,并绑定PagingToolbar组件,以便实现分页功能。 ```javascript Ext.onReady(function() { var store = new Ext.data.JsonStore({ url: 'display.action', ...

    ext设置分页大小.rar

    `ext-ui-combo-pagesize.js`可能实现了通过下拉框(ComboBox)让用户选择分页大小的功能,而`ext-ui-slider-pagesize.js`则可能使用滑块(Slider)组件来直观地调整每页的记录数。这些自定义实现可以增强用户的交互...

    Ext中对于多种store数据分页实现示例

    首先,EXT提供了两种主要的分页模式:客户端分页(Client Paging)和服务器端分页(Server Paging)。客户端分页适用于数据量不大,且可以一次性加载到内存中的场景,而服务器端分页则适合处理大数据量的情况,它...

    EXT 表格 本地分页的例子

    EXT 表格 本地分页的例子 EXT 表格 本地分页的例子

Global site tag (gtag.js) - Google Analytics