`

Ext Button的onClick和handler

    博客分类:
  • Ext
EXT 
阅读更多

在EXT中,当我们要为按钮点击添加处理function的时候,可以看到一般人的实现分成2类:

1.使用onClick: function xx()

2.使用handler: function xx()

 

完成后,我们会发现,无论用哪一种实现,再点击按钮时都能触发xx这个function. 那么有人就会考虑,为什么EXT提供了2个功能一样的东西,或者说这2种方式有哪些细微的不同?

 

首先有一点需要明确,在Button中,onClick是一个方法,而handler是一个配置项

接着,为了明确这2种方式本质上的区别,我们查看Button的源码:

 

 

// private
    onClick : function(e){
            ......一系列其他无关的代码
            if(this.handler){
                //this.el.removeClass('x-btn-over');
                this.handler.call(this.scope || this, this, e);
            }
        }
    },

 

源码中可以看到,handler在onClick的实现中被调用。进一步分析,我们点击按钮的时候,又是如何会调用onClick的?看下面一段源码:

 

// private
    initButtonEl : function(btn, btnEl){
       ......一系列无关的代码
        if(this.repeat){
           ......一系列无关的代码
            this.mon(repeater, 'click', this.onRepeatClick, this);
        }else{
            this.mon(btn, this.clickEvent, this.onClick, this);
        }
    },

在初始化button的el的时候,Ext通过this.mon将 'click'事件和onClick绑定在了一起。(注:这里mon方法是Ext3.x中对on方法的升级版,为了防止内存泄漏之类的)。

 

综上,整个流程便是:  Button实例化——> 'click'事件 ——>this.onClick——>this.handler

因此,我们配置了handler,在按钮点击的时候,自然会被触发。然而另一种方式写了onClick之后哦,this.handler会失效。onClick的方式是对EXT源码的重写和覆盖,而不是调用,会破坏EXT按钮中原有的逻辑。

同时可以注意到,onClick在源码中是被标注为//private的,API中也查不到这个方法。所以在实现按钮的点击事件的时候,我们应该使用handler这个配置项,而不是重写onClick方法。

0
0
分享到:
评论

相关推荐

    ext Panel+toolbar+button 实作带注释

    在本文中,我们将深入探讨EXT JS库中的Panel、Toolbar和Button组件,并通过一个带注释的实作案例来帮助初学者理解这些概念。EXT JS是一个强大的JavaScript库,用于构建富客户端应用程序,它提供了丰富的组件模型和...

    Ext2_Button示例

    ExtJS是一种基于...通过学习这个"Ext2_Button"示例,你可以了解如何在ExtJS 2.x中创建和配置按钮,进一步提升你的Web应用程序交互性。在实际开发中,结合其他组件和布局,你可以构建出功能强大且用户友好的界面。

    handler与listener的区别

    在ExtJS框架中,`handler`和`listener`都是用于响应用户交互的关键概念,它们各自有不同的使用场景和特点。理解两者的区别对于有效管理和组织应用的事件处理至关重要。 1. **Handler** - `handler`通常与`Action`...

    spring-ext-handler-mapping.rar_ext_spring ext_spring mvc

    本资源"spring-ext-handler-mapping"着重于扩展Spring的地址映射功能,使得开发者在使用Spring MVC进行Web开发时能够更加灵活和高效。 1. **扩展Spring HandlerMapping** Spring MVC默认提供了一些内置的...

    关于Thread和Handler的使用(一)

    在Android开发中,Thread和Handler是两个非常关键的概念,它们用于处理线程间通信和UI更新,确保程序的运行效率和用户体验。这篇博客主要探讨了如何有效地使用Thread和Handler进行多线程操作。 首先,Thread在Java...

    ViewPager和Handler结合使用实现轮播图

    本项目“ViewPager和Handler结合使用实现轮播图”就是利用这两种关键元素来创建一个自动滚动的图片展示功能,并且增加了状态指示器,即小圆点,以提示用户当前显示的是轮播图中的哪一张。 首先,我们要理解...

    Handler和looper详解

    Handler和Looper详解 Handler和Looper是Android系统中两个非常重要的组件,它们之间相互关联,共同实现了Android系统中的消息处理机制。在本文中,我们将对Handler和Looper进行详细的解释,并探讨它们在Android系统...

    android多线程handler/message机制详解

    我们通常在 UI 线程中创建一个 Handler,Handler 相当于一个处理器,它主要负责处理和绑定到该 Handler 的线程中的 Message。然后,我们可以在后台线程中执行一些操作,并将结果通过 Message 发送给 Handler,...

    【ASP.NET编程知识】Ext.Net学习笔记之button小结.docx

    本篇文档主要总结了关于Ext.Net中的button组件的一些关键知识点,包括触发客户端事件、服务端事件以及如何传递参数和自定义额外属性。 1. **触发客户端事件** 在Ext.Net中,可以为按钮组件绑定客户端事件,例如...

    解决ext下拉列表全选和去全选功能

    标题提到的“解决EXT下拉列表全选和去全选功能”是一个常见的需求,特别是在数据表格或下拉列表中进行批量操作时。下面我们将深入探讨EXTJS中实现这一功能的方法。 EXTJS的下拉列表通常由`Ext.form.field.ComboBox`...

    Fragment与Activity使用Handler进行交互

    通过创建一个Handler实例并与Looper(消息循环)关联,我们可以发送和处理Message,从而实现在不同线程间的数据传递和回调。 在Fragment和Activity之间使用Handler,通常涉及以下步骤: 1. **创建Handler实例**:...

    Coolite的Button使用方法借鉴.pdf

    <ext:Button ID="Button2" runat="server" Text="监听" EnableToggle="true" ToggleGroup="group1" Pressed="true"></ext:Button> <ext:Button ID="Button3" runat="server" Text="监听" EnableToggle="true" Toggle...

    android中Handler的使用方法和总结

    7. 在监听器的 Onclick() 方法中,调用 Handler 的 post() 方法,将要执行的线程对象放到队列当中 Handler 的优点是可以将耗时的操作异步处理,从而避免了 UI 线程的阻塞。例如,在上面的示例中,我们创建了一个 ...

    安卓天气日历时间选择倒计时相关-Button倒计时用到了Timer计时器和Handler.zip

    本资料包“安卓天气日历时间选择倒计时相关-Button倒计时用到了Timer计时器和Handler.zip”主要关注如何在Android应用中实现Button的倒计时功能,该功能通常涉及到两个关键组件:`java.util.Timer` 和 `android.os....

    一个activity中多个handler和消息的处理过程

    在Android应用开发中,Activity是用户界面的主要载体,而Handler机制则是实现异步通信和更新UI的关键工具。本文将深入探讨在一个Activity中如何管理和处理多个Handler以及它们的消息流程。 首先,Handler是Android...

    Handler,Looper和Message

    在Android开发中,`Handler`、`Looper`和`Message`是实现线程间通信的重要组件,它们共同构建了一个消息处理机制。理解这三个概念对于优化应用程序的性能和用户体验至关重要。 `Handler`(处理器)是Android中的一...

    Android和Handler那些事

    在Android开发中,`Handler`是一个非常重要的组件,它与线程通信密切相关,尤其是在处理UI更新和异步任务上起到关键作用。这篇博客"Android和Handler那些事"深入探讨了`Handler`的工作原理及其在实际应用中的使用...

    Handler使用

    在Android开发中,`Handler`是一个至关重要的组件,主要用于解决线程间的通信问题,尤其是在UI线程和其他工作线程之间。本篇文章将深入探讨`Handler`的使用方法,包括其基本概念、工作原理以及如何避免内存泄露和...

    Ext js Xtype

    如`Ext.Toolbar`,`Ext.Toolbar.Button`(已废弃,建议使用`button`),`Ext.Toolbar.Fill`,`Ext.Toolbar.Separator`等。 - **Form Components**: 用于构建表单的组件,如`Ext.FormPanel`,`Ext.form.Checkbox`,`...

    android 中Handler 的几种写法

    在Android开发中,`Handler`是一个至关重要的组件,它用于在主线程中处理来自其他线程的消息,确保UI更新和事件处理的同步性。本文将详细介绍`Handler`的几种常见写法,以及如何使用`Handler.Callback`进行消息处理...

Global site tag (gtag.js) - Google Analytics