”;
Events are something which get fired when something happens to the class. For example, when a button is getting clicked or before/after an element is rendered.
Methods of Writing Events
Following are the methods of writing events.
- Built-in events using listeners.
- Attaching events later
- Custom events
Built-in Events Using Listeners
Sencha Touch provides listener property for writing events and custom events in Sencha Touch files.
Writing listener in Sencha Touch
We will add the listener in the previous program itself by adding listen property to the panel, shown as follows −
<!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>
This will produce following result −
This way we can also write multiple events in listeners property.
Multiple events in the same listener
<!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>
It will produce the following result −
Attaching event later
In the previous method of writing events, we have written events in listeners at the time of creating elements.
The other way to attach events is as follows −
<!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>
It will produce the following result −
Custom events
We can write custom events in Sencha Touch and fire the events with fireEvent method. Following example explains how to write custom events.
<!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>
Once the page is loaded and the document is ready, the UI page with button will appear and as we are firing an event after 5 seconds, once the document is ready the alert box will appear after 5 seconds.
Here we have written the custom event ”myEvent” and we are firing events as button.fireEvent(eventName);
”;