Sencha Touch - 事件
事件是当类发生某些事情时触发的。例如，当单击按钮时或在呈现元素之前/之后。
编写事件的方法
以下是编写事件的方法。
- 使用侦听器的内置事件。
- 稍后附加事件
- 自定义事件
使用侦听器的内置事件
Sencha Touch 提供侦听器属性，用于在 Sencha Touch 文件中编写事件和自定义事件。
在 Sencha Touch 中编写侦听器
我们将通过向面板添加 listen 属性在上一个程序本身中添加侦听器，如下所示 −
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha', launch: function() {
Ext.create('Ext.Panel', {
html: 'My Panel', fullscreen: true, listeners: {
painted: function() {
Ext.Msg.alert('I was painted to the screen');
}
}
});
}
});
</script>
</head>
</html>
这将产生以下结果 −
这样我们还可以在 listeners 属性中写入多个事件。
同一个监听器中的多个事件
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
var myButton = Ext.Viewport.add({
xtype: 'button',
centered: true,
text: 'Click me'
});
myButton.on({
tap: function() {
var randomWidth = 100 + Math.round(Math.random() * 200);
this.setWidth(randomWidth);
},
widthchange: function(button, newWidth, oldWidth) {
alert('My width changed from ' + oldWidth + ' to ' + newWidth);
}
});
}
});
</script>
</head>
</html>
它将产生以下结果 −
稍后附加事件
在前面的编写事件的方法中，我们在创建元素时将事件写入侦听器中。
附加事件的另一种方法如下 −
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
var myButton = Ext.Viewport.add({
xtype: 'button',
centered: true,
text: 'Click me'
});
myButton.on('tap', function() {
alert("Event listener attached by .on");
});
}
});
</script>
</head>
</html>
它将产生以下结果 −
自定义事件
我们可以在 Sencha Touch 中编写自定义事件，并使用 fireEvent 方法触发事件。以下示例说明如何编写自定义事件。
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
var myButton = Ext.Viewport.add({
xtype: 'button',
centered: true,
text: "Just wait 5 seconds",
listeners: {
myEvent: function(button, points) {
alert('myEvent was fired! You score ' + points + ' points');
}
}
});
Ext.defer(function() {
var number = Math.ceil(Math.random() * 100);
myButton.fireEvent('myEvent', myButton, number);
}, 5000);
}
});
</script>
</head>
</html>
页面加载完毕，文档准备就绪后，带有按钮的 UI 页面将会出现，由于我们会在 5 秒后触发事件，因此文档准备就绪后，警报框将在 5 秒后出现。
这里我们编写了自定义事件"myEvent"，并以 button.fireEvent(eventName) 的形式触发事件;
