title: ExtJS TreeGrid + MVC - not loading
body: <p>I've taken the MVC introduction (<a href="http://dev.sencha.com/deploy/ext-4.0.7-gpl/docs/index.html#!/guide/application_architecture" rel="nofollow noreferrer">http://dev.sencha.com/deploy/ext-4.0.7-gpl/docs/index.html#!/guide/application_architecture</a>) and tried to modify it to load up a treegrid instead, with help from the example here (<a href="http://dev.sencha.com/deploy/ext-4.0.0/examples/tree/treegrid.html" rel="nofollow noreferrer">http://dev.sencha.com/deploy/ext-4.0.0/examples/tree/treegrid.html</a>).</p>
  
  <p>I don't know why, but it doesn't seem to load at all. It never reaches the launch function in Ext.application, I'm assuming it has something to do with the controller not being configured properly, but Firebug isn't showing any errors on the console, so I'm a bit lost. </p>
  
  <p>For what it's worth, I've copied and loaded the TreeGrid example myself and it works, so it's not a ExtJS bug/server config problem, like I thought it would be from this thread:  <a href="https://stackoverflow.com/questions/9058921/configuration-required-to-get-sencha-extjs-treegrid-example-working">Configuration required to get Sencha ExtJS TreeGrid example working</a></p>
  
  <p>My code:
  main.js</p>
  
  <pre><code>Ext.Loader.setConfig({ enabled: true });
  
  Ext.require([
      'Ext.data.*',
      'Ext.grid.*',
      'Ext.tree.*'
  ]);
  
  Ext.application({
      name: 'pr',
  
      appFolder: '', //This is considered root so no name needs to be supplied.
  
      controllers: [
          'Control-Product' //filename
      ],
  
      launch: function () {
          console.log('The app was launched');
          Ext.create('Ext.container.Viewport', {
              layout: 'fit',
              items: [{
                  xtype: 'treegrid'
              }]
          });
      }
  });
  </code></pre>
  
  <p>Control-Product.js</p>
  
  <pre><code>Ext.define('pr.controller.Product', {
      extend: 'Ext.app.Controller',
      views: ['user.TreeGrid'],
      stores: ['Store-Products'],
      models: ['Model-Product'],
  
      init: function () {
          console.log('The controller was instantiated');
          this.control({
              'viewport &gt; panel': {
                  render: this.onPanelRendered
              }
          });
      },
      onPanelRendered: function () {
          console.log('The panel was rendered');
      }    
  });
  </code></pre>
  
  <p>TreeGrid.js</p>
  
  <pre><code>Ext.define('pr.view.user.TreeGrid', {
      extend: 'Ext.tree.Panel',
      alias: 'widget.treegrid',
  
      initComponent: function () {
          this.title = 'Products',
          this.store = 'pr.store.Products',
          this.collapsible = true,
          this.useArrows = true,
          this.rootVisible = false,
          this.multiSelect = true,
          this.singleExpand = false,
          //this.renderTo = Ext.getBody(),
          this.columns = [{
              xtype: 'treecolumn', 
              text: 'ID',
              flex: 1,
              dataIndex: 'ID',
              sortable: true
          },
          {
              text: 'Price',
              flex: 1,
              dataIndex: 'Price',
              sortable: true
          },
          {
              text: 'Company',
              flex: 1,
              dataIndex: 'Company',
              sortable: true
          }];
  
          this.callParent(arguments);
      }
  });
  </code></pre>
  
  <p>Model-Product.js</p>
  
  <pre><code>Ext.define('pr.model.Product', {
      extend: 'Ext.data.Model',
      fields: [
              { name: 'ID', type: 'string' },
              { name: 'Price', type: 'string' },
              { name: 'Company', type: 'string' }
          ]
  });
  </code></pre>
  
  <p>Store-Products.js</p>
  
  <pre><code>Ext.define('pr.store.Products', { 
      extend: 'Ext.data.TreeStore',
      model: 'pr.model.Product',
      proxy: {
          type: 'ajax',
          //get data from json file for now
          url: '/data/products.json'
      },
      folderSort: true
  });
  </code></pre>
  
  <p>products.json</p>
  
  <pre><code>{"text":".","children": [
      {
          ID:'1111',
          Price:'11.11',
          Company:'Company1',        
          expanded: true,
          children:[{
              ID:'',
              Price:'44.44',
              Company:'Company2', 
              leaf:true
              }]        
      },{
          ID:'2222',
          Price:'22.22',
          Company:'Company1',        
          expanded: true,
          children:[{
              ID:'',
              Price:'33.33',
              Company:'Company3', 
              leaf:true
              }] 
      }
  ]}
  </code></pre>