Sencha Touch - Class System

Sencha Touch is a JavaScript framework, which has functionalities of object-oriented programming. Sencha Touch class system is based on Ext JS 4 standards. Ext is the namespace which encapsulates all the classes in Sencha Touch.

Defining a Class in Sencha Touch

Ext provides more than 300 classes, which we can use for various functionalities.

Ext.define() is used for defining classes in Sencha Touch.

Syntax

Ext.define(class name, class members/properties, callback function);

Class name is the name of class according to the app structure. For example, appName.folderName.ClassName studentApp.view.StudentView.

Class properties/members defines the behavior of class.

Callback function is optional. It is called when the class has loaded properly.

Example of Sencha Touch class definition

Ext.define(studentApp.view.StudentDeatilsGrid, {
   name: 'StudentName,
   read: function(bookName){
      console.log(this.name +’is reading ’bookName);
   }
});

Creating Objects

As other OOPS based languages, we can create objects in Sencha Touch as well.

Way to create objects in Sencha Touch using new keyword −

var studentObject = new student();
studentObject.read(‘History’);

Console output will be StudentName is reading history.