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.