PDA

View Full Version : Ask about Mixins



mirws
27 Apr 2011, 7:42 PM
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
27 Apr 2011, 7:59 PM
...

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
30 Apr 2011, 1:45 AM
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
30 Aug 2012, 10:53 AM
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?

njain
16 Oct 2013, 7:56 AM
Hi All,

I tried below code. I have corrected the code.
Ext.define('User', {
constructor:function(){
console.log('User constructor');
},
initComponent:function(){
console.log('User initCom');
},
showUser: function() {
console.log('showUser method called in User class');
}
});


Ext.define('MadSkills', {
constructor:function(){
console.log('MadSkills constructor');
},
initComponent:function(){
console.log('MadSkills initCom');
},
hackAway: function() {
console.log('hackAway method called in Madskills class');
}
});

Ext.define('Developer', {
extend: 'User',
constructor:function(){
console.log('Developer constructor');
},
initComponent:function(){
console.log('Developer initCom');
},
showDeveloper: function() {
console.log('showDeveloper method called in Developer class');
},
mixins: {
madskills: 'MadSkills'
},
hackAway: function() {
console.log('hackAway method called in Developer class');
// delegate calling mixin of parent method
this.mixins.madskills.hackAway.call(this);
}
});


Ext.application({
name: 'Mixin',
launch: function() {

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

Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
]
});
}
});