When you first start using the Sencha Touch framework you will hear about config blocks and the automatically generated getters and setters for the properties you define in them. But what does that really mean?

To review: properties you define inside a config block get framework generated getters and setters. Outside the block they are just plain javascript.

Ext.define('App.view.About', {
   extend: 'Ext.Container',
   xtype: 'aboutus',

   requires: [

   myPlainProperty: null,

   config: {

      myConfigProperty: null,

      items: [
             html: 'Hello World'


If your background is object oriented (OO) development then it has been ingrained into you that accessing properties directly breaks encapsulation so you will probably default to defining your custom class properties inside the config block so you can take advantage of the generated getter and setter. For example: var foo = this.getMyConfigProperty(); and this.setMyConfigProperty("foo");

OK, now the first time you need some “logic” in a property you might resort to pulling it out of the config block and write your own getter and setter functions backed with a class instance variable like myPlainProperty above.

But as you continue to work with the framework and dive into the source code (as you inevitably will either to learn or stepping into it during debugging) you will continually see applyPropertyName and updatePropertyName methods in the Sencha code.

And these are the answer to avoiding the above hand written functions, the Sencha Class system supports two functions matching the name of your property that gives you hooks to add logic into the process.
Here are the method signatures:

  • appliedValue = applyMyConfigProperty(newValue, oldValue)
  • updateMyConfigProperty(appliedValue, oldValue)

So there you have it, put your code that does validation or filtering in the apply and take actions that depend on this property in the update!

This methodology is powerful and is used extensively in the Sencha framework so you have a wealth of code to see it in use.

For more information see the docs:
v2.2.1 Class System
and slide 32, 33 from this presentation:
Sencha Class System, Jacky Nguyen