Home » Sencha Touch » Sencha Touch MVC

Sencha Touch MVC

Welcome to the first module of this series. In this module we will learn about Sencha touch MVC pattern and about four major components of sencha touch. Moving forward we will learn about sencha touch class system and lastly we will see how Ext.Viewport class play important role in any ST application development.

It is always recommended to use MVC pattern in your application, whether that application is developed using java or c# or any other language. It is always a good practice to follow MVC pattern though it is not necessary to follow that pattern but it has its own advantage like it helps to organize the code in a better way and improves the code re-usability.

Sencha Touch also supports MVC pattern development, sencha touch MVC has four main components:

 

- Models:

Model holds the application object; and logic to manipulate that object, for example an application can have an object of type car (Model) which will have properties like color, model, cost etc. and you can have logic to manipulate each property according to your need. 

Sencha touch models can be linked to other models also which helps to provide one-to-many or many-to-many relationship.

 

- Views:

Views are the Visual components that are displayed to user. Any container or component displayed on screen is view. Views are responsible to take user input and perform some action based on the user inputs.

 

- Controllers:

Controllers are basically used to write the application logic and to handle events. Controller acts as a bridge between model and view. Controllers are also responsible to perform an action whenever the event is triggered from a view.

 

- Stores:

Stores are used to cache the model data on client side and they can also be used to load the model data by using proxies (We will learn more about proxies in store and model module). Stores may also have logic to filter and sort the model data. 

So Models, View, Controllers and Stores are four main pillars of any sencha touch application, as we move further we will go through each of these topics in detail.

 

Class System

Class system has its own benefits in any software development, it facilitates rapid development, it facilitates ease of maintenance and provides code reusability. The class system in Sencha is almost same as the OOP class concepts, it supports inheritance, encapsulation etc. which further helps to write organized code. So let’s take a look at Sencha class system components. 

 

- Define:

Ext.define('Vehicle',{
    extend: 'Ext.Panel',
    config:{
      model:'Bentley',
      price:'2',
      color:'black',
    },
    initialize:function(){
      console.log("initialize this class");
    },
    renderData:function(){
      console.log(this.getModel());
    }
});

Above code snippet shows how to define the class in Sencha touch.

- Ext is the namespace used in Sencha or we can say it is the Sencha object, if you log Ext you will get Sencha object as output in console window.

- Ext.define is used to define the new class.

- First parameter of Ext.define() is the ClassName and second parameter defines the class properties in form of key-value pairs.

- Optionally define() function can take third parameter also which is used to execute callback function after class has created.

- ClassName is very important, if we use “AppName.View.Vehicle” that means the class is in folder app/view/Vehicle.js

- “extend” defines the parent class from which our class will extend. In our case, Vehicle class will inherit all the properties, events and methods from Ext.Panel class.

- “config” defines custom class properties in key-value pair. Sencha touch has a very nice built-in feature which generates setter and getter for all the properties that are defined in config. We will discuss about how to use setter and getter on these properties later in this module.

- “initialize” is the method which gets called as soon as the object/instance of that class is created.

- “renderData” is the user defined function which will print model name in console.

 

- Create:

After defining the class, next step is to use it by creating an instance of that class.

// creating instance of Vehicle class
var vehicle  = Ext.create('Vehicle',{});

// calling renderData method which was defined in Vehicle class.
vehicle.renderData();

// console: Bentley

- Ext.create() is used to create an instance of the class.

- In above snippet we are creating an instance of Vehicle class, the first parameter is the name of parent class. And second parameter is used to define custom properties or inheriting the base class properties.

 

- Setter:

There are two ways to set the property value defined in config.

1) Update the property value while creating the class

var vehicle  = Ext.create('Vehicle',{
          model:'ferrari',
      });

vehicle.renderData();

// console: ferrari

 In above example we are updating the “model” property value while creating instance of the class.

 2) call setPropertyName() method to update the value

