事件是在类发生某些事情时被触发的事情.例如,当点击按钮时或者在呈现元素之前/之后.
以下是编写方法事件.
使用听众的内置事件.
稍后附加事件
自定义事件
Sencha Touch提供监听器属性用于在Sencha Touch文件中编写事件和自定义事件.
我们将通过添加在前一个程序中添加侦听器监听面板的属性,显示如下 :
<!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);