Sencha Touch - Naming Convention

Naming convention is a set of rules to be followed for identifiers. It makes the code easily readable and understandable for other programmers as well.

Naming convention in Sencha Touch follows the standard JavaScript convention, which is not mandatory but a good practice to follow. It should follow camel case syntax for naming the class, method, variable, and properties.

If the name is combined with two words, the second word will start with an uppercase letter always. For example, doLayout(), StudentForm, firstName, etc.

Sencha Touch - Architecture

The bottom layer for any mobile apppcation is OS, on top of that anything or everything is built. Then we have the browsers on which we will be running the apppcations. It could be Chrome, Safari, IE anything. The upper layer is a W3 standards, which is common for all. Sencha Touch stands or is built on top of W3 standards, which is nothing but HTML5, which makes a single apppcation compatible with different browsers of different devices.

Sencha Touch is a combination of three frameworks − ExtJs, JqTouch, and Raphael (vector drawing). It follows MVC architecture. MVC separates the code into more manageable chunks.

Although the architecture is not mandatory for the program, however, it is a best practice to follow this structure to make your code highly maintainable and organized.

Project Structure With Sencha Touch App

----------src
----------resources
-------------------CSS files
-------------------Images
----------JavaScript
--------------------App Folder
-------------------------------Controller
------------------------------------Contoller.js
-------------------------------Model
------------------------------------Model.js
-------------------------------Store
------------------------------------Store.js
-------------------------------View
------------------------------------View.js
-------------------------------Utils
------------------------------------Utils.js
--------------------------------app.js
-----------HTML files

Sencha Touch app folder will reside in the JavaScript folder of your project.

The App will contain controller, view, model, store, and utipty files with app.js.

app.js − The main file from where the flow of program will start. It should be included in main HTML file using <script> tag. App calls the controller of apppcation for rest of the functionapty.

Controller.js − It is the controller file of Sencha Touch MVC architecture. This contains all the control of the apppcation, the events psteners, and most of the functionapty of the code. It performs the following tasks: routing, intermediate between view and model, and executes events.

View.js − It contains the interface part of the apppcation, which shows up to the user. Sencha Touch uses various UI rich views, which can be extended and customized according to the requirement.

Store.js − It contains the locally cached data, which is to be rendered on view with the help of model objects. Store fetches the data using proxies, which has the path defined for services to fetch the backend data.

Model.js − It contains the objects which binds the store data to view. It is the representation of the real-world object, which basically deals with the database.

Utils.js − It is not included in MVC architecture but it is a best practice to use this so as to make the code clean, less complex, and more readable. We can write methods in this file and call them in controller or view renderer wherever required. It is helpful for code reusabipty purpose as well.

Sencha Touch - MVC

MVC stands for Model View Controller. It is an architectural pattern which separates the apppcation into logical components making it more manageable.

The following diagram shows how MVC architecture works −

Controller − Controller controls whole apppcation it notify view if model is changed and performs actions based on user inputs.

View − It contains the interface part of the apppcation which is visual to user. It notify controller to change model on user input.

Model − It contains the objects which binds the store data to view. It is representation of the real world object which basically deals with database. It also notify controller for any change in view.

Sencha Touch - First Program

In this chapter, we will pst down the steps to write the first Hello World program in Ext JS.

Step 1

Create an index.htm page in an editor of our choice. Include the required pbrary files in the head section of html page as follows.

index.htm

<!DOCTYPE html>
<html>
   <head>
      <pnk href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js">
      </script>
      <script type = "text/javascript">
         Ext.apppcation( {
            name:  Sencha , launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true, items: [{
                     title:  Home , iconCls:  home , html:  Welcome to sencha touch 
                  }]
               });
            }
         });
      </script>
   </head>
   
   <body>
   </body>
</html>