title: Sencha Touch 2 panel not stretching to full height
body: <p>I have made this application in sencha touch 2<br></p>
  
  <pre><code>Ext.application({
      name: "SOMENAME",
      launch: function () {
          //Ext.Viewport.setLayout({type:'fit',align:'stretch'});
          var mainPanel = Ext.create('Ext.Container', {
              layout: 'vbox',
              items: [
                  {
                      xtype: 'panel',
                      layout: {
                          type: 'card',
                          animation: 'slide'
                      },
                      height: 300,
                      id: 'nooPanel',
                      items: [
                          {
                              html: 'Page 1'
                          },
                          {
                              html: 'Page 2 asdasdasd'
                          },
                          {
                              html: 'Page 3 asdq323434'
                          }
                      ]
                  },
                  {
                      xtype: 'button',
                      text: 'Next',
                      handler: function (button, e, eOpts) {
                          var panel = Ext.getCmp('nooPanel');
                          var totalItems = panel.getInnerItems().length;
                          var index = panel.getInnerItems().indexOf(panel.getActiveItem());
                          panel.setActiveItem((index + 1) % totalItems);
  
  
                      }
                  }
              ]
          });
          Ext.Viewport.add(mainPanel);
          mainPanel.down('panel').setActiveItem(0);
      },
      init: function () {
      }
  })
  </code></pre>
  
  <p>but the problem is that if i dont put the height to 300 on the panel of which the layout is <code>card</code> its height becomes 0 and nothing is displayed<br>
  even after setting layout to fit on the viewport what should i do?</p>