Animation between two panels?

[aacoro]

Hi guys, i think i missed a big point but i cannot get it working! I have two screens (panels) and I want the slide animation between them, how to achive this?

I have a login form and search form:

Login.js:

Ext.define('MyApp.Login', {
    extend  : 'Ext.form.Panel',
    id      : 'loginForm',
    layout    : 'hbox', 
    standardSubmit: false,


    config  : {
        items : [
            {
                xtype   : 'toolbar',
                docked  : 'top',
                title   : 'First login fool'
            },
            {
                xtype   : 'fieldset',
                title   : 'Username / password',
                items   : [
                    {
                        items : [
                            {
                                xtype : 'textfield',
                                name  : 'username',
                                id    : 'username',
                                label : 'Name'
                            },
                            {
                                xtype : 'passwordfield',
                                name  : 'password',
                                id    : 'password',
                                label : 'Password'
                            }
                        ]
                    }  
                ]
            },
            {
                xtype   : 'button',
                text    : 'Login',
                ui      : 'confirm',
                handler : function() {
                    Ext.Ajax.request({
                        url     : 'http://10.0.0.4:9000/login',
                        headers : {'Content-Type':'application/json; chartset=utf-8'},
                        params  : Ext.JSON.encode(Ext.getCmp('loginForm').getValues(true)),
                        success : function(form, result) {
                            loadConfigMask.hide();
                            // show search screen with a fantastic animation <----
                            Ext.create('MyApp.Search', {
                                fullscreen : true
                            });
                        },
                        failure : function(form, result) {
                            // hide login mask
                            loadConfigMask.hide();
                            Ext.Msg.alert('Error', result.message, Ext.emptyFn);
                        }
                    });
                }
            }
        ]
    }
});

and the Search.js:

Ext.define('MyApp.Search', {
    extend  : 'Ext.form.Panel',
    id      : 'searchForm',
    layout  : 'hbox',


    config  : {
        items : [
            {
                xtype   : 'toolbar',
                docked  : 'top',
                title   : 'Now you can search'
            },
            {
                items : [
                    {
                        xtype : 'textfield',
                        name  : 'searchValue',
                        id    : 'searchValue',
                        label : 'Name'
                    }
                ]
            },
            {
                xtype   : 'button',
                ui      : 'confirm',
                text    : 'Search',
                padding : 15,
                margin  : 10,
                handler : function() {
                    Ext.Ajax.request({
                        url     : 'http://10.0.0.3:9000/ctrsearch/find',
                        headers : {'Content-Type':'application/json; chartset=utf-8'},
                        params  : Ext.encode(Ext.getCmp('searchForm').getValues(true))
                    });
                }
            }
        ]
    }
});

I start the search screen on a button handler where you can read:

// show search screen with a fantastic animation <----

But how to do this with a animation??
Thanks.

[Hans Wildenberg]

Hi,

I used a card layout to switch between panels, so I am not 100% sure if this will work in your case, but you could add the following layout to your config:

layout: {
    type: 'card',
    animation: {
        type: 'fade', // or slide or .....
        duration: 500
    }
}

[aacoro]

No does not work either, thanks Hans, I will switch to an card layout.

[rdougan]

As Hans says, both items will need to be in a container with a card layout.

[aacoro]

Hi,

I used a card layout to switch between panels, so I am not 100% sure if this will work in your case, but you could add the following layout to your config:

layout: {
    type: 'card',
    animation: {
        type: 'fade', // or slide or .....
        duration: 500
    }
}

Thanks, I have got it working now.