title: ExtJS 5: initConfig method & Observable mixin
body: <p>Since I don't seem to be getting any answers on the <a href="http://www.sencha.com/forum/showthread.php?298613-ExtJS-5-initConfig-method-amp-Observable-mixin" rel="nofollow">Sencha Forum</a>, I just repeat my question here:</p>
  
  <p>I'm currently migrating from 4.2.1 to 5.1.0.107 and am having problems understanding some stuff:</p>
  
  <p>Sencha dev <a href="http://www.sencha.com/forum/member.php?2950-evant" rel="nofollow">evant</a> states <a href="http://www.sencha.com/forum/showthread.php?286810-Automatic-initConfig%28%29-call-in-ext-js-5-doesnt-seem-to-work&amp;p=1048756&amp;viewfull=1#post1048756" rel="nofollow">here</a> that <code>initConfig</code> only needs to be called manually from the constructor in classes which don't use the Observable mixin.</p>
  
  <p>The first example of the Observable mixin in the <a href="http://docs.sencha.com/extjs/5.0.1/#!/api/Ext.mixin.Observable" rel="nofollow">docs</a> says otherwise by manually calling it.</p>
  
  <p>Running the code as is from the docs results in an exception (hasListeners is undefined) which can be resolved by placing <code>this.mixins.observable.constructor.call(this, config);</code> into the constructor.</p>
  
  <p>Also it seems to me that <code>initConfig</code> can be removed from the example code from the docs without any drawbacks (at least none that I was able to reproduce)...</p>
  
  <p>The only difference in the 2 codes below is in the Employee constructor...</p>
  
  <p><a href="https://fiddle.sencha.com/#fiddle/itl" rel="nofollow">Erroneous fiddle</a> (Code copied from docs)</p>
  
  <pre><code>Ext.define('Employee', {
      mixins: ['Ext.mixin.Observable'],
  
      config: {
          fullName: ''
      },
  
      constructor: function(config) {
          this.initConfig(config);  // We need to initialize the config options when the class is instantiated
      },
  
      quitJob: function() {
          this.fireEvent('quit');
      }
  });
  
  var newEmployee = Ext.create('Employee', {
      fullName: 'Ed Spencer',
  
      listeners: {
          quit: function() {
              alert(this.getFullName() + " has quit!");
          }
      }
  });
  
  try {
      newEmployee.quitJob(); // Throws exception since hasListener is undefined
  } catch (exc) {
      alert('Error occurred: ' + exc.message);
  }
  </code></pre>
  
  <p><a href="https://fiddle.sencha.com/#fiddle/itm" rel="nofollow">Working fiddle</a> (removed initConfig &amp; initialize mixin correctly)</p>
  
  <pre><code>Ext.define('Employee', {
      mixins: ['Ext.mixin.Observable'],
  
      config: {
          fullName: ''
      },
  
      constructor: function(config) {
          // Make code work by removing call to initConfig and initializing the observable mixin
          //this.initConfig(config);  // We need to initialize the config options when the class is instantiated
          this.mixins.observable.constructor.call(this, config);
      },
  
      quitJob: function() {
          this.fireEvent('quit');
      }
  });
  
  var newEmployee = Ext.create('Employee', {        
      fullName: 'Ed Spencer',
  
      listeners: {
          quit: function() {
              alert(this.getFullName() + " has quit!");
          }
      }
  });
  
  try {
      newEmployee.quitJob(); // Will log 'Ed Spencer has quit!'
  } catch (exc) {
      alert('Error occurred: ' + exc.message);
  }
  </code></pre>
  
  <p>I'd be really happy if anyone could answer the following questions:</p>
  
  <ul>
  <li>Do we need to call <code>initConfig</code> in the constructor manually when using the Observable mixin</li>
  <li>Do we need to call the mixin constructor manually?</li>
  <li>What is the difference in using <code>Ext.mixin.Observable</code> and <code>Ext.util.Observable</code></li>
  </ul>
  
  <p>Thanks &amp; best regards</p>