1. 什么是事件？

    事件+监听对象

Ext.create('Ext.Panel', {            html: 'My Panel',    renderTo: Ext.getBody(),    listeners: {        afterrender: function() {            Ext.Msg.alert('We have been rendered');        }    }});

    当前有45个事件类型

2. 监听事件的发生

    点击按钮触发事件：MessageBox

Ext.create('Ext.Button', {    text: 'Click Me',    renderTo: Ext.getBody(),    listeners: {        click: function() {            Ext.Msg.alert('I was clicked!');        }    }});

    点击按钮触发事件：this.hide() 

//点击按钮则隐藏//在button里面定义监听者Ext.create('Ext.Button', {    renderTo: Ext.getBody(),    text: 'My Button',    listeners: {        mouseover: function() {            this.hide();        },        hide: function() {            // Waits 1 second (1000ms), then shows the button again            Ext.defer(function() {                this.show();            }, 1000, this);        }    } });

3. 稍后定义监听者：在组件创建完成后

//先定义了buttonvar button = Ext.create('Ext.Button', {    renderTo: Ext.getBody(),    text: 'My Button'});//在定义监听事件button.on('click', function() {    Ext.Msg.alert('Event listener attached by .on');});

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);    }});

4. 移除监听

//下面定义了3秒后移除监听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);

5. 范围监听选项

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,                //定义范围，也可以改成  scope：button，        fn: function() {            Ext.Msg.alert(this.getXType());        }    }});

6. 只监听事件一次：不使其重复触发事件

var button = Ext.create('Ext.Button', {    renderTo: Ext.getBody(),    text: 'Click Me',    listeners: {        click: {            single: true,            //single属性            fn: function() {                Ext.Msg.alert('I will say this only once');            }        }    }});

7. 使用缓冲配置：

//不管你点击多少次，只要在2秒内，他只触发一次事件var button = Ext.create('Ext.Button', {    renderTo: Ext.getBody(),    text: 'Click Me',    listeners: {        click: {            buffer: 2000,            fn: function() {                Ext.Msg.alert('I say this only once every 2 seconds');            }        }    }});

8. 触发自定义事件

var button = Ext.create('Ext.Button', {    renderTo: Ext.getBody(),    text: "Just wait 2 seconds",    listeners: {        //监听者触发了一个myEvent事件，包含button自身，以及一个调用1-100之间的随机数        myEvent: function(button, points) {            Ext.Msg.alert('myEvent fired! You score ' + points + ' points');        }    }});Ext.defer(function() {    var number = Math.ceil(Math.random() * 100);    //通过事件名button调用fireEvent    button.fireEvent('myEvent', button, number);}, 2000);

9. 监听DOM事件：不是所有Extjs组件可以引发事件，设置容器的参数

var container = Ext.create('Ext.Container', {    renderTo: Ext.getBody(),    html: 'Click Me!',    listeners: {        click: function(){            Ext.Msg.alert('I have been clicked!')          }    }});container.getEl().on('click', function(){     this.fireEvent('click', container); }, container);

10. 事件的规范化：Extjs5版本以上，关键应用在touch-screen设备

    从鼠标点击等效到触摸或手指点击

// a mouse event,myElement.on('mousedown', someFunction);

    事件系统转译成设备支持的touchstart

myElement.on('touchstart', someFunction);

    或者转译成支持的pointerdown

myElement.on('pointerdown', someFunction);

    注：并非所有的操作都是那么好转译的

11. 动作：Gestures

    除了标准的DOM事件外，Elements也可以应用到“gesture”事件，主要用在Sencha Touch

    有3中最初的类型：（pointer, touch, 和 mouse 事件）start, move, 和 end

//Ext JS 5允许任何手势回应任何类型的输入Ext.get('myElement').on('longpress', handlerFunction);