`
lovesmutou
  • 浏览: 5088 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

Ext4 pagingtoolbar刷新按钮事件重写

阅读更多
最近在使用extjs4做项目,当用到pagingtoolbar的刷新按钮时出现了一个问题,当时的界面使用的是条件查询,当时不点击查询按钮,直接点击pagingtoolbar刷新按钮时,所设置的参数pageSize : 10并没有传入,刷新仍然执行默认的参数1-25,刷新时操作其实执行的是store.reload();

Extjs代码  收藏代码
这个是我的代码
            dockedItems : [{
                    xtype : 'pagingtoolbar',
                    dock : 'bottom',
                    store : this.store,
                    displayInfo : true,
                    displayMsg : '显示单位信息 {0} - {1} of {2}',
                    emptyMsg : "没有单位信息",
                    pageSize : 10,
                    plugins : [{
                        ptype : 'pagingtoolbarresizer',
                        displayText: '每页件数',
                        options : [5, 10, 15, 20, 25]
                    }]
                }]
其中一种解决方案是:刷新按钮隐藏起来,用户看不到,就不会点击
Extjs代码  收藏代码
  1. var length = panel.dockedItems.keys.length;  
  2. var refreshStr= "";  
  3. for (var i = 0; i < length; i++) {  
  4.     if (panel.dockedItems.keys[i].indexOf("pagingtoolbar") !== -1) {  
  5.          refreshStr= panel.dockedItems.keys[i];  
  6.     }  
  7. }  
  8. panel.dockedItems.get(refreshStr).child('#refresh').hide(true);  


第二种方法是重写刷新事件,这样可以从根本上解决这个问题
Extjs代码  收藏代码
        var grid = this.getAcceptajcxlb();
        var length = grid.dockedItems.keys.length;
        var refreshStr= "";
        for (var i = 0; i < length; i++) {
           if (grid.dockedItems.keys[i].indexOf("pagingtoolbar") !== -1) {
              refreshStr= grid.dockedItems.keys[i];
           }
        }
        grid.dockedItems.get(refreshStr).child('#refresh').setHandler(  
        function() { 
                grid.getStore().pageSize = grid .down('pagingtoolbar').pageSize;
                grid.getStore().currentPage = 1;
                grid.getStore().load();
         })
这些代码的大致意思就是获取到你的grid,通过grid寻找pagingtoolbar的参数值pageSize,把它传递给store,进行加载数据
本文原出自http://31212.iteye.com/blog/1165653,感谢该网友的分享,在此基础上我根据自己的需求做了一些修改,在此分享出来,希望可以给遇到同样问题的人给予帮助
分享到:
评论

相关推荐

    EXTJS3 Ext.PagingToolbar() 快捷键应用

    `Ext.PagingToolbar`通常位于EXTJS的GridPanel下方,包含一系列的按钮和输入框,如“第一页”,“上一页”,“下一页”,“最后一页”以及当前页数和总页数的显示。用户可以通过点击这些按钮进行翻页,或者直接在...

    Ext JS PagingToolbar 组件

    Ext JS PagingToolbar组件是用于实现数据分页显示的重要工具,尤其在处理大量数据时非常有用。它提供了一种用户友好的界面,使用户能够轻松浏览和导航大量的信息。PagingToolbar通常与Ext JS的数据存储(如Store)和...

    extjs使用pagingtoolbar时,点击下一页,出现查询结果和查询条件不的解决办法

    `beforechange`事件在PagingToolbar的页面切换之前触发,我们可以在这个事件处理函数中构建包含所有查询条件的参数对象。 以下是一个示例代码,展示了如何添加自定义参数: ```javascript var toolbar = Ext....

    ExtJS 自定义分页控件---- PM3PagingToolbar.js

    参考: Ext.PagingToolbar.js 如有BUG还请各位提出或留言. 附件中有图片, 一看就知道. 用法: var grid = new Ext.grid.GridPanel({ bbar: new Ext.PM3PagingToolbar({ store : store, displayInfo : true, ...

    Extjs4 Grid分页与自动刷新

    ### Extjs4 Grid分页与自动刷新 #### 一、Extjs4 Grid 分页功能实现 在使用Extjs4进行Web应用开发时,Grid控件是常用的数据展示组件之一。对于大数据量的情况,通常需要使用分页来提高用户体验。下面详细介绍如何...

    ext gride刷新

    4. **事件监听**:你可以监听`store.load`事件,以便在数据加载后自动跳转回之前保存的页面。 5. **远程分页(Remote Paging)**:在远程分页模式下,服务器需要处理分页参数。`start`和`limit`参数表示数据的起始...

    Ext grid 分页实例源码

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

    ext4 表格分页实例代码

    在IT行业中,EXT4是一种广泛使用的文件系统,尤其在Linux操作系统中。它的全称是Fourth Extended File System,是EXT3的升级版,旨在提供更好的性能、稳定性和更大的存储容量。EXT4引入了许多新特性,例如预分配、...

    Ext表格获取后台数据

    因此,ExtJS提供了一个分页工具条,称为Ext.PagingToolbar,它可以帮助开发者快速实现分页功能。 在本例中,我们使用ExtJS 4.2创建了一个简单的表格控件,并使用Ext.PagingToolbar实现了分页功能。首先,我们创建了...

    Ext.DataView 图片列表显示

    var pagebar = new Ext.PagingToolbar({ store:store, pageSize:limit, displayInfo:true, displayMsg:'本页显示第{0}条到第{1}条的记录,一共{2}条。', emptyMsg:'没有记录' }); //有参数的分页 Ext....

    ext3.0所有控件演示代码

    4. 图标(Icons):EXT3.0内置了丰富的图标集,可以用于按钮、菜单项等控件,增强界面的视觉效果。图标可以通过`iconCls`属性指定,也可以使用`glyph`属性实现SVG图标。EXT3.0还支持自定义图标和动态加载。 5. 演示...

    ext page实现带参数的翻页

    ext PagingToolbar 带参数的翻页

    EXT分页工具条

    - `refreshText`: 刷新按钮的文字。 - `beforePageText`: “跳转到第”前面的文字。 - `afterPageText`: “页”的文字。 - `itemId`: 组件的唯一ID,用于在其他地方引用该组件。 - `moveFirst`, `movePrevious`...

    Extjs TreeStore+pagingToolbar 分页

    pagingToolbar 是 ExtJS 提供的一个工具栏组件,用于展示分页控件,如页码、跳转按钮等。要将其与TreeStore关联,可以将TreeStore添加到pagingToolbar的`store`配置中: ```javascript var pagingToolbar = new ...

    ExtJs自定义分页控件----PM3PagingToolbar.js

    非传统分页工具. 简单说明下: ...参考: Ext.PagingToolbar.js 因为我开发测试完这个分页工具后, 电脑上显示刚好是15:00, 所以取名: PM3PagingToolbar 如有BUG还请各位提出或留言. 附件中有图片, 一看就知道.

    Ext_Js分页显示案例详解

    2. **PagingToolbar组件**:`Ext.PagingToolbar`是一个用于分页操作的工具栏组件,它可以与Store进行绑定,实现数据的分页加载。 3. **远程分页**:在Ext_Js中,通常采用远程分页的方式,即数据的分页逻辑发生在...

    ext表格布局小例子

    例如,定义一个按钮或事件监听器,在用户触发相应动作时调用 `store.add(newData)` 方法来向 Store 中添加新数据。 #### 六、总结 本例详细展示了如何使用 ExtJS 创建一个具有数据存储、分页、删除等功能的表格组件...

    ext页面显示行数选择与主子表显示

    总的来说,"ext页面显示行数选择与主子表显示"涉及到EXT JS中GridPanel、Store、PagingToolbar的使用,以及事件监听和组件扩展等核心概念。通过熟练掌握这些知识点,开发者可以构建出更加用户友好的数据展示界面。

    Ext组件描述,各个组件含义

    - **功能描述**:Button 是一个简单的按钮控件,用于触发某些操作或事件。 - **主要用途**:用于各种用户交互操作,如提交表单、执行某个动作等。 **1.3 Color Palette (Ext.ColorPalette)** - **xtype**: `...

    ext TreeGrid分页可编辑

    - 使用`Ext.PagingToolbar`来实现分页导航,并将其绑定到`JsonStore`。 ```javascript me.bbar = new Ext.PagingToolbar({ pageSize: itemsPerPage, store: me.treeStore2, displayInfo: true, displayMsg: '...

Global site tag (gtag.js) - Google Analytics