title: Trouble with TreeStore in ExtJS 4.0 MVC application
body: <p>The new release of ExtJS can make your chrome unstable (Or is it my code?)! Let me explain my situation.</p>
  
  <p>I am working on the new MVC architecture of ExtJS 4.0. I have a tree panel displaying my applications menu or navigation. As per the architecture, I tried to split my tree panel into controller, view and a separate store. </p>
  
  <p>Here is my view:</p>
  
  <pre><code> Ext.define('CRM.view.menu.View', {
      alias: 'widget.menutree',
      extend: 'Ext.tree.Panel',
  
      initComponent: function() {
  
          console.log('initComponent of View...');
  
          Ext.apply(this, {
              title: 'Simple Tree',                       
              width: 200,             
              store: 'MainMenu',
              rootVisible: false
          });
  
          this.callParent(arguments);
      }
  });
  </code></pre>
  
  <p>My tree's store:</p>
  
  <pre><code> Ext.define('CRM.store.MainMenu', {
      extend: 'Ext.data.TreeStore', 
  
      constructor: function() {
  
          console.log('Constructor of MainMenu TreeStore');
  
          config = Ext.apply(this,{
              proxy: {
                  type: 'ajax',
                  url: 'data/menu.json'
              },root: {
                  text: 'Menu',
                  id: 'src',
                  expanded: true
              }
          });
  
          this.callParent(arguments);
  
      }
  }); 
  </code></pre>
  
  <p>And in my controller I have provided my store info as well. Here is part of my controller config:</p>
  
  <pre><code>Ext.define('CRM.controller.MainMenu',{
      extend: 'Ext.app.Controller',
      stores: ['MainMenu'],   
      refs: [
          {ref:'menu',selector: 'menutree'},
          {ref:'cp',selector: 'centerpane'}
      ],
          .
          .
          .
  </code></pre>
  
  <p>On initial execution, I get the following error:</p>
  
  <blockquote>
    <p>Object MainMenu has no method
    'getRootNode'</p>
  </blockquote>
  
  <p>But now, I get more weird error:<img src="https://i.stack.imgur.com/LOSQK.png" alt="chrome just fails to display the app">
  Notice that chrome stops execution in the constructor of the tree store.</p>
  
  <p>At the same time, in firefox:<img src="https://i.stack.imgur.com/EJCCe.png" alt="firefox executes better">
  Firefox executes better, but there is no application rendered!</p>
  
  <p>After some trail and error.. I did find a way to get my application running.. and that is to avoid using my store and directly provide the store information as shown below:</p>
  
  <pre><code> Ext.define('CRM.view.menu.View', {
      alias: 'widget.menutree',
      extend: 'Ext.tree.Panel',
  
      initComponent: function() {
  
          console.log('initComponent of View...');
  
          Ext.apply(this, {
              title: 'Simple Tree',                       
              width: 200,             
              store: {
                  proxy: {
                      type: 'ajax',
                      url: 'data/menu.json'
                  },root: {
                      text: 'Menu',
                      id: 'src',
                      expanded: true
                  }
              },
              rootVisible: false
          });
  
          this.callParent(arguments);
      }
  });
  </code></pre>
  
  <p>Now the application executes with no issues at all! </p>
  
  <p>Did anybody try creating tree panel using MVC architecture? I have no clue into how to fix this!</p>