Animated (slide) transition in sencha touch - animation

Question

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?
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: '<h1>Please Identify:</h1><p>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.</p>'
});
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();
}
});

Answer 1

the correct code should be :
Ext.get('main-panel').setActiveItem(1, {type : 'slide', direction:'left'});