title: ExtJs 4.0 MVC Tutorial gives
body: <p>I am new to ExtJs and I am trying to follow this tutorial:</p>
  
  <p><a href="http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture" rel="nofollow">http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture</a></p>
  
  <p>However, when I get to the part where the grid is actually suppose to become visible, I get an error in the Javascript console that says: "Type error: name is undefined".</p>
  
  <p>I have the following files,</p>
  
  <p>app.js:</p>
  
  <pre><code>Ext.application({
      name: 'AM',
  
      appFolder: 'app',
      controllers: ['Users'],
  
      launch: function() {
          Ext.create('Ext.container.Viewport', {
              layout: 'fit',
              items: {
                  xtype: 'userList'
              }
          });
      }
  });
  </code></pre>
  
  <p>app/controller/Users.js</p>
  
  <pre><code>Ext.define('AM.controller.Users', {
      extend: 'Ext.app.Controller',
      views: [
          'user.List'],
  
      init: function() {
          this.control({
              'viewport &gt; panel': {
                  render: this.onPanelRendered
              }
          });
      },
  
      onPanelRendered: function() {
          console.log('This panel was rendered');
      }
  });
  </code></pre>
  
  <p>app/view/user/List.js</p>
  
  <pre><code>Ext.define('AM.view.user.List' ,{
      extend: 'Ext.grid.Panel',
      alias : 'widget.userlist',
  
      title : 'All Users',
  
      initComponent: function() {
          this.store = {
              fields: ['name', 'email'],
              data  : [
                  {name: 'Ed',    email: 'ed@sencha.com'},
                  {name: 'Tommy', email: 'tommy@sencha.com'}
              ]
          };
  
          this.columns = [
              {header: 'Name',  dataIndex: 'name',  flex: 1},
              {header: 'Email', dataIndex: 'email', flex: 1}
          ];
  
          this.callParent(arguments);
      }
  });
  </code></pre>
  
  <p>and of course Index.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Hello Ext&lt;/title&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="ExtJs/ext-4.1.1a/resources/css/ext-all.css"&gt;
      &lt;script type="text/javascript" src="ExtJs/ext-4.1.1a/ext-debug.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks</p>