Ext JS 基本概念 - 事件与手势

Using Events

Ext JS的组件和类在它们的lifecycle不同时期，触发很多的事件。Events允许你可以根据不同的事件，改变你的应用程序。它作为Ext JS的一个核心思想。

What Are Events?

事件是可以在任何感兴趣的时候触发，比如，当Ext.Component渲染到屏幕， Ext JS在渲染完组件后，会触发一个事件，我们可以通过创建时，指定的配置对事件进行监听

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

Ext.pane.Panel当前支持45种事件，可以查看http://docs.sencha.com/extjs/6.2.0-classic/Ext.panel.Panel.html#event-activate

Listening to Events

虽然 Ext.Component-event-afterrender 非常有用，但你会更多的频繁使用其它事件，比如 Ext.button.Button 的点击事件

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

一个组件可以包含尽可能多的事件监听器。在下面的例子中，在鼠标移动上按纽上时，调用this.hide() 隐藏它，然后在2秒后又显示它。

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

Adding Listeners Later

在上面的例子中，我们都是在组件创建时，通过配置添加的监听器。对于一个已经存在的组件实例，我们可以能过on函数，添加监听器

var button = Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: 'My Button'
});

button.on('click', function() {
    Ext.Msg.alert('Event listener attached by .on');
});

也可以能过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);
    }
});

Removing Listeners

就像我们可以添加监听器那样，也可以删除它们。我们使用un函数。

var doSomething = function() {
    Ext.Msg.alert('listener called');
};

var button = Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: 'My Button',
    listeners: {
        click: doSomething,
    }
});
//setTimeout
Ext.defer(function() {
    button.un('click', doSomething);
}, 3000);

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: {
        scope: panel,
        fn: function() {
            Ext.Msg.alert(this.getXType());
        }
    }
});

Listening to an Event Once

只监听一次事件

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

Using a Buffer Configuration

有的事件可以在很短时间类，被触发多次，我们可以通过buffer缓冲，减小事件次数。 如下的例子，不管发生多次点击，警告框都在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');
            }
        }
    }
});

Firing Custom Events

通过fireEvent可以触发自定义事件， 代码如下

var button = Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: "Just wait 2 seconds",
    listeners: {
        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('myEvent', button, number);
}, 2000);

Listening for DOM Events

不是所有的组件都包装了事件。可是我们可以通过容器的元素，添加对本地事件的监听。比如，Ext.container.Container是不包含有Client事件的。

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

如果没有上面的第二段，容器的点击事件不会被触发。由于我们对容器相关的元素添加了事件处理器, 因此扩展了容器的事件处理能力

Event Normalization

Event Normalization是将Ext JS 5+的应用程序运用到触摸设备上的关键技术。它将标准的鼠标事件转换为对等触摸和点事件。

Pointer事件是 w3c的标准事件，用来处理屏慕上坐标事件，而无关输入的设备是什么(mouse, touch, stylus都可以)

当你的代码监听的是一个鼠标事件，Ext JS框架会添加一个相似的touch或都pointer事件，比如, 应用程序想添加一个 mousedown事件

myElement.on('mousedown', someFunction)

事件系统会将它转换为touchstart, 以支持touch事件

myElement.on('touchstart', someFunction);

事件在有些设备上，转换为pointerdown

myElement.on('pointerdown', someFunction);

对于有的事件，可以非常完美的进行转换。但有的鼠标交互(比如mouseover）则不能简单的翻译成 touch交互，这些事件，我们需要当独的处理，如下一节所示

Gestures

除了标准的 DOM事件，元素也可以触发合成的”gesture”事件。自从Sencha以Touch Event System作为事件系统的基础。Sencha Touch的用户可能对此非常了解

从浏览器的解度来说，事件有三种主要的类型，pointer, touch, mouse events - start, move, end

Event	Touch	Pointer	Mouse
Start	touchstart	pointerdown	mousedown
Move	touchmove	pointermove	mousemove
Stop	touchend	pointerup

根据上面的事件的顺序以及时间，我们可以组件成复杂的事件, 比如drag, swipe, longpress, pinch, rotate, and tap. Ext JS应用可以监听gesture事件，就跟DOM事件一样

···
Ext.get(‘myElement’).on(‘longpress’, handlerFunction);
···
从 Ext JS 5开始可以在任何设备上响应gesture事件。