Ask about Mixins

[mirws]

Hi...
I have a question refer to this link http://docs.sencha.com/ext-js/4-0/api/Ext.Class

In the mixins example,

...

Ext.define('CoolPerson', {
	extend:'Person',
	
	mixins: {
		canPlayGuitar:'CanPlayGuitar',
		canSing:'CanSing'
	},
	
	sing: function(){
		alert("Ahem...");
		this.mixins.canSing.sing.call(this);
		this.playGuitar();
		
	}
});
...

What this line mean ?
" this.mixins.canSing.sing.call(this); "

Why we dont call sing() function directly like calling playGuitar(),

...

this.sing();
this.playGuitar();
...

why the code above not working? , but this is work

...
// this.sing();
this.playGuitar();
...

2nd question, when we should extend a class or mixins it, meanwhile both will add functionality to the class

[suplch]

...

Ext.define('CoolPerson', {
extend:'Person',

mixins: {
canPlayGuitar:'CanPlayGuitar',
canSing:'CanSing'
},

sing: function(){
alert("Ahem...");
this.mixins.canSing.sing.call(this);
this.playGuitar();

}
});


this.mixins.canSing.sing == this.sing //true
this.mixins.canPlayGuitar.playGuitar== this.playGuitar//true

[Jacky Nguyen]

Hi...
I have a question refer to this link http://docs.sencha.com/ext-js/4-0/api/Ext.Class

In the mixins example,

...

Ext.define('CoolPerson', {
	extend:'Person',
	
	mixins: {
		canPlayGuitar:'CanPlayGuitar',
		canSing:'CanSing'
	},
	
	sing: function(){
		alert("Ahem...");
		this.mixins.canSing.sing.call(this);
		this.playGuitar();
		
	}
});
...

What this line mean ?
" this.mixins.canSing.sing.call(this); "

Why we dont call sing() function directly like calling playGuitar(),

...

this.sing();
this.playGuitar();
...

why the code above not working? , but this is work

...
// this.sing();
this.playGuitar();
...

2nd question, when we should extend a class or mixins it, meanwhile both will add functionality to the class

1. Because CoolPerson class has its own sing method, which overrides the one from the mixin. this.mixins.canSing refers to the prototype of the mixin, so that you can invoke the overridden method.

2. Think of mixins as multiple inheritance whereby you can reuse code from multiple classes, as opposed to a single parent class.

[altanmur]

Ext.define('Developer', {        extend: 'User',
	constructor:function(){
		alert('Developer contructor');
	},
	initComponent:function(){
		alert('Developer initCom');
	},
    mixins: {
        madskills: 'MadSkills'
    }
})

Ext.define('User', {
	constructor:function(){
		alert('Developer contructor');
	},
	initComponent:function(){
		alert('Developer initCom');
	}
});

Ext.define('MadSkills', {
	contructor:function(){
		alert('MadSkills contructor');
	},
	initComponent:function(){
		alert('MadSkills initCom');
	},
    hackAway: function() {
        alert('I swear Abe   , it worked 20 minutes ago');
    }
});

Ext.require('Developer', function() {
                var dev = new Developer();
                dev.hackAway();
            });

Why not working all construtor and initComponent?