Hands-On Sencha Touch 2

Chapter 4. The Class System

In the previous chapter, you learned how to instantiate components from existing component classes and reference them. Within Sencha Touch you can also define your own custom component classes by extending from Sencha Touch base classes. The next examples will show you how to instantiate a component and how to define your own classes.

In this chapter, you’ll learn:

• How to define your own custom class
• How to define getters and setters
• How to define singletons and static members
• How inheritance works (extending)
• How multiple inheritance works (mixins)

Note

You can test the examples in this chapter from my GitHub repo or you can open a Sencha Fiddle and try it out yourself. (When using the Sencha Fiddle, make sure you choose the Sencha 2.3.x framework.)

Defining Your Own Custom Class

Now that you know how to instantiate a class definition for view components, let’s discuss how the Sencha class system works and how to define your own blueprints to define a class.

Let’s make a blueprint containing a variable, myVar, and a method, myMethod. Using Ext.define():

Ext.define('AppName.packagename.ClassName', {
    //class configuration object
    myVar: 1,
    myMethod: function(name){
       //console.log("Log: " + name);
    }
},function(){
    //optional callback
});

In the code example from Chapter 3, I instantiated a few components: a simple Hello World component and an XTemplate component. It’s important to know that components in the Sencha framework are, in fact, classes.

Officially, ...