Results 1 to 5 of 5

Thread: Ask about Mixins

  1. #1
    Sencha User
    Join Date
    Dec 2007
    Posts
    10
    Vote Rating
    0
      0  

    Question Answered: Ask about Mixins

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

    In the mixins example,

    Code:
    ...
    
    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(),

    Code:
    ...
    
    this.sing();
    this.playGuitar();
    ...
    why the code above not working? , but this is work

    Code:
    ...
    // this.sing();
    this.playGuitar();
    ...
    2nd question, when we should extend a class or mixins it, meanwhile both will add functionality to the class

  2. Quote Originally Posted by mirws View Post
    Hi...
    I have a question refer to this link http://docs.sencha.com/ext-js/4-0/api/Ext.Class

    In the mixins example,

    Code:
    ...
    
    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(),

    Code:
    ...
    
    this.sing();
    this.playGuitar();
    ...
    why the code above not working? , but this is work

    Code:
    ...
    // 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.

  3. #2
    Sencha User
    Join Date
    Nov 2010
    Posts
    1
    Vote Rating
    0
      0  

    Default

    ...

    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

  4. #3
    Sencha User Jacky Nguyen's Avatar
    Join Date
    Jul 2009
    Location
    Palo Alto, California
    Posts
    469
    Answers
    24
    Vote Rating
    18
      0  

    Default

    Quote Originally Posted by mirws View Post
    Hi...
    I have a question refer to this link http://docs.sencha.com/ext-js/4-0/api/Ext.Class

    In the mixins example,

    Code:
    ...
    
    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(),

    Code:
    ...
    
    this.sing();
    this.playGuitar();
    ...
    why the code above not working? , but this is work

    Code:
    ...
    // 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.
    Sencha Touch Lead Architect

  5. #4
    Sencha User
    Join Date
    Jun 2012
    Posts
    18
    Vote Rating
    0
      0  

    Default I have question.

    Code:
    Ext.define('Developer', {        extend: 'User',
    	constructor:function(){
    		alert('Developer contructor');
    	},
    	initComponent:function(){
    		alert('Developer initCom');
    	},
        mixins: {
            madskills: 'MadSkills'
        }
    })
    Code:
    Ext.define('User', {
    	constructor:function(){
    		alert('Developer contructor');
    	},
    	initComponent:function(){
    		alert('Developer initCom');
    	}
    });
    Code:
    Ext.define('MadSkills', {
    	contructor:function(){
    		alert('MadSkills contructor');
    	},
    	initComponent:function(){
    		alert('MadSkills initCom');
    	},
        hackAway: function() {
            alert('I swear Abe   , it worked 20 minutes ago');
        }
    });
    Code:
    Ext.require('Developer', function() {
                    var dev = new Developer();
                    dev.hackAway();
                });
    Why not working all construtor and initComponent?

  6. #5
    Touch Premium Member
    Join Date
    Jul 2011
    Posts
    1
    Vote Rating
    0
      0  

    Default

    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: [
    ]
    });
    }
    });

Similar Threads

  1. Static mixins?
    By winkelmann in forum Ext: Discussion
    Replies: 6
    Last Post: 20 Apr 2011, 2:45 PM
  2. [OPEN-EXTJSIV-207] Mixins issues
    By LesJ in forum Ext:Bugs
    Replies: 3
    Last Post: 21 Mar 2011, 12:58 PM
  3. [INFOREQ]allow singleton as mixins
    By christophe.geiser in forum Ext:Bugs
    Replies: 4
    Last Post: 14 Mar 2011, 6:36 AM
  4. [CLOSED]Ext.AbstractComponent mixins
    By gevik in forum Ext:Bugs
    Replies: 5
    Last Post: 28 Feb 2011, 9:56 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •