ॐ Digital-flame

0 Generate project. Open cmd and type

1 Go to project dir Open cmd and type

2. Start internal server, in cmd type

Ext JS allows us to define custom events in class using Ext.mixin.Observable mixin. Ext.mixin.Observable provides common interface for publishing events in Ext JS 5 & 6.

The following example demonstrates how you can publish an event using mixins whenever student name changes.

In the above example, we have included Ext.mixin.Observable mixin using mixins config so that we can use it. In the constructor, we call this.mixins.observable.constructor.call(this, config) which initialiazes the config. In the updateName() method, we fire custom event studentNameChanged using fireEvent() method with new value. We handle this event on newStudent instance where we register the handler using on() method.

Try it on https://fiddle.sencha.com/#fiddle/3l5

Every component in Ext JS includes number of events which we can handle it in ViewController or in the component itself. Learn about component event in the component section.

source

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.

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.

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.

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.

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

Inheritance

vertical way of using method of other class

base class

children class

Mixins

horizontal way to use methods of another class (not parent)