ExtJS的组件和类，会在生命周期中调用一系列的事件，事件允许你自己写代码控制你应用程序的实际行为，它是ExtJS的一个核心内容。
什么是事件？
事件在你类中感兴趣的地方发生，比如，Ext.Component在渲染到屏幕的时候，ExtJS会在渲染完成后通知一个事件。我们可以通过配置一个listeners来监听那个事件。
Ext.create('Ext.Panel', {
html: 'My Panel',
renderTo:Ext.getBody(),
listeners: {
afterrender:function() {
Ext.Msg.alert('Success!', 'We have been rendered');
}
}
});
在例子中，当你点击preview按钮的时候，pannel渲染到屏幕，然后就会执行定义好的aler信息。所有的时间在类的API页面都有列出，比如，Ext.panel.Panel共有45个监听事件。
监听事件
在某些情况下，Ext.Component#event-afterrender是非常有用的，其它，比如Ext.button.Button的click事件。
Ext.create('Ext.Button', {
text: 'Click Me',
renderTo:Ext.getBody(),
listeners: {
click: function(){
Ext.Msg.alert('Success!', 'I was clicked!');
}
}
});
一个组件可能包含许许多多的事件监听，在下面的代码中，我们通过调用this.hide()方法迷惑用户，当我们鼠标滑过的时候，按钮就隐藏。一秒后，再让它显示。当this.hide()方法调用的时候，hide方法就被触发，hide事件触发hide监听，一秒后让按钮显示。
Ext.create('Ext.Button', {
renderTo:Ext.getBody(),
text: 'My Button',
listeners: {
mouseover:function() {
this.hide();
},
hide: function(){
// Waits 1second (1000ms), then shows the button again
Ext.defer(function(){
this.show();
}, 1000,this);
}
}
});
事件监听在每次触发的时候都会被调用，所以根据需要你可以不限次的显示和隐藏按钮。
监听后置
在先前的例子中，我们在组件初始化的时候给组件传递了监听，但是如果我们已经有一个实例，我们也可以通过on 事件增加一个监听。
var button = Ext.create('Ext.Button', {
renderTo:Ext.getBody(),
text: 'My Button'
});
button.on('click', function() {
Ext.Msg.alert('Success!','Event listener attached by .on');
});
也可以通过on指定多个监听，跟使用listener监听一个道理，下面跟上面的代码相反，让按钮show：
var button = Ext.create('Ext.Button', {
renderTo:Ext.getBody(),
text: 'My Button'
});
button.on({
mouseover: function(){
this.hide();
},
hide: function() {
Ext.defer(function() {
this.show();
}, 1000, this);
}
});
清除监听
在任何时候我们都可以增加监听，那在任何时候也可以移除监听，使用un功能，就可以达到。下面自定义了一个doSomething（）方法，开始定义一个监听，然后三秒后移除监听，开始有事件发生，后期因为移除了就不会有事件发生。
var doSomething = function() {
Ext.Msg.alert('listener called');
};
var button = Ext.create('Ext.Button', {
renderTo:Ext.getBody(),
text: 'My Button',
listeners: {
click:doSomething,
}
});
Ext.defer(function() {
button.un('click',doSomething);
}, 3000);
节点监听选项
节点通过你的处理功能设置值，默认是类来触发这个事件，但这不是固定不变的，上面的例子是在this.hide（）方法调用hide()隐藏按钮的，下面，我们创建一个按钮和一个面板，然后监听按钮的点击事件，作用域在面板内，为了这样做，需要传递一个实例代替一个处理方法，实例包含了一个AND节点方法：
var panel = Ext.create('Ext.Panel', {
html: 'Panel HTML'
});
var button = Ext.create('Ext.Button', {
renderTo:Ext.getBody(),
text: 'Click Me'
});
button.on({
click: function() {
Ext.Msg.alert('Success!', this.getXType());
},
scope: panel
});
当然，也可以通过冗余的方式设置一些监听，如果你不需要整体简洁的话：
var panel = Ext.create('Ext.Panel', {
html: 'Panel HTML'
});
var button = Ext.create('Ext.Button', {
renderTo:Ext.getBody(),
text: 'Click Me'
});
button.on({
click: {
scope: panel,
fn: function() {
Ext.Msg.alert('Success!', this.getXType());
}
}
});
运行后，点击事件的this就是代表的panel了，我们可以通过alert节点组件的xtype观察此项。当按钮被点击的时候我们能看到panel的xtype弹出。
单次监听
你可能也会想事件只监听发生一次，事件可能无限次发生，但是我们只想监听一次，下面展示一下：
var button = Ext.create('Ext.Button', {
renderTo:Ext.getBody(),
text: 'Click Me',
listeners: {
click: {
single: true,
fn:function() {
Ext.Msg.alert('Success!','I will say this only once');
}
}
}
});
使用Buffer配置
当频繁调用的时候我们可以通过buffer配置减少事件发生的次数，下面例子展示只有2秒的时候才会触发一次事件的：
var button = Ext.create('Ext.Button', {
renderTo:Ext.getBody(),
text: 'Click Me',
listeners: {
click: {
buffer: 2000,
fn: function() {
Ext.Msg.alert('Success!','I say this only once every 2 seconds');
}
}
}
});
监听自定义事件
通过fireEvent调用自定义的方法，下面的例子使用了myEvent带两个参数，按钮本身和1-100之间的随机数：
var button = Ext.create('Ext.Button', {
renderTo:Ext.getBody(),
text: "Just wait2 seconds",
listeners: {
myEvent:function(button, points) {
Ext.Msg.alert('Success!','myEvent fired! You score ' + points + 'points');
}
}
});
Ext.defer(function() {
var number =Math.ceil(Math.random() * 100);
button.fireEvent('myEvent', button, number);
}, 2000);
又使用了一次Ext.defer来延迟方法的执行，这次是2秒，当事件触发的时候，myEvent事件就展示传入进来的参数。
监听DOM事件
并不是所有的ExtJS组件都有所有的事件，但是通过绑定到文档中，我们可以手动的给它添加一个事件，Ext.containner.Contener没有click事件，我们可以给定它一个：
var container = Ext.create('Ext.Container', {
renderTo:Ext.getBody(),
html: 'Click Me!',
listeners: {
click:function(){
Ext.Msg.alert('Success!', 'I have been clicked!')
}
}
});
container.getEl().on('click', function(){
this.fireEvent('click', container);
}, container);
没有下面的那段代码，点击事件就不会触发，因为我们把组件的点击事件绑定到监听器上，我们就扩展了容器的事件能力。
事件标准化
事件标准化运行ExtJS5+应用程序在不同的触摸设备（不包括鼠标键盘灯）上得以运行。事件在底层将事件转换成触摸设备支持的类型。
当你设置mosedown事件的时候，在移动设备就会转换为touchstrt事件：
myElement.on('mousedown',someFunction);
myElement.on('touchstart',someFunction);
而在支持pointerdown的设备中就会被转换为
myElement.on('pointerdown',someFunction);
网友评论