组件事件管理（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');
    }
}