title: Issue while changing viewport in sencha
body: <p>i am a very beginner to Sencha touch frame work. I am trying work with the viewport, but i am stuck with a strange problem. it throws "Uncaught TypeError: Cannot read property 'isComponent' of undefined exception. I know this question might be little unusual but i need to resolve this somehow. </p>
  
  <p>I have a java script file where i have login screen. </p>
  
  <pre><code>var App = new Ext.Application({
      name: 'MyApp',
      useLoadMask: true,
      launch: function () {        
  
       MyApp.views.loginPanel = new Ext.form.FormPanel({
              scroll: 'vertical',           
              standardSubmit : false,
              items: [
                  {
                      xtype: 'fieldset',                  
                      instructions: 'Please enter the information above.',
                      defaults: {
                          required: true,
                          labelAlign: 'left',
                          labelWidth: '50%',
                          labelHeight: '50%'
                      },
                      items: [
                      {
                          xtype: 'textfield',
                          name : 'username',
                          id: 'username',
                          label: 'user Name',
                          useClearIcon: true,
                          autoCapitalize : false
                      }, {
                          xtype: 'passwordfield',
                          name : 'password',
                          id: 'password', 
                          label: 'Password',
                          useClearIcon: false
                        } 
                     ]
                  }
              ],
              dockedItems: [{             
                  xtype: 'toolbar',
                  dock: 'top',
                  title: 'Login Screen'               
                  },
                  {
                      xtype: 'toolbar',
                      dock: 'bottom',
                      items: [{
                              text: 'Exit',
                              ui: 'confirm',
                              handler: function() {
                                  form.exit();
                              }
                          },                       
                          {xtype: 'spacer'},
                          {
                              text: 'Reset',
                              handler: function() {
                                  form.reset();
                              }
                          },                       
                          {
                                  text: 'Login',
                                  ui: 'action',
                                  handler: function() {
                                      //TODO: handle the event
                                      MyApp.views.viewport.setActiveItem('nextScreen', { type: 'slide', direction: 'right' });
                                  }                                                                           
                          }                     
                      ]
                  }
              ]
          });
  
  
          MyApp.views.viewport = new Ext.Panel({
              fullscreen: true,
              layout: 'card',
              cardAnimation: 'slide',
              items: [MyApp.views.loginPanel, MyApp.views.nextScreen]
          })
      }
  });
  </code></pre>
  
  <p>Now i have the nextScreen.js file. I am loading the JS file in my login.html.</p>
  
  <p>My nextScreen.js looks like this: </p>
  
  <pre><code>    var opt = [
          {text: 'Alabama',  value: 'AL'},
          {text: 'Alaska', value: 'ALS'},
          {text: 'Indiana',  value: 'IN'}
      ];
  
  
  var stateList = new Ext.form.Select({
      label : 'State',
      width: '100%',
      name: 'selectField',
      layout:'auto',
      options: opt,
      autoLoad : true,
      autoDestroy : true
  });
  
  
  MyApp.views.nextScreen =  new Ext.Panel({
              fullscreen: true,
              id:'nextScreen',
              layout: 'fit',
              style: 'background-color:white',
              scroll:'vertical',          
              html:'sample screen',   
              items: [stateList]      
      }); 
  Ext.reg('nextScreen', MyApp.views.nextScreen);
  </code></pre>