---

• Next »
• « Previous

Inheritance in Ext JS:

Ext JS supports object-oriented programming concepts such as class, inheritance, polimorphisham etc. We can inherit a new class from existing class using extend keyword while defining a new class in Ext JS.

For example, define a Person class with getName method as below.

Ext.define('Person', 
{
    name : 'Unknown',
 
    constructor : function(name){
        if(name){
            this.name = name;
        }
    },
 
    getName : function(){
        alert("My name is " + this.name);
    }
});

Now, define Student class with extend:'Person' in the config section as below.

Ext.define('Student', 
{
    extend : 'Person',
    schoolName : 'Unknown',
 
    constructor : function(name, schoolName){
        this.schoolName = schoolName || 'Unknown';
        
        //call parent class constructor
        this.callParent(arguments);
    },
 
    getSchoolName : function(){
        alert("My school name is " + this.schoolName);
    }
});

var newStudent = new Student('XYZ', 'ABC School');
newStudent.getName(); //output: XYZ
newStudent.getSchoolName(); //output: ABC School

As you can see above, Student class inherits Person class using extend keyword. So now, we can call getName() method on the Student object which in turn will call the getName() method of Person class.

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

Note: Most of the time you will have to extend Ext JS components in your application to use default functionality of the component and add custom functionality.

---

---

• Next »
• « Previous