Ext JS has a feature called config. The config allows you to declare public properties with default values which will be completely encapsulated from other class members. Properties which are declared via config, will have get() and set() method automatically if class does not have these methods already defined.
The config properties can be defined using config keyword with JSON object as a value where you can define properties. Consider the following example.
|
1 2 3 4 5 6 7 8 9 10 |
Ext.define('Student', { config : { name : 'unnamed', schoolName : 'Unknown' }, constructor : function(config){ this.initConfig(config); } }); |
In the above example, Student class includes two config properties: name and schoolName with the default value ‘unknown’. In the constructor, we call this.initConfig(config). This will create get and set methods for all the config properties. We must call this.initConfig(config) in the constructor in order to initialize getters and setters. The get method returns a value of a config property and set method is used to assign a new value to a config property.
The name of the get method will start from get and suffix with property name like get<config property name>() and the same way set method will be named as set<config property name>(). The suffix in get and set method names will start from capital character. So, get and set method names for the above name and schoolName config properties will be getName(), setName(), getSchoolName() and setSchoolName().
The following example demonstrates accessing get and set method of the above Student class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
Ext.define('Student', { config : { name : 'unnamed', schoolName : 'Unknown' }, constructor : function(config){ this.initConfig(config); } }); var newStudent = Ext.create('Student', { name: 'XYZ', schoolName: 'ABC School' }); newStudent.getName();//output: XYZ newStudent.getSchoolName();//output: ABC School newStudent.setName('John'); newStudent.setSchoolName('New School'); newStudent.getName();//output: John newStudent.getSchoolName();//output: New School |
Try it on https://fiddle.sencha.com/#fiddle/3l2
As you can see in the above example, we have not defined getName(), setName() and getSchoolName(), setSchoolName() methods in Student object. It was automatically created for config properties by Ext JS API.
Please note that you cannot assign config property value directly same as normal class property. You must use set method to assign a value to config property. For example, the following is NOT valid. It does not assign a value to name property instead it creates another property name on the instance.
|
1 2 |
newStudent.name = 'Steve'; //Not valid. newStudent.setName('Steve');//Valid |
Custom Setters:
You have seen get and set methods are created for config property automatically. But, how to add extra logic before or after we assign a value to config property because get and set methods are managed internally. The answer is custom setters. Custom setters allow you to add extra logic to your setters. There are two custom setters: apply and update.
The apply() method for config property allows us to add some extra logic before it assigns the value to config property. The name of apply method must start with apply with config property name as suffix in CamelCase.
The update() method executes after the configuration property value has been assigned. The name of update method must start with update with config property name as suffix in CamelCase. It has two parameters, newValue and oldValue. If you include apply and update method for a particular property then first apply will get called and then update method will get called.
Consider the following example.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
Ext.define('Student',{ config : { name : 'unnamed', schoolName : 'Unknown' }, constructor : function(config){ this.initConfig(config); }, applyName : function(name){ return Ext.String.capitalize(name); }, updateName : function(newValue, oldValue){ alert('New value: ' + newValue + ', Old value: ' + oldValue); } }); var newStudent = Ext.create('Student', {name : 'xyz', schoolName : 'ABC School'}); newStudent.setName('john'); |
In the above example, we have defined applyName() method for the name config property which will capitalize the value of name property. The applyName() method will be called whenever you set the value of name config using setName() method. Thus, you can make sure that the value of name will always be capital even if user set it in small letters.
The updateName() method in the above example executes after assigning config property value and that’s why it includes two parameters. First parameter is for new value and second parameter is for old value.
Try it on https://fiddle.sencha.com/#fiddle/1icd