---

• Next »
• « Previous

Mixins:

Mixins introduced since Ext JS 4. Mixins allows us to use functions of one class as a function of another class without inheritance.

Mixins can be defined using mixins keyword and specify value as a JSON object where name of a property should be name of the method which you want to use and the value of a property will be name of the class where the method is defined.

Consider the following example.

Ext.define('Person', {
    name: 'Unknown',

    constructor: function(name) {
        if (name) {
            this.name = name;
        }
    },

    getName: function() {
        alert("My name is " + this.name);
    },

    eat: function(foodType) {
        alert("I'm eating " + foodType);
    }

});

Ext.define('Student', {
    schoolName: '',

    constructor: function(schoolName) {
        this.schoolName = schoolName || 'Unknown'
    },

    mixins: {
        eat: 'Person'
    },

    getSchoolName: function() {
        alert("I am a student of " + this.schoolName);
    }

});

var studentObj = new Ext.create('Student', 'XYZ');
studentObj.eat('Sandwich');

In the above example, Student class defines mixins and specify 'eat' as a property name and 'Person' as a value where eat() method is defined. So now you can call studentObj.eat() method as if it is defined in the Student class.

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

---

---

• Next »
• « Previous