1. 什麼是事件?
html
事件+監聽對象api
Ext.create('Ext.Panel', { html: 'My Panel', renderTo: Ext.getBody(), listeners: { afterrender: function() { Ext.Msg.alert('We have been rendered'); } } });
Ext.panel.Panel當前有45個事件類型dom
2. 監聽事件的發生ide
點擊按鈕觸發事件:MessageBoxthis
Ext.create('Ext.Button', { text: 'Click Me', renderTo: Ext.getBody(), listeners: { click: function() { Ext.Msg.alert('I was clicked!'); } } });
點擊按鈕觸發事件:this.hide()
code
//點擊按鈕則隱藏 //在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. 稍後定義監聽者:在組件建立完成後htm
//先定義了button var 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. 範圍監聽選項seo
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
Event | Touch | Pointer | Mouse |
---|---|---|---|
Start | touchstart | pointerdown | mousedown |
Move | touchmove | pointermove | mousemove |
Stop | touchend | pointerup |
//Ext JS 5容許任何手勢迴應任何類型的輸入 Ext.get('myElement').on('longpress', handlerFunction);