最近在使用extjs4做项目,当用到pagingtoolbar的刷新按钮时出现了一个问题,当时的界面使用的是条件查询,当时不点击查询按钮,直接点击pagingtoolbar刷新按钮时,所设置的参数pageSize : 10并没有传入,刷新仍然执行默认的参数1-25,刷新时操作其实执行的是store.reload();
其中一种解决方案是:刷新按钮隐藏起来,用户看不到,就不会点击
第二种方法是重写刷新事件,这样可以从根本上解决这个问题
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,感谢该网友的分享,在此基础上我根据自己的需求做了一些修改,在此分享出来,希望可以给遇到同样问题的人给予帮助
- var length = panel.dockedItems.keys.length;
- var refreshStr= "";
- for (var i = 0; i < length; i++) {
- if (panel.dockedItems.keys[i].indexOf("pagingtoolbar") !== -1) {
- refreshStr= panel.dockedItems.keys[i];
- }
- }
- panel.dockedItems.get(refreshStr).child('#refresh').hide(true);
第二种方法是重写刷新事件,这样可以从根本上解决这个问题
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,感谢该网友的分享,在此基础上我根据自己的需求做了一些修改,在此分享出来,希望可以给遇到同样问题的人给予帮助
相关推荐
`Ext.PagingToolbar`通常位于EXTJS的GridPanel下方,包含一系列的按钮和输入框,如“第一页”,“上一页”,“下一页”,“最后一页”以及当前页数和总页数的显示。用户可以通过点击这些按钮进行翻页,或者直接在...
Ext JS PagingToolbar组件是用于实现数据分页显示的重要工具,尤其在处理大量数据时非常有用。它提供了一种用户友好的界面,使用户能够轻松浏览和导航大量的信息。PagingToolbar通常与Ext JS的数据存储(如Store)和...
`beforechange`事件在PagingToolbar的页面切换之前触发,我们可以在这个事件处理函数中构建包含所有查询条件的参数对象。 以下是一个示例代码,展示了如何添加自定义参数: ```javascript var toolbar = Ext....
参考: Ext.PagingToolbar.js 如有BUG还请各位提出或留言. 附件中有图片, 一看就知道. 用法: var grid = new Ext.grid.GridPanel({ bbar: new Ext.PM3PagingToolbar({ store : store, displayInfo : true, ...
### Extjs4 Grid分页与自动刷新 #### 一、Extjs4 Grid 分页功能实现 在使用Extjs4进行Web应用开发时,Grid控件是常用的数据展示组件之一。对于大数据量的情况,通常需要使用分页来提高用户体验。下面详细介绍如何...
4. **事件监听**:你可以监听`store.load`事件,以便在数据加载后自动跳转回之前保存的页面。 5. **远程分页(Remote Paging)**:在远程分页模式下,服务器需要处理分页参数。`start`和`limit`参数表示数据的起始...
Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码
在IT行业中,EXT4是一种广泛使用的文件系统,尤其在Linux操作系统中。它的全称是Fourth Extended File System,是EXT3的升级版,旨在提供更好的性能、稳定性和更大的存储容量。EXT4引入了许多新特性,例如预分配、...
因此,ExtJS提供了一个分页工具条,称为Ext.PagingToolbar,它可以帮助开发者快速实现分页功能。 在本例中,我们使用ExtJS 4.2创建了一个简单的表格控件,并使用Ext.PagingToolbar实现了分页功能。首先,我们创建了...
var pagebar = new Ext.PagingToolbar({ store:store, pageSize:limit, displayInfo:true, displayMsg:'本页显示第{0}条到第{1}条的记录,一共{2}条。', emptyMsg:'没有记录' }); //有参数的分页 Ext....
4. 图标(Icons):EXT3.0内置了丰富的图标集,可以用于按钮、菜单项等控件,增强界面的视觉效果。图标可以通过`iconCls`属性指定,也可以使用`glyph`属性实现SVG图标。EXT3.0还支持自定义图标和动态加载。 5. 演示...
ext PagingToolbar 带参数的翻页
- `refreshText`: 刷新按钮的文字。 - `beforePageText`: “跳转到第”前面的文字。 - `afterPageText`: “页”的文字。 - `itemId`: 组件的唯一ID,用于在其他地方引用该组件。 - `moveFirst`, `movePrevious`...
pagingToolbar 是 ExtJS 提供的一个工具栏组件,用于展示分页控件,如页码、跳转按钮等。要将其与TreeStore关联,可以将TreeStore添加到pagingToolbar的`store`配置中: ```javascript var pagingToolbar = new ...
非传统分页工具. 简单说明下: ...参考: Ext.PagingToolbar.js 因为我开发测试完这个分页工具后, 电脑上显示刚好是15:00, 所以取名: PM3PagingToolbar 如有BUG还请各位提出或留言. 附件中有图片, 一看就知道.
2. **PagingToolbar组件**:`Ext.PagingToolbar`是一个用于分页操作的工具栏组件,它可以与Store进行绑定,实现数据的分页加载。 3. **远程分页**:在Ext_Js中,通常采用远程分页的方式,即数据的分页逻辑发生在...
例如,定义一个按钮或事件监听器,在用户触发相应动作时调用 `store.add(newData)` 方法来向 Store 中添加新数据。 #### 六、总结 本例详细展示了如何使用 ExtJS 创建一个具有数据存储、分页、删除等功能的表格组件...
总的来说,"ext页面显示行数选择与主子表显示"涉及到EXT JS中GridPanel、Store、PagingToolbar的使用,以及事件监听和组件扩展等核心概念。通过熟练掌握这些知识点,开发者可以构建出更加用户友好的数据展示界面。
- **功能描述**:Button 是一个简单的按钮控件,用于触发某些操作或事件。 - **主要用途**:用于各种用户交互操作,如提交表单、执行某个动作等。 **1.3 Color Palette (Ext.ColorPalette)** - **xtype**: `...
- 使用`Ext.PagingToolbar`来实现分页导航,并将其绑定到`JsonStore`。 ```javascript me.bbar = new Ext.PagingToolbar({ pageSize: itemsPerPage, store: me.treeStore2, displayInfo: true, displayMsg: '...