title: Sencha Touch List of a panel
body: <p>I have a app set up and on my hoe page/screen several links.  When I click on a link it will then display a list of items (like a contact list ), then again a detailed view when the list item is clicked on as well.</p>
  
  <p>I have the following set up:</p>
  
  <pre><code>  App.views.Viewport = Ext.extend(Ext.Panel, {
     fullscreen: true,
     layout: 'card',
     cardSwitchAnimation: 'slide',
     dockedItems: [
         {
          dock : 'top',
          xtype: 'toolbar',
          title: '&lt;img src="res/img/generic/TT_Small.png" /&gt;',
          cls: 'homeHeader'
         },
      ],
  
   });
  </code></pre>
  
  <p>and the view I want as a list is:</p>
  
  <pre><code>  App.views.HomeAbout = Ext.regModel('Contact', {
    fields: ['firstName', 'lastName']
    });
  
    var store = new Ext.data.JsonStore({
    model : 'Contact',
    root: 'images',
    sorters: 'firstName',
  
    getGroupString : function(record) {
    return record.get('firstName')[0];
    },
  
  
    data: [
    {firstName: 'Tommy', lastName: 'Maintz'},
    {firstName: 'Rob', lastName: 'Dougan'},
    {firstName: 'Ed', lastName: 'Spencer'},
    {firstName: 'Jamie', lastName: 'Avins'},
    {firstName: 'Aaron', lastName: 'Conran'},
    {firstName: 'Dave', lastName: 'Kaneda'},
    {firstName: 'Michael', lastName: 'Mullany'},
    {firstName: 'Abraham', lastName: 'Elias'},
    {firstName: 'Jay', lastName: 'Robinson'}
    ]
    });
  </code></pre>
  
  <p>var list = new Ext.List({
        fullscreen: true,
        itemTpl : '{firstName} {lastName}',
              grouped : true,
        indexBar: false,</p>
  
  <pre><code>  store: store
    });
  </code></pre>
  
  <p>I am using the simple 'contact' eg to start with so once running I will amend my data etc as needed, but when I click on the link to go to this view I get the following</p>
  
  <pre><code>  Uncaught Attempting to create a component with an xtype that has not been registered: HomeAbout
  </code></pre>
  
  <p>But in my controller i have :</p>
  
  <pre><code>  about: function()
  {
      if ( ! this.aboutView)
      {
          this.aboutView = this.render({
              xtype: 'HomeAbout',
          });
      }.....
  </code></pre>
  
  <p>Any ideas or help would be appreciated</p>