Extjs学习（3）：事件和动作
1. 什么是事件？
事件+监听对象
Ext.create('Ext.Panel', {
html: 'My Panel',
renderTo: Ext.getBody(),
listeners: {
afterrender: function() {
Ext.Msg.alert('We have been rendered');
}
}
});
Ext.panel.Panel当前有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. 稍后定义监听者：在组件创建完成后
//先定义了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. 范围监听选项
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);