title: Sencha Touch2 - Panels with Card layout not working
body: <p>I have tabpanel, which contains a few tabs. I will be concentrating on the 6th tab here - navigatingPanels.js file. In this file, I have a card layout, so that the user can fill form1 &amp; move to form2 on submission (slide to form2). I also have a docked toolbar, with a back button, so that the user can move back to form1 (if needed). It gives an error - </p>
  
  <pre><code>Uncaught Error: [ERROR][Ext.Base#callParent] Invalid item given: undefined, must be either the config object to factory a new item, or an existing component instance.
  </code></pre>
  
  <p>The app can be seen here - <a href="http://maalguru.in/touch/Raxa-70/MyApp/" rel="nofollow noreferrer">http://maalguru.in/touch/Raxa-70/MyApp/</a></p>
  
  <p>Update - If I add one extra card to the concerned panel, &amp; remove the form1 &amp; form2 (required panels/cards), then it works fine. In this case I have to setActiveItem to the desired cards (form1 &amp; form2). Changed Viewport - <a href="http://pastebin.com/P4k04dBQ" rel="nofollow noreferrer">http://pastebin.com/P4k04dBQ</a>
  Is there any solution to achieve with only 2 panels/cards ?</p>
  
  <p><strong>Viewport.js</strong></p>
  
  <pre><code>Ext.define('MyApp.view.Viewport', {
      extend: 'Ext.TabPanel',
      xtype: 'my-viewport',
  
      config: {
          fullscreen: true,
          tabBarPosition: 'bottom',
  
          items: [{
              xclass: 'MyApp.view.navigatingPanels'
          }]
      }
  });
  </code></pre>
  
  <p><strong>NavigatingPanels.js</strong></p>
  
  <pre><code>Ext.define('MyApp.view.navigatingPanels', {
      extend: 'Ext.Panel',
      id: 'navigatingPanels',
      xtype: 'navigatingPanels',
      config: {
          iconCls: 'user',
          title: 'Navigating Panels',
          layout: 'card',
          animation: {
              type: 'slide',
              direction: 'left'
          },
          defaults: {
              styleHtmlContent: 'true'
          },
          items: [{
                  docked: 'top',
                  xtype: 'toolbar',
                  title: 'Registeration Form',
                  items: [{
                      text: 'Back',
                      ui: 'back',
                      align: 'centre',
                      //back button to take the user back from form2 to form1
                      handler: function() {
                          Ext.getCmp('navigatingPanels').setActiveItem(form1);
  
                      }
                  }]
              },
              form1,
              form2
          ]
      }
  
  });
  
  
  var form1 = new Ext.Panel({
      scrollable: 'vertical',
      items: [{
          xtype: 'fieldset',
          title: 'Form 1',
          items: [{
                  xtype: 'textfield',
                  label: 'Name',
                  name: 'name',
              },
              {
                  xtype: 'button',
                  text: 'Save Data &amp; move to form2',
                  ui: 'confirm',
                  //TODO add some action: to store data
                  //save data &amp; move to form2
                  handler: function() {
                      Ext.getCmp('navigatingPanels').setActiveItem(form2, {
                          type: 'slide',
                          direction: 'right'
                      });
                      console.log("Form1");
                  }
              }
          ]
      }]
  });
  var form2 = new Ext.Panel({
      scrollable: 'vertical',
      items: [{
          xtype: 'fieldset',
          title: 'Form 2',
          items: [{
                  xtype: 'textareafield',
                  label: 'Message',
                  name: 'message'
              },
              {
                  xtype: 'button',
                  text: 'Submit Data',
                  ui: 'confirm',
                  //TODO add some action: to store data
                  //action: 'Submit Data'
              }
          ]
      }]
  });
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>Ext.Loader.setConfig({
      enabled: true
  });
  Ext.application({
      name: 'MyApp',
  
      controllers: ['Main'],
  
      launch: function() {
          Ext.create('MyApp.view.Viewport', {
              fullscreen: true
          });
  
      }
  });
  </code></pre>