- Sencha Touch Tutorial
- Sencha Touch - Home
- Sencha Touch - Overview
- Sencha Touch - Environment
- Sencha Touch - Naming Convention
- Sencha Touch - Architecture
- Sencha Touch - MVC Explanation
- Sencha Touch - First App
- Sencha Touch - Build Application
- Sencha Touch - Migration Steps
- Sencha Touch - Core Concepts
- Sencha Touch - Data
- Sencha Touch - Theme
- Sencha Touch - Device Profile
- Sencha Touch - Dependencies
- Environment Detection
- Sencha Touch - Events
- Sencha Touch - Layout
- Sencha Touch - History & Support
- Sencha Touch - Upload & Download
- Sencha Touch - View Components
- Sencha Touch - Packaging
- Sencha Touch - Best Practice
- Sencha Touch Useful Resources
- Sencha Touch - Quick Guide
- Sencha Touch - Useful Resources
- Sencha Touch - Discussion
Sencha Touch - Controller
Controller is one of the main components of MVC architecture.
Controller is the component which controls the functionality. We write listener in the controller and it acts as a glue between the view and the model, where the view is for visual UI whereas the model is to store and manipulate the data.
The main functions of a controller are −
The actions are written in controller as if we press a button in application or hover over some link, what action has to be performed is written in the controller listener functions.
Controller has the init and launch function available, which are being called once the application and the controller is launched.
Controller Init and Launch Functions
We can define launch and init function in the controller. An application can have its own launch function so here is the order in which the functions should get called.
Init function of the controller is called first when the application starts.
Then the launch function of application is called.
The launch function of the controller is called once the launch of application is called and the application is launched.
Config Components of the Controller
We can have refs and control in the config of a controller. Let’s take a look at the way both work.
Refs
Refs in config can be used as shown in the following example.
Ext.define('MyApp.controller.Main', { extend: 'Ext.app.Controller', config: { refs: { tab: '#divId } }, addLogoutButton: function() { this.getTab().add({ text: 'Logout' }); } });
Refs can be used to refer any id. As we see in the above example, the tab is the ref created which refers to the id #divId.
Refs are created in key value pair, as in the above example, tab is the key and divId is the value. Whenever a ref is created the gets and setters are automatically created for the same. In the above example, we have created a ref as tab so we can access it as getTab method, which is automatically created.
Control
Control is a config which is similar to ref which takes ref as key and the value as listen function, which is called to perform some tasks.
Ext.define('MyApp.controller.Main', { extend: 'Ext.app.Controller', config: { control: { loginButton: { tap: 'doLogin' // ref tap is the key and doLogin is the value which is a listener. } }, refs: { loginButton: 'button[action=login]' } }, doLogin: function() { // called whenever the Login button is tapped } });
Routes
Controller defines the route in which it is interested in. With the help of routes, we can link any part of the application to the route provided.
Ext.define('MyApp.controller.Main', { extend: 'Ext.app.Controller', config: { routes: { login: 'showLogin', 'user/:id': 'userId' } }, showLogin: function() { // statements }, userId: function() { // statements } });
Route can be accessed with the browsers address bar URL.
In the above example, showLogin controller function will be called if the user hits the url https://myApp.com/#login.
Routes can be called with wild cards too, such as userId function will be called if the browser URL is https://myApp.com/#user/3003
Hence, whenever the browser URL changes, the route will automatically call the specific controller function.
To Continue Learning Please Login
Login with Google