Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Understanding the Class System

Page of 168

Sencha Touch and Ext JS bring object oriented principles to Javascript via their class systems. Developing with a class system helps ensure that you use standard coding conventions and that the code that you develop uses OO best practices of encapsulation and inheritance.

Defining a Class

You can define a class in Sencha Touch by using the Ext.define() method. A typical class definition is illustrated below:

Ext.define('MyApp.view.MyView', {
  extend: 'Ext.Component',
  config: {
    firstName: 'Steve',
    lastName: 'Drucker'
  },
  initialize: function() {
     this.setHtml("Hero of the day: " + this.getFirstName() + " " + this.getLastName());
     this.callParent(arguments);
  }
});

Note the following:

  • In this example, a new "view" class named MyView is being defined that inherits all of the methods, config properties, runtime properties, and events of the framework's Ext.Component class (line 2). The setHtml() method used in line 8 was inherited from the Ext.Component class.
  • Class names should use camel-case and only contain alphanumeric characters. Do not use underscores, hyphens and any other non-alphanumerical characters. Package names (e.g. 'view') should be all lower case.
  • Custom class properties (firstName, lastName) are defined inside of a config object (line 3).
  • Properties defined inside a config were automatically assigned the "getter" and "setter" methods that were used in line 8.
  • As illustrated on line 7, you can override methods of the base class. In this example, a custom initialize() function in substituted for the initialize() method that is inherited from the Ext.Component class. The call to this.callParent(arguments) invokes the initialize method from the base class.
  • The name of the class maps to the physical file where that class is defined. In this example the class name "MyApp.view.MyView" indicates that the class was defined in the /app/view/MyView.js. You should only define one class per file.

Creating Instances of a Class

Create new instances of classes using the Ext.create() method as illustrated below:

var myClass = Ext.create('MyApp.view.MyView', {
  firstName: 'James',
  lastName: 'Kirk',
  margin: '5 5 5 5'
});

myClass.setFirstName('Christopher');
myClass.setLastName('Pike');

Note the following:

  • The config object passed as the second argument to Ext.create() can set values for custom properties defined on the class as well as inherited config properties from a base class.
  • The setter methods invoked on lines 7 and 8 were automatically generated by Sencha's class system.
  • Invoking the setter methods on lines 7 and 8 would not affect the visual output of the class.

Defining Custom Methods

You can define class-specific methods as illustrated by the getFullName() method below:

Ext.define('MyApp.view.MyView', {
 extend: 'Ext.Component',
 config: {
  firstName: 'Steve',
  lastName: 'Drucker'
 },
 getFullName: function() {
  return this.getFirstName() + " " + this.getLastName();
 },
 initialize: function() {
  this.setHtml("Hero of the day: " + this.getFullName());
  this.callParent(arguments);
 }
});

Defining Custom Setters

If you wish to add extra logic to your setters, you can do so by creating apply() and update() methods for any of the configs you have defined in your class.

  • Define an apply() method to intercept and validate a value prior to it being stored in the component property.
  • Define an update() method to trigger an action after the property has successfully been set.

You can programmatically throw an exception if a configuration property does not meet your validation criteria.

In the following example, custom apply() methods are used to validate that the firstName and lastName configs contain data. Custom update() methods ensure that the visual output of the component stays synchronized with the firstName and lastName config values.

Ext.define('MyApp.view.MyView', {
 extend: 'Ext.Component',
 config: {
  firstName: 'Steve',
  lastName: 'Drucker'
 },
 getFullName: function() {
  return this.getFirstName() + " " + this.getLastName();
 },
 refresh: function() {
  this.setHtml("Hero of the day: " + this.getFullName());
 },
 applyFirstName: function(firstName) {
   if (firstName == '') {
     throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] firstName must be defined');
   }
 },
 updateFirstName: function(firstName) {
   this.refresh();
 },
 applyLastName: function(lastName) {
   if (lastName == '') {
     throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] lastName must be defined');
   }
 },
 updateLastName: function(lastName) {
   this.refresh();
 }
 /* no longer needed
 initialize: function() {
  this.setHtml("Hero of the day: " + this.getFullName());
  this.callParent(arguments);
 }
 */
});
Page of 168
comments powered by Disqus