title: Sencha Touch 2 - undefined getValues() when form values are retrieved from the controller
body: <p>I am trying to create a form embedded inside a Panel and trying to retrieve the contents of the form fields from within the controller. </p>
  
  <p>Below is my view and controller code. </p>
  
  <pre class="lang-js prettyprint-override"><code>Ext.define('MyApp.view.SignIn', {
              extend: 'Ext.Container',
              requires: ['Ext.Button','Ext.form.Panel'],
              xtype: 'loginPage',
  
              config : {
                  fullscreen: true,
  
                  items: [
                  {
                      docked: 'top',
                      xtype: 'titlebar',
                      html:'&lt;img src="resources/icons/logo.png" /&gt;',
                      items: {
                                      iconMask: true,
                                      align: 'left',
                                      text: 'Sign In',
  
  
                                      handler: function(){
  
                                      var panel = Ext.create('Ext.Panel', {
                                               left: 0,
                                               padding: 10,                                   
                                               xtype: 'loginPage',
                                               url: 'contact.php',
                                               layout: 'vbox',
                                               id: 'signinform',
  
                                               items: [
                                                   {   
                                                              xtype: 'fieldset',
                                                              title : 'Enter Login Information:',
                                                              instructions: 'All fields are required',
                                                              layout: {
                                                                      type: 'vbox'
                                                              },                                              
                                                              items: [
                                                                  {
                                                                      xtype: 'emailfield',
                                                                      name: 'Email',
                                                                      label: 'Email',
                                                                      placeHolder: 'Valid email'
                                                                  },
                                                                  {
                                                                      xtype: 'passwordfield',
                                                                      name: 'Password',
                                                                      label: 'Password',
                                                                      placeHolder: '6 characters'
                                                                  }]
                                                    },
                                                    {                                            
                                                              layout: 'hbox',
                                                              items: [
                                                                   {
                                                                      xtype: 'button',
                                                                      text: 'Login',
                                                                      ui:'confirm',
                                                                      id:'Login-btn',
                                                                      width: '100px',
                                                                      flex: 1
  
                                                                    }, {
                                                                      width: '100px'
                                                                    }, {
                                                                      xtype: 'button',
                                                                      text: 'Register',
                                                                      ui: 'decline',
                                                                      width: '100px',
                                                                      flex: 1,
                                                                      handler: function(){                                                                
                                                                          this.getParent().getParent().destroy();                                                                                                                         
                                                                      }
                                                                }]//Buttons array
  
                                                     }//Form completion
  
                                              ]
  
                                          }).showBy(this); //Panel created
  
  
                                      }//Function complete                            
                      }
                  },
                  {
                      layout: {
                                  type: 'vbox',
                                  pack:'center',
                                  align: 'center'
                      },
                      items:[{
                              html:'&lt;h2&gt;My tool&lt;/h2&gt;&lt;h3 style="color:#F47621"&gt;Simple, intuitive and powerful data management tool.&lt;/h3&gt;',
                              styleHtmlContent: true,
                      }
                      ]
                  },
      ]
          },
           initialize: function() {
              this.callParent(arguments);
          },  
      });
  </code></pre>
  
  <p>And here is my controller code. I just checked the controller code it seemed to be fine with a simpler form view. So I guess the issue is with the view.</p>
  
  <pre class="lang-js prettyprint-override"><code>Ext.define("MyApp.controller.SignIn", {
      extend : 'Ext.app.Controller',
  
      config : {
          refs    : {
              home      : '#homePage',
              login     : '#loginPage',
              SignIn : '#signinform'
          },
  
          control : {
              '#Login-btn': {
                  tap : 'onLoginButtonTap'
              }
          }
      },
  
      onLoginButtonTap: function() {
          var formValues = this.getSignIn().getValues();
          console.log(formValues.username);
          console.log(formValues.password);
      }
  });
          ]
      },
       initialize: function() {
          this.callParent(arguments);
      },  
  });
  
  What is wrong with the form creation in the View page. Why is the form coming as undefined. Experts please help
  </code></pre>