Sencha Touch Tutorial
Sencha Touch Useful Resources
Selected Reading
- Sencha Touch - Best Practice
- Sencha Touch - Packaging
- Sencha Touch - View Components
- Sencha Touch - Upload & Download
- Sencha Touch - History & Support
- Sencha Touch - Layout
- Sencha Touch - Events
- Environment Detection
- Sencha Touch - Dependencies
- Sencha Touch - Device Profile
- Sencha Touch - Theme
- Sencha Touch - Data
- Sencha Touch - Core Concepts
- Sencha Touch - Migration Steps
- Sencha Touch - Build Application
- Sencha Touch - First App
- Sencha Touch - MVC Explanation
- Sencha Touch - Architecture
- Sencha Touch - Naming Convention
- Sencha Touch - Environment
- Sencha Touch - Overview
- Sencha Touch - Home
Sencha Touch Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Sencha Touch - Events
Sencha Touch - Events
Events are something which get fired when something happens to the class. For example, when a button is getting cpcked or before/after an element is rendered.
Methods of Writing Events
Following are the methods of writing events.
Built-in events using psteners.
Attaching events later
Custom events
Built-in Events Using Listeners
Sencha Touch provides pstener property for writing events and custom events in Sencha Touch files.
Writing pstener in Sencha Touch
We will add the pstener in the previous program itself by adding psten property to the panel, shown as follows −
<!DOCTYPE html>
<html>
<head>
<pnk 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.apppcation({
name: Sencha , launch: function() {
Ext.create( Ext.Panel , {
html: My Panel , fullscreen: true, psteners: {
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 psteners property.
Multiple events in the same pstener
<!DOCTYPE html>
<html>
<head>
<pnk 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.apppcation({
name: Sencha ,
launch: function() {
var myButton = Ext.Viewport.add({
xtype: button ,
centered: true,
text: Cpck 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 psteners at the time of creating elements.
The other way to attach events is as follows −
<!DOCTYPE html>
<html>
<head>
<pnk 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.apppcation({
name: Sencha ,
launch: function() {
var myButton = Ext.Viewport.add({
xtype: button ,
centered: true,
text: Cpck me
});
myButton.on( tap , function() {
alert("Event pstener 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>
<pnk 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.apppcation({
name: Sencha ,
launch: function() {
var myButton = Ext.Viewport.add({
xtype: button ,
centered: true,
text: "Just wait 5 seconds",
psteners: {
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);
Advertisements