组件事件管理（Component Event Management）
更新记录
发布。
2022年6月25日 从笔记迁移到博客。
ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html
组件事件管理（Component Event Management）
添加监听事件（Adding Listeners）
说明
支持三种监听事件的方式：
使用组件的listeners配置项监听内置事件（Built-in events using listeners）
在创建类型实例后添加事件监听（Attaching events later）
自定义事件和监听（Custom events）
使用listeners属性监听内置事件（Built-in events using listeners）
只需要将监听的事件名称和事件处理程序放在listeners属性里面即可
{
xtype: 'button',
text: '按钮',
renderTo: Ext.getElementById('btn'),
listeners:{
click: function(e){
Ext.MessageBox.alert('提示','你点击了按钮');
}
}
}
可以在listeners配置项中添加多个事件监听
{
xtype: 'button',
text: '按钮',
renderTo: Ext.getElementById('btn'),
listeners:{
click: function(e){
this.hide();
},
hide: function(e){
Ext.MessageBox.alert('提示','你按钮隐藏了');
var that = this;
setInterval(function(){ that.show(); },2000);
}
}
}
还可以设定事件监听的参数
{
xtype: 'button',
text: '按钮',
renderTo: Ext.getElementById('btn'),
defaultListenerScope: true, //设置事件默认scope为this
listeners:{
click: {
fn:function(e){
this.hide();
}
},
hide: {
fn: function(e){
Ext.MessageBox.alert('提示','你按钮隐藏了');
var that = this;
setInterval(function(){ that.show(); },2000);
}
}
}
}
在创建对象或之后添加事件监听（add listeners after the instance is created）
使用on()方法即可（类似jQuery）
Ext.on ( eventName, [fn], [scope], [options], [order] ) : Object
options支持的Key：https://docs.sencha.com/extjs/7.3.1/classic/Ext.html#method-on
注意：Ext.on()方法是Ext.GlobalEvents.addListener()方法的别名
实例：
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方法
var button = Ext.create('Ext.Button', {
renderTo: Ext.getBody(),
text: 'My Button'
});
button.on({
mouseover: function() {
//do
},
hide: function() {
//dog
}
});
还可以更细致的定义监听函数
button.on({
cellclick: {
fn: 'onCellClick',
scope: this,
single: true
},
viewready: {
fn: 'onViewReady',
scope: panel
}
});
自定义事件和监听（Custom events）
只需要将自定义事件名称和事件处理程序放在listeners配置项里面即可
然后使用.fireEvent()方法触发即可
var button = Ext.create('Ext.Button', {
renderTo: Ext.getBody(),
text: 'Click Me',
listeners: {
//自定义事件
pandaEvent: {
single: true,
fn: function() {
Ext.Msg.alert('Success!', 'Success');
}
}
}
});
//触发事件
button.fireEvent('pandaEvent');
在对象外部定义自定义事件并触发
//定义对象
var PandaContainer = Ext.create('Ext.container.Container',{
listeners:{
}
});
//绑定事件
PandaContainer.on('PandaEvent',function(){
console.log('PandaEvent Is Fired');
});
//触发事件
PandaContainer.fireEvent('PandaEvent');//PandaEvent Is Fired
组件实现观察者模式
还可以使用Ext.util.Observable类型可以进行实现观察者模式进行创建自定义事件
//自定义组件
Ext.define('Panda.test.Component',{
//混入Ext.util.Observable
mixins: {observable: 'Ext.util.Observable'},
//Other Code.....
constructor: function( config ){
//调用observable的构造函数
this.mixins.observable.constructor.call( this, config );
},
//自定义事件
quitJob: function(){
//触发事件
this.fireEvent('quit', 'abc', new Date(), 2,1, 'more params...' );
}
});
//实例化组件
var patricia = Ext.create('Panda.test.Component', {
listeners:{
//监听事件
'quit':function(EmployeeName, quitDate, param, paramb, paramc){
console.log('Event quit launched');
console.log('Employee:' + EmployeeName);
console.log('Date:'+ Ext.util.Format.date(quitDate,'Y-m-d H:i'));
console.log('Param :' + param);
console.log('Param B:' + paramb);
console.log('Param C:' + paramc);
}
}
});
//触发事件
patricia.quitJob();
设置事件处理函数只执行一次
把single配置项设置为true即可
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');
}
}
}
});
设置事件处理函数的作用域（Scope Listener Option）
默认情况下，事件处理程序的作用域为触发事件的类的实例
这通常是您想要的功能，但并不总是如此
使用scope项设置事件处理程序的作用域
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
});
还可以使用defaultListenerScope配置项设置组件默认的事件作用域
{
xtype: 'button',
text: '按钮',
renderTo: Ext.getElementById('btn'),
defaultListenerScope: true, //设置事件默认scope为this
listeners:{
click: {
fn:function(e){
this.hide();
}
},
hide: {
fn: function(e){
Ext.MessageBox.alert('提示','你按钮隐藏了');
var that = this;
setInterval(function(){ that.show(); },2000);
}
}
}
}
设置事件缓冲
对于短时间内多次发生的事件，我们可以减少事件触发的次数
通过使用缓冲区配置调用侦听器
使用buffer配置项即可，值是缓冲的时间
{
xtype: 'button',
renderTo: Ext.getBody(),
text: 'Click Me',
listeners: {
click: {
buffer: 2000, //设置缓冲2秒
fn: function() {
Ext.Msg.alert('Success!', 'Success!');
console.log("Success");
}
}
}
}
移除事件（Remove Listeners）
说明
移除事件需要使用指定的事件名称
注意：不可以移除匿名函数
移除事件监听
使用un方法即可
Ext.un ( eventName, fn, [scope] )
注意：Ext.un()方法是Ext.GlobalEvents.removeListener()方法的快捷别名
var doSomething = function() {
Ext.Msg.alert('Success!', '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);
手动触发事件（Trigger Event）
调用fireEvent方法即可（可以触发 预定义的事件 或 自定义的组件事件）
Ext.fireEvent ( eventName, args ) : Boolean
注意：fireEvent是Ext.GlobalEvents.fireEvent的快捷方法
实例：
var button = Ext.create('Ext.Button', {
renderTo: Ext.getBody(),
text: 'Click Me',
listeners: {
//自定义事件
pandaEvent: {
sigle: true,
fn: function() {
Ext.Msg.alert('Success!', 'Success');
}
}
}
});
//触发事件
button.fireEvent('pandaEvent');
按钮快捷点击事件绑定
按钮可以使用handler配置项，快速配置按钮的点击事件
{
xtype: 'button',
text: 'Button',
renderTo: Ext.getBody(),
handler: function(){ //快捷方式
console.log('Clicked');
}
}
onXXX方法（on method）
除了在listeners中配置事件处理函数，还可以直接定义组件的onXXX事件处理函数
实例：直接定义onMouseOver()方法，监听鼠标hover事件
{
xtype: 'button',
text: 'Button',
renderTo: Ext.getBody(),
onMouseOver: function () {
console.log('Button Mouseover Event Fired');
}
}
本文来自博客园，作者：重庆熊猫，转载请注明原文链接：https://www.cnblogs.com/cqpanda/p/16468622.html
