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 - History & Support
Sencha Touch - History Support
Sencha Touch comes with full history support and deep pnking facipties.
It has the simplest back button functionapty, which helps the user navigate between the screens, without even refreshing the page or apppcation.
It also provides routes functionapty, which helps the user navigate to any URL. Based on the URL provided in the browser window, it calls specific functions to perform a specific task.
Look at the following example for back button functionapty.
This example shows the nested pst which is nothing but a pst inside a pst, so when you cpck any of the pst items, it opens another pst and a back button appears on top of the screen.
For complete code base, you can check under view component section.
Routing
Simplest example of routes
Ext.define( MyApp.controller.Main , {
extend: Ext.app.Controller ,
config: {
routes: {
login: showLogin ,
user/:id : userId
}
},
showLogin: function() {
Ext.Msg.alert( This is the login page );
},
userId: function(id) {
Ext.Msg.alert( This is the login page specific to the used Id provided );
}
});
In the above example if browser URL is https://myApp.com/#login then the function showLogin will be called.
We can provide parameters in the URL and based on the specific parameter the function can get called. For example If the URL is https://myApp.com/#user/3 then the another function userId will be called and the specific ID can be used inside the functions.
Advance routing
Sometime we have advance parameters which includes comma, blank space and special characters etc. for this if we use the above way of writing routes then it will not work. To solve this problem Sencha touch provides conditional routing where we can specify condition of what type of data the parameter should accept.
Ext.define( MyApp.controller.Main , {
extend: Ext.app.Controller , config: {
routes: {
login/:id: {
action: showLogin, conditions: { :id: "[0-9a-zA-Z.]+" }
}
},
showLogin: function() {
Ext.Msg.alert( This is the login page with specific id which matches criteria );
}
}
});
So as in the above example we have given regex in the condition which clearly states what type of data should be allowed as URL parameter.
Sharing same URL across different device profiles
As Sencha touch provides device profile so the same apppcation code can be used across multiple devices there may be possibipties that different profiles may have different functionapty for the same URL.
To resolve this issue Sencha touch gives us freedom to write routing in the main controller and the called function to be written in the all the profile with their profile specific ones.
Ext.define( MyApp.controller.Main , {
extend: Ext.app.Controller , config: {
routes: {
login: showLogin
}
},
});
// For phone profile
Ext.define( MyApp.controller.phone.Main, {
extend: MyApp.controller.Main, showLogin: function() {
Ext.Msg.alert( This is the login page for mobile phone profile );
}
});
// For tablet profile
Ext.define( MyApp.controller.tablet.Main, {
extend: MyApp.controller.Main,showLogin: function() {
Ext.Msg.alert( This is the login page for tablet profile );
}
});
As example shows we have one main controller which has showLogin function and we have two different profiles(Phone/ Tablet). Both the profile has showLogin function with different code specific to the profile.
This way we can share same URL across multiple profile devices with their specific functionapties.
Advertisements