title: Open another view within same tabpanel after button click in first panel
body: <p>I have a Main view in which i create three tabs, on click login tab a login form open
  after login success, i need to load another view (landing) in same login tabpanel..I have used the following lines of code to load the view but it doesnt opening it in same tabpanel but loading as a independent view. How to open it in same tabpanel.</p>
  
  <p>Main View of application</p>
  
  <pre><code>Ext.define("SenchaTest.view.Main", {
      extend: 'Ext.tab.Panel',
      requires: [
          'Ext.TitleBar',
  
  
      ],
      config: {
          tabBarPosition: 'bottom',
  
          items: [
              {
                      title: 'Home',
                      iconCls: 'home',
                      html: [
                          '&lt;img src="http://staging.sencha.com/img/sencha.png" /&gt;',
                          '&lt;h1&gt;Welcome to Sencha Touch&lt;/h1&gt;',
                          "&lt;p&gt;This demonstrates how ",
                          "to use tabs, lists and forms to create a simple app&lt;/p&gt;",
                          '&lt;h2&gt;Sencha Touch (2.0.0)&lt;/h2&gt;'
                      ].join("")
                  },
  
  
  
                  {
                  title: 'Log In',
                      iconCls: 'user',
                      xtype: 'formpanel',
                      url: 'contact.php',
                      layout: 'card',
              id:"loginForm",
                  items: [
                      {
                          xtype: 'fieldset', 
              title: 'Log In',    
              id:"submitForm",                        
                          instructions: 'Enter username and password to login.',
                          defaults: {
                          required: true,
                          labelAlign: 'left',
                          labelWidth: '45%'
                      },
              items: [
                      {
                          xtype: 'textfield',
                          name : 'username',
                          label: 'User Name',
              allowBlank:false, 
                          useClearIcon: true              
                      }, {
                          xtype: 'passwordfield',
                          name : 'password',
                          label: 'Password',
              allowBlank:false, 
                          useClearIcon: false
  
                      },{
                              xtype: 'button',
                              text: 'Submit',
                              ui: 'confirm',
                          id: 'btnSubmitLogin'
                              //  this.up('formpanel').submit();
                              }]
  
                      }  
  
                  ]
              }
  
          ]
      }
  });
  </code></pre>
  
  <p>Code for Controller</p>
  
  <pre><code>Ext.define("SenchaTest.controller.LoginForm", {
      extend : "Ext.app.Controller",
      config : {
          refs : {
              btnSubmitLogin : "#btnSubmitLogin",
              LoginForm : '#loginForm'
          },
          control : {
              btnSubmitLogin : {
                  tap : "onSubmitLogin"
              }
          }
      },
      onSubmitLogin : function(btn) {
      alert("onSubmitLogin");
          console.log("onSubmitLogin");
          var values = this.getLoginForm().getValues();
          //alert(values.username);
          //alert(values.password);
  
           Ext.util.JSONP.request({ 
  
      url:'http://localhost:8092/returnjson.ashx',
                  params:{                    callback:'callback',uname:values.username,password:values.password}, 
                  callbackKey: 'callback', 
                  success: function (result,request) 
                  {     
                      if(result.status==true)
                      {
                       alert("Welcome " + result.UserName);
  
                                                            Ext.Viewport.setActiveItem(Ext.create('SenchaTest.view.Landing'));
  
  
  
                      }
                      else
                      {
                      alert("Username or Password is incorrect"); 
                      return;
                      }
                      console.log(result.UserName);
  
                      console.log(result);
                      alert(result); 
  
                      // Handle error logic 
                      if (result.error) { 
                          alert(response.error); 
                          return; 
                      } 
                  } 
              }); 
      },
      launch : function() {
          this.callParent();
          console.log("LoginForm launch");
          Ext.Viewport.add(Ext.create('SenchaTest.view.Landing'));
  
      },
      init : function() {
          this.callParent();
          console.log("LoginForm init");
      }
  });
  </code></pre>
  
  <p>View to load after login landing</p>
  
  <pre><code>Ext.define("SenchaTest.view.Landing", {
      extend: "Ext.Container",
      xtype: 'landingScreen',
      requires: [
          "SenchaTest.view.Main"       
      ],
      config: {
          html: "Welcome to my app"  
      }
  });
  </code></pre>
  
  <p>i have used...</p>
  
  <pre><code>Ext.Viewport.setActiveItem(Ext.create('SenchaTest.view.Landing')); 
  </code></pre>
  
  <p>to load landing view but it does not load in same tab but as a independent page.
  Please Help on this. </p>