var vehicle  = Ext.create('Vehicle',{
     model:'ferrari',
   });

vehicle.renderData();

// console: ferrari

vehicle.setModel("Mercedes");
console.log(vehicle.getModel());

// console: Mercedes

Above we are calling setModel() method on vehicle which will update the model value. To set the value of any property we should always use “set” and property name. i.e. setPropertyName(). 

 

- Getter: 

To get the value of any property we should use getPropertyName().

The important point to note in setter/getter is method names are case sensitive so one should be very carefully while calling these methods, for example getModel() and getmodel() are different; and calling getmodel() in our case will return undefined.

var vehicle  = Ext.create('Vehicle',{ });
console.log(vehicle.getModel());

// console: Bentley

 

- Apply:

Apply function runs whenever the value of any of the config property changes prior to saving that changed value.

Ext.define('Vehicle',{
          extend: 'Ext.Panel',
          config:{
                model:'Bentley',
                price:'2',
                color:'black',
           },
           applyModel:function(model){
                console.log("Model value is "+ model);
            }
 });

var vehicle  = Ext.create('Vehicle',{});
vehicle.setModel("Mercedes");

console.log(vehicle.getModel());

// console: Model value is Mercedes
// console: undefined

 

- In above code we are using applyModel() which will be called only when there is a change in model data.

- We are setting model value to “Mercedes”, applyModel method is called and logged “Model value is Mercedes”. In second console we are getting “undefined”, the reason is the value of model is not yet saved. Because applyModel gets called prior to saving the change in model value.

- To get the correct value we should return the model value in applyModel method, i.e. return model;

- apply is important when we want to have some sort of validation on value before saving it.

 

- Update:

Update function runs after the data has changed successfully.

Ext.define('Vehicle',{
        extend: 'Ext.Panel',
        config:{
             model:'Bentley',
             price:'2',
             color:'black',
         },
         applyModel:function(model){
             console.log("Model value is "+ model);
             return model;
         },
         updateModel:function(model){
             console.log("Updated Model value is "+ model);
         }
});

var vehicle  = Ext.create('Vehicle',{});
vehicle.setModel("Mercedes");

console.log(vehicle.getModel());

// console: Model value is Mercedes
// console: Updated Model value is Mercedes
// console: Mercedes

 

- In above example we have updateModel() function which will be called after model has changed successfully.

- If we do not return any value in applyModel, then updateModel will not get called because the value was not saved successfully.

- Another important point to note here is we have defined config only in define and not in create. Config is always defined in Ext.define and not in Ext.create.

 

- Inheritance:

As we saw in above example that Sencha touch supports inheritance, for example we created a class object called “vehicle” and called renderData on that object.

In this module we have covered pretty much about Sencha touch class system, as we move forward we will get to know more about how to leverage Sencha touch class system in our application.

 

Ext.Viewport

- Ext.Viewport is the major component of any application. By default it occupies the whole screen area. That means fullscreen property of viewport is set to true by default. Ext.Viewport internally uses card layout, you will learn more about layout in Sencha touch view module.

- To customize the viewport you can add viewport property in Ext.setup and change the properties accordingly.

- To add any view to viewport you can simply use Ext.Viewport.add();

- To remove any view from viewport you can use Ext.Viewport.remove(“componentName”); where componentName is the name of component you want to remove from viewport.

Ext.setup({
    onReady: function() {
        Ext.Viewport.add({
            xtype: 'panel',
            html: 'Hello World!!! Sencha touch.',
            style:{
                background:'red'
            }
        });
    }
});

 

- In above example we have added panel to viewport. Above code will occupy full screen area and will display “Hello World!!! Sencha touch.” with red background (though we have not defined fullscreen property anywhere).

- OnReady is the function which gets called when Sencha touch is ready.

 

This is pretty much we have to cover in this module. We will use all these concepts throughout the course and will discuss about each of them in detail.

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>