title: Sencha Touch 2 - my form does not display
body: <p>I am new to Sencha touch. I am trying to define a form (because I want to re-use it) but I cannot manage to display it on the screen.</p>
  
  <p>This is my form code:</p>
  
  <pre><code>Ext.define('WSCP.view.form.PersonForm' , {
      extend: 'Ext.form.Panel'
  
      , requires: [
          'WSCP.view.text.IdText'
          ,'WSCP.view.text.FirstNameText'
          ,'WSCP.view.text.LastNameText'
          ]
      ,xtype: 'personform'
  
      ,config: {
          items: [{
              xtype: 'fieldset'
              ,title: 'Who are You'
              ,instructions: 'enter your data'
              ,items: [
                  {
                      xtype: 'textfield',
                      name : 'firstName',
                      label: 'First Name'
                  }
                  ,{ xtype: 'idText' }
                  ,{ xtype: 'firstNameText' }
                  ,{ xtype: 'lastNameText' }
              ]
          }]
      }   
  
      ,initialize: function() {
          console.log('initialize form');
          this.callParent();
      }
  });
  </code></pre>
  
  <p>And this is the code from my view:</p>
  
  <pre><code>Ext.define('WSCP.view.HomeView' , {
      extend: 'Ext.Panel'
  
  
      ,xtype: 'homecard'
  
      , requires: [
          'WSCP.view.button.GetButton'
          ,'WSCP.view.button.GetOneButton'
          ,'WSCP.view.button.PutButton'
          ,'WSCP.view.button.PostButton'
          ,'WSCP.view.button.DeleteButton'
          ,'WSCP.view.form.PersonForm'
      ]
  
      ,config: {
          title: 'Home'
          ,iconCls: 'home'
  
          ,items: [
              {                
                  xtype: 'titlebar'
                  ,docked: 'top'
                  ,title: 'Home'
  
  
                  ,items: [
                      { xtype: 'getbutton' }
                      ,{ xtype: 'getOnebutton' }
                      ,{ xtype: 'putbutton' }
                      ,{ xtype: 'postbutton' }
                      ,{ xtype: 'deletebutton' }
                      ,{
                          text: 'Ping'
                          ,action: 'pingAction'
                          ,align: 'right'
                      }
                  ]
              }   
                  //WHY DOESN'T THIS WORK?
              ,{ xtype: 'personform' }
          ]
      }
  });
  </code></pre>
  
  <p>Many Thanks,
  Alex</p>