ExtJS 自定义事件学习

wangdingbang

墨衍会员 · AI 创作全网分发码龄17年

关注

原创最新推荐文章于 2025-07-29 16:42:12 发布 2.9k 阅读 AI 写同款· GEO 优化 ›

70、ExtJs的combobox的监听事件 ExtJs的combobox的监听事件阅读详情

最近在北京一家软件工作做web开发，用到了ExtJS，在工作的过程中，发现Ext的事件模型运用的非常广泛，几乎是无处不在，因此，总结了一些关于ExtJS事件的知识，晒出来与需要的人分享。

事件模型在Ext应用中有着尤为重要的作用。Ext中的事件模型分为两种类型：自定义事件和浏览器事件。

自定义事件：

Ext中遵循一种树状的事件模型，所有继承自Ext.util.Observable类的控件都可以支持事件。可以为这些继承Ext.util.Observable的对象定义一些事件，然后为这些事件配置监听器，当某个事件触发时，会自动的调用相应的监听器，这些就是Ext的事件模型。

下面通过继承Ext.util.Observable来实现一个支持事件的对象，显示过程代码如下：

Person 类：

Person =function(name){ this.name=name; this.addEvents("walk","eat","sleep"); } Ext.extend(Person,Ext.util.Observable,{ info:function(event){ return: this.name+'is'+'event'+'ing.'; } });

以上代码实现了一个名为Person的对象，他有一个属性name，初始化时，调用addEvent函数定义了三个事件，walk，eat，sleep，然后使用Ext.extend()让Person继承了Ext.util.Observable的所有属性。此外，还加上了函数info()然他返回Person的信息。

接下来该怎么做呢？

我们在HTML中创建一个Person的实例，然后为它的事件配置好监听器，代码如下：

为Person添加事件监听器：

这里的on()是addEvent()的简写形式，功能完全一样。第一个参数传递事件名称，第二个参数是事件发生时执行的函数，为简单期间，我们在这里写生alert()的形式。

现在准备工作已经都就绪，在这些事件被触发时就可以看到效果了，可是怎么触发呢？为了便于控制，我们设置3个按钮，在按钮按下时触发相应的事件。

触发person的事件：

Ext.get('walk').on('click',function(){ person.fireEvent('walk'); }); Ext.get('eat').on('click',function(){ person.fireEvent('eat','早餐','中餐','晚餐'); }); Ext.get('sleep').on('click',function(){ person.fireEvent('sleep',new Date()); });

接着调用fireEvent就会触发事件，传入一个事件名称作为参数，该事件对应的监听函数就会执行。

下面要讲述的是只有动态语言才有的特性，如果想给监听方法传递参数，直接把参数写到fireEvent()里面就行了，不用管参数数量，也不用管参数类型（字符串，数字，日期，数组等）。不过，需要确保监听函数可以处理你传过去的参数，如果监听函数需要某个参数，触发事件时却忘了传递过去，这时就会出错。这种因为动态语言的特性而导致的非直观错误非常难以查找。

正如on是addListener的简写，removeListener的简写是un。你可以用它删除某个事件对应的监听函数，具体的操作代码如下：

var function(){ //too } person.on('walk',fn); person.un('walk',fn);

还有一个purgeListener()函数，一旦调用这个函数，所有的监听器都删掉了，请注意，是所有的监听器，一旦调用这个函数，所有的事件

都不起作用了。因此，一定要慎用。

收录于