`
heartneo
  • 浏览: 65072 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

extjs4 pagingtoolbar refresh button 扩展

阅读更多
最近在学习extjs4,当用到pagingtoolbar的刷新按钮时出现了大问题,网上搜索了好几天终于解决了,现分享出来。

//这是api中的例子创建的分页例子。
var panel = Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: store,
    columns: [
        { header: 'Name',  dataIndex: 'name' },
        { header: 'Email', dataIndex: 'email', flex: 1 },
        { header: 'Phone', dataIndex: 'phone' }
    ],
    width: 400,
    height: 125,
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: store,   // same store GridPanel is using
        dock: 'bottom',
        displayInfo: true
    }],
    renderTo: Ext.getBody()
});


我遇到的问题是当点击刷新按钮时所有数据都清空了,很是郁闷啊,网上这方面的资料也很少,针对extjs4的就少的可怜了,有很多人提出的想法是把这个刷新按钮隐藏掉,先看看这种解法吧。

//大致的意思是找到刷新按钮的节点然后隐藏它
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);



这种方法的却可以将刷新按钮隐藏,不过个人不喜欢隐藏掉,本来提供了一个很好的功能,然后人为的去掉感觉有点可惜,那么到了这里凭感觉想一下也应该可以修改它的处理方法啊,既然它是一个button,那么去api中看看吧,找了一会我发现了一个方法setHandler,一看到这个名字就很兴奋啊,问题应该可以解决了吧。
//将上文中的最后一句修改成
panel.dockedItems.get(refreshStr).child('#refresh').setHandler( 
	 function() {
	        alert('You clicked the button!');	
	        //添加自己的处理方式
	 }
);





这样就大功告成了。
  • 大小: 36.6 KB
  • 大小: 18.1 KB
分享到:
评论

相关推荐

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

    总的来说,EXTJS的PagingToolbar虽然默认只传递`start`和`limit`参数,但通过自定义事件监听和参数构建,我们可以灵活地扩展其功能,以满足不同场景下的分页查询需求。这对于处理带有复杂查询条件的大数据集是非常...

    Extjs TreeStore+pagingToolbar 分页

    ExtJS提供了一个名为pagingToolbar的组件,可以轻松地与数据存储(如TreeStore)集成,实现分页效果。 1. **TreeStore基础**: TreeStore 是 ExtJS 的一种数据存储类,它专门用来处理树状结构的数据。它可以连接到...

    ExtJS 4 button按钮

    在深入探讨ExtJS 4 Button组件的特性与应用前,我们先简要了解ExtJS框架。ExtJS是一款基于JavaScript的企业级Web应用开发框架,由Sencha公司开发维护,旨在简化前端开发过程,提供丰富的UI组件库,使得开发者能够...

    EXTJS3 Ext.PagingToolbar() 快捷键应用

    在EXTJS3中,`Ext.PagingToolbar()` 是一个非常重要的组件,用于在大量数据的网格或视图中实现分页功能。这个组件允许用户轻松地浏览和操作大量的记录,而不需要一次性加载所有数据,从而提高了应用程序的性能和用户...

    ExtJs:收集基于ExtJs扩展的一些控件

    本压缩包文件中收集了基于ExtJs扩展的一些控件,这些控件能够进一步增强应用程序的功能和用户体验。 首先,我们来看看“ExtJs:收集基于ExtJs扩展的一些控件”。这个文件可能是对一些自定义或第三方开发的ExtJs控件...

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

    在 ExtJS3.3基础上开发的. 低一点的版本应该也能用. 没有去测试. 参考: Ext.PagingToolbar.js 如有BUG还请各位提出或留言. 附件中有图片, 一看就知道. 用法: var grid = new Ext.grid.GridPanel({ bbar: new Ext....

    Ext JS PagingToolbar 组件

    PageResizer扩展了PagingToolbar的功能,允许用户在运行时动态调整每页显示的记录数。这种特性提供了更灵活的用户体验,用户可以根据自己的偏好选择适合的数据显示密度。 PageResizer组件通常通过在PagingToolbar中...

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败...

    Extjs树分页组件扩展

    "Extjs树分页组件扩展"就是为了解决这一问题而设计的,它通过扩展TreeLoader和PagingToolbar,实现了在树形组件中进行分页加载的效果。 **TreeLoader的扩展** TreeLoader是ExtJS中负责异步加载树节点的类。在原生...

    包含各种类型的extjs小图标,Extjs4小图标

    在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列图形图标,这些图标用于增强应用程序的视觉效果,提供用户友好的操作指示。 1. **图标分类**: - 图标通常分为不同的类别,如操作图标(比如...

    Extjs4 combogrid扩展

    在给定的“Extjs4 combogrid扩展”中,我们主要关注的是如何将传统的下拉框(combo)扩展为同时支持网格(grid)显示的功能。 标题中的“Extjs4 combogrid扩展”意味着我们要在ExtJS 4框架内,改造原有的 Combo ...

    EXTJS扩展例子集

    4. **主题**:EXTJS支持主题定制,开发者可以通过扩展来创建自己的UI风格。 5. **插件(Plugins)**:对于已存在的EXTJS组件,插件可以添加额外的功能,而无需修改组件的原始代码。 6. **数据代理(Data Proxy)**...

    Extjs4下拉多选扩展

    此外,`mode`应设置为`EXTJS4.model.MULTI`,表示多选模式。 ```javascript Ext.define('MyApp.form.field.MultiSelectComboBox', { extend: 'Ext.form.field.ComboBox', alias: 'widget.multiselectcombobox', ...

    ExtJS4多文件上传,带进度条及管理

    本文将详细解析"ExtJS4多文件上传,带进度条及管理"这一主题,涵盖其核心概念、实现方式以及相关技术。 **一、ExtJS4概述** ExtJS4是Sencha公司推出的一个前端框架,它提供了丰富的组件库和强大的数据绑定机制,...

    extjs4学习文档

    EXTJS4 是一款强大的JavaScript框架,用于构建富客户端Web应用程序。EXTJS4的学习文档旨在帮助开发者掌握这一框架,尤其对于初学者来说,提供了宝贵的资源。文档中包含了从环境配置到实际应用开发的基础步骤。 首先...

    extjs4中文文档

    EXTJS4是一个强大的JavaScript框架,主要用于构建富客户端Web应用程序。这个中文文档是EXTJS4的官方文档翻译版,为开发者提供了详细的API参考和教程,帮助理解EXTJS4的各种组件、功能和工作原理。 EXTJS4的核心特性...

    EXTJS4自学手册

    EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范 EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) EXTJS4自学手册...

    extjs4完整下载

    ExtJS4正式版(官方完整下载包):含所有的源代码,html,api文档,示例。官方网站下载现在需要注册,这个仅供爱好者个人学习使用,如果项目中使用请至官方网站购买。

    ExtJs4.rar

    在本文中,我们将深入探讨ExtJS4这一版本的重要特性、改进以及它如何扩展了先前版本的功能。 首先,ExtJS4在组件化方面有了显著提升。在之前的版本中,组件系统就已经是其核心优势,而ExtJS4进一步优化了这一系统,...

    Extjs4 grid使用例子

    在ExtJS4中,MVC帮助我们分离业务逻辑、视图和控制器,使得代码更易于维护和扩展。在这个例子中,Model定义了数据模型,View负责呈现数据,而Controller作为中间人,处理用户交互和数据更新。 2. **Grid组件**: ...

Global site tag (gtag.js) - Google Analytics