EXTJS4 mixins, dynamic loading Examples

List of classes to mix into other classes.

For example:

// app.js file 

// if Musician don't have a sing method?

Example1:
Ext.define('Musician', {
     mixins: ['CanSing']
});


Ext.define('CanSing', {
          sing: function() {
              console.log("sing method called in CanSing class...");
          }
     });
     

//  TODO - to mix in two classes, both of which define sing?
     Ext.define('Musician', {
      constructor:function(){
       console.log('Musician constructor');
      },
      initComponent:function(){
       console.log('Musician initCom');
      },
      mixins: {
             canSing: 'CanSing'
         },
         sing: function() {
          console.log("sing method called in Musician class..");
             // delegate singing operation to mixin
             this.mixins.canSing.sing.call(this);
         }
     });



// Example2:
Ext.define('CanPlayGuitar', {
     playGuitar: function() {
      console.log("playGuitar method called in CanPlayGuitar class...");
         }
});
     
Ext.define('CoolPerson', {
 constructor:function(){
  console.log('CoolPerson constructor');
 },
 initComponent:function(){
  console.log('CoolPerson initCom');
 },
 mixins: {
  canPlayGuitar:'CanPlayGuitar',
  canSing:'CanSing'
 },
 sing: function(){
  console.log("sing from coolperson...");
  this.mixins.canSing.sing.call(this);
  // this.sing();  // got to infinte loop
  this.playGuitar();  // calling parent mixin method
  
 }
});


// Example3:
     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.create('Ext.container.Viewport', {
            //layout: 'fit',
            items: [{
              xtype: 'panel',
              id: 'paneloneId',
              height : 100,
                    title: 'Mixin Example',
                    html:  'Mixin Example'
                },
                {
                 xtype: 'panel',
                 id: 'paneltwoId',
                 height : 100,
                    title: 'Mixin Example',
                    html:  'Mixin Example'
                   }
                   ]
        });
        this.callMusic();
        this.callDeveloper();
    },
    
    callMusic: function(){
     Ext.getCmp('paneloneId').setTitle('Music');
     
     /*
     Ext.require('Musician', function() {
            var mus = new Musician();
            mus.initComponent();
            mus.sing();
        }); */
     
     Ext.require('CoolPerson', function() {
      var mus = new CoolPerson();
      mus.initComponent();
      mus.sing(); // calling own class method
      mus.playGuitar(); //calling mixin parent method
     });
    },
    callDeveloper: function(){
     Ext.getCmp('paneltwoId').setTitle('Dev');
     Ext.require('Developer', function() {
            var dev = new Developer();
            dev.initComponent();
            dev.showDeveloper();
            dev.showUser();
            dev.hackAway();
        });
     
    }
});

// html code

output:

CoolPerson constructor

CoolPerson initCom

sing from coolperson...

sing method called in CanSing class...

playGuitar method called in CanPlayGuitar class...

playGuitar method called in CanPlayGuitar class...

Developer constructor

Developer initCom

showDeveloper method called in Developer class

showUser method called in User class

hackAway method called in Developer class

hackAway method called in Madskills class

Example 4: Dynamic Loading

1. Loading a single file

//This is the simplest class, used in example 1. This class does not depend on any others, so the example is run immediately
//after it is loaded
Ext.define('Product', {
    config: {
        name: 'Product Name'
    }
});

Ext.require('Product', function() {
                var product = new Product();
                product.setName('Ext JS 4');
                
                alert("Product name: " + product.getName());
            });

2. Loading a file with dependencies

//By defining properties in the config declaration we get functions for getEmail, setEmail,etc

//See for sample usage
Ext.define('User', {
    config: {
        email: '',
        isSuper: false
    }
});

//This class extends User, so User.js will be loaded first
Ext.define('SuperUser', {
    extend: 'User',
    
    //SuperUsers are always super...
    constructor: function() {
        this.setIsSuper(true);
    }
});

//Call
Ext.require('SuperUser', function() {
                var superUser = new SuperUser();
                superUser.setEmail('tom@sencha.com');
                
                alert("Is a SuperUser: " + superUser.isSuper());
            });

3. Mixins
//This class mixes in the MadSkills mixin (see MadSkills.js), and is used in example 3
Ext.define('Developer', {
    extend: 'User',
    mixins: {
        madskills: 'MadSkills'
    }
});

//This is a mixin, which we add to the class in Developer.js (see example 3)
Ext.define('MadSkills', {
    hackAway: function() {
        alert('I swear Abe, it worked 20 minutes ago');
    }
});


The MadSkills mixin contains a function called hackAway, which will be added to Developer:
            Ext.require('Developer', function() {
                var dev = new Developer();
                dev.setEmail('jerry@sencha.com');
                dev.hackAway();
            });

Finally,
Ext.define('LeetSkills', {
    makeItBetter: function() {
        alert("I don't care - I'm going to revert your commits!");
    }
});

//This is a fictional supporting class used by the Architect class to revert changes to a repository
Ext.define('CommitReverter', {
    config: {
        url: ''
    },
    
    revertCommits: function(count) {
        alert('Reverted ' + count + (count == 1 ? ' change' : ' changes'));
    }
});


Our final class extends the Developer class we used above, mixing in the LeetSkills mixin as well as the earlier MadSkills mixin, and requires the CommitReverter class, which is used by the revertCommits function at the end of the example.
            Ext.require('Architect', function() {
                var ed = new Architect();
                
                //from the MadSkills mixin
                ed.hackAway();
                
                //from the LeetSkills mixin
                ed.makeItBetter();
                
                //from the RevertChanges requirement
                ed.revertCommits(2);
            });