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事件。