title: Animated (slide) transition in sencha touch
body: <p>I have a panel in a sencha app swich contains a login form. The think is that I wanna load new content when the form is submited. I wanna that the new content is loaded after an slide animation. I tried to use mainPanel.setCard({type:'slide'}) but it  I don't know how to put the new content. Any idea?</p>
  
  <pre><code>Ext.setup({
      icon: 'icon.png',
      tabletStartupScreen: 'tablet_startup.png',
      phoneStartupScreen: 'phone_startup.png',
      glossOnIcon: false,
      onReady: function() {
          var mainPanel = new Ext.Panel({
              id:'main-panel',
              renderTo: 'content',
              html: '&lt;h1&gt;Please Identify:&lt;/h1&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel neque nec mauris eleifend fringilla. Nulla sagittis placerat ullamcorper. Duis ac elit sapien. Pellentesque semper vestibulum leo id vehicula.&lt;/p&gt;'
          });
  
          var form;
  
          Ext.regModel('User', {
              fields: [
              {
                  name: 'name',
                  type: 'string'
              },
  
              {
                  name: 'password',
                  type: 'password'
              },
              ]
          });
  
          var formBase = {
              renderTo:'main-panel',
              id: 'login-form',
              url   : 'resources/login.php',
              standardSubmit : false,
              items: [{
                  xtype: 'fieldset',
                  defaults: {
                      required: true,
                      labelAlign: 'left',
                      labelWidth: '40%'
                  },
                  items: [
                  {
                      xtype: 'textfield',
                      name : 'username',
                      label: 'Usuario',
                      useClearIcon: true,
                      autoCapitalize : false
                  }, {
                      xtype: 'passwordfield',
                      name : 'password',
                      label: 'Contraseña',
                      useClearIcon: false
                  }
                  ]
              }
              ],
              listeners : {
                  submit : function(form, result){
                      console.log('success', Ext.toArray(arguments));
                  },
                  exception : function(form, result){
                      console.log('failure', Ext.toArray(arguments));
                  }
              },
              dockedItems: [{
                  xtype: 'toolbar',
                  dock: 'bottom',
                  items: [
                  {
                      text: 'Entrar',
                      id: 'login-submit',
                      ui: 'confirm',
                      handler: function() {                        
                          form.submit({
                              method:'POST',
                              waitTitle:'Connecting',
                              waitMsg:'Sending data...',
                              success:function(response){
                                  Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){
                                      if (btn == 'ok'){
                                          mainPanel.setCard({
                                              type: 'slide'
                                          });
                                      }
                                  });
                              },
                              failure:function(form, action){
                                  Ext.Msg.alert('Status', 'Login Failed!', function(btn, text){
                                      if (btn == 'ok'){
                                          form.reset();
                                      }
                                  });
                                  if(action.failureType == 'server'){
                                      obj = Ext.util.JSON.decode(action.response.responseText);
                                      Ext.Msg.alert('Login Failed!', obj.errors.reason);
                                  }else{
                                      Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText);
                                  }
                                  form.reset();
                              }
                          });
                      }
                  }
                  ]
              }]
          };
  
          Ext.apply(formBase, {
              height: 150,
              width: 300
          });
  
          form = new Ext.form.FormPanel(formBase);
  
          form.show();
      }
  });
  </code></pre>