Animated (slide) transition in sencha touch

问题:

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();
    }
});

回答1:

the correct code should be :

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