Наследование

В Ext JS 4 поддерживается наследование. То есть мы можем на основе существующих классов создать новые. Допустим у нас есть класс Person:

Ext.define('Classes.Person', {
	config: {
			name: 'Eugene',
			surname : 'Popov'
	},
    constructor: function(name, surname) {
        this.initConfig();
		if(name){
			this.setName(name);
		}
		if(surname){
			this.setSurname(surname);
		}
    },
    getinfo: function() {
		alert("Полное имя : " + this.name + " " + this.surname);
    },
});

Образуем от него класс Manager, это делается с помощью параметра extend:

Ext.define('Classes.Manager', {
	extend: 'Classes.Person',
	config: {
			department: 'sales'
	},
    constructor: function(name, surname, department) {
        this.initConfig();
		if(department){
			this.setDepartment(department);
		}
		// передаем параметры в конcтруктор родительского класса
		this.callParent([name, surname]);
    }
  });

Данный класс добавляет всего одно свойство - department (отдел менеджера).

Здесь в секции extend: 'Classes.Person' мы указываем, от какого класса наследуется текущий класс. А в конструкторе передаем параметры в конструктор родительского класса с помощью метода callParent (этот метод вызывает такой же метод базового класса, то есть в данном случае конструктор) : this.callParent([name, surname]);.

В итоге новый класс будет содержать как свои свойства и методы, так и родительские:

var eugene = Ext.create('Classes.Manager');
eugene.getinfo();
alert("Department : " + eugene.getDepartment());

var tom = Ext.create('Classes.Manager', 'Tom', 'James', 'Software');
tom.getinfo();
alert("Department : " + tom.getDepartment());
 

Переопределение методов базового класса

В предыдущем примере, чтобы вывести сообщение о департаменте менеджера, нам приходилось использовать дополнительный метод. Однако мы можем переопределить имеющийся метод getinfo и выводить всю информацию в нем:

Ext.define('Classes.Manager', {
	extend: 'Classes.Person',
	config: {
			department: 'sales'
	},
    constructor: function(name, surname, department) {
        this.initConfig();
		if(department){
			this.setDepartment(department);
		}
		// передаем параметры в конcтруктор родительского класса
		this.callParent([name, surname]);
    },
	// переопределяем метод базового класса
	getinfo: function() {
		this.callParent();
		alert("Департамент : " + this.department);
    }
  });
 var eugene = Ext.create('Classes.Manager');
eugene.getinfo();
// Этот метод нам уже не нужен
//alert("Department : " + eugene.getDepartment());
 

Вызов this.callParent(); вызывает метод getinfo базового класса.

Сущность наследования

Когда мы создаем обычные классы, как, например, выше класс Person, и не используем при этом параметр extend, создаваемый класс все равно неявно наследуется от базового для всех класса Ext.Base.

Использование секции extend приводит к тому, что при создании класса на этапе предобработки (этап Extend) к создаваемому классу присоединяется функционал класса-родителя. В итоге получается следующая цепочка наследования: