Home » Sencha Touch » Sencha touch Controllers

Sencha touch Controllers

Welcome to the third module of this series. In this module we will learn about Sencha touch controller, how controller can interact with view, how can we add listeners to controller. Other than this we will also learn about different configuration options available for controller.

In this module we will learn three major points about sencha touch Controller:

  • Using controller for interaction
  • Using Ext.ComponentQuery
  • Refs & Event handlers

 

Sencha touch controllers’ plays important role in any application; they act as mediator between views, models and stores, they respond to events that are triggered by application views. In good practice, you should define one controller to handle specific part of the application. For example, you have 2 modules in an application; one is to display the people information and another is to display places information, in that case it is a good practice to have two different controller, one is for people and one if for places.

As we have seen in Views section we were adding listeners to our view itself, but that is not the correct approach, the best place to have event listeners is controllers. In that way we can reuse the same code and keep the code clean. 

Before we go ahead with controllers, I would like to give some idea about Ext.ComponentQuery(). In next section we will see controller uses refs config to get the component, refs internally uses Ext.ComponentQuery() syntax.

So it is pretty much clear from above statement that Ext.ComponentQuery() search component in the view. Ext.ComponentQuery() takes CSS selector to search the component.

Now let’s take a look at how can we use that. 

Ext.ComponentQuery.query("#mainPanel"); // will get component with id mainPanel

Ext.ComponentQuery.query(".mainPanel"); // will get component with class mainPanel

So basically Ext.ComponentQuery.query(‘css selectors’); will take all type of css selector combinations to search the panel.

There are two more methods which you should know before going further ; up and down.

Up() method walks up to look for an ancestor container which matches the passed selector. 

Ext.ComponentQuery.query("#mainPanel").up("mainContainer"); // will get ancestor of mainContainer element

Down() method moves down to look for an descendant container which matches the passed selector. 

Ext.ComponentQuery.query("#mainPanel").down("mainContainer"); // will get descendant of mainContainer element

 

- Creating Controller

Controllers are created by extending the class with Ext.app.controller. 

Ext.define('Codeureka.controller.MainController', {
    extend: 'Ext.app.Controller',
    config: {
     models:['Codeureka.model.MainModel'],
     views:['Codeureka.view.MainView1','Codeureka.view.MainView2'],
     stores:['Codeureka.store.MainStore'],
     routes:{
       "projectOwnerDetails/:id":"showProjectOwnerDetails"
     },
     refs: {
        projectListPanel:'#id_projectListContainer',
        projectTeamList:'teamList > #id_projectTeamListContainer'
     },
     control: {
        projectListPanel:{
          tap:'openProjectDetails'
        },
       projectTeamList list[action=action-project-team-list]':{
           itemtap:'showProjectTeamListScreen'
       },
     },
   }
   // Event handler methods.
   openProjectDetails:function(){
      // TODO
   },
   showProjectOwnerDetails:function(id){
      //TODO
   },
   showProjectTeamListScreen:function(list,index,target,record){
     // TODO
   }
});

Above code will create a MainController with following options:

models: models config dynamically load models. For example in our code MainModel.js which is in model folder will be loaded.

views: views config dynamically load views. For example in our code MainView1.js and MainView2.js which is in view folder will be loaded.

stores: stores config dynamically loads stores. For example in our code MainStore.js which is in store folder will be loaded.

refs: refs basically uses CompnentQuery syntax to get the component from view, and are defined in form of key/value pairs. For example in our code ProjectListPanel(key) will find the component with ID “id_projectListContainer” (value) in view file. Sencha touch automatically creates getter() function for whatever key we define in refs. So above code will also create getProjectListPanel() function.

Second ref is bit complex, in that we are saying, get the component whose view id is “id_projectTeamListContainer” and is under xtype teamlist.

Refs are important because they improve the application performance by caching the result. 

control: control is used to bind click events with the key defined in refs. For example in control config we are binding tap event with projectListPanel, which means tapping on projectListPanel will call openProjectDetails.

routes: routes are basically used to provide routing, enables history support and provides deep linking. For example whenever the app url changes to projectOwnerDetails/id, showProjectOwnerDetails(id) method will be called.

Above we have defined controller for our application, so must have go an idea that controllers works like a glue which holds views and models together. To use the controller we should add it to controllers config of our application.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>