Hybrid View

  1. #1
    Sencha User
    Join Date
    Sep 2010
    Location
    Netherlands
    Posts
    120
    Answers
    3
    Vote Rating
    4
    aacoro is on a distinguished road

      0  

    Default Answered: Animation between two panels?

    Answered: Animation between two panels?


    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:
    Code:
    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:
    Code:
    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:
    Code:
    // show search screen with a fantastic animation <----
    But how to do this with a animation??
    Thanks.

  2. 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:

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

  3. #2
    Sencha User
    Join Date
    Nov 2011
    Location
    Netherlands
    Posts
    4
    Answers
    1
    Vote Rating
    0
    Hans Wildenberg is on a distinguished road

      0  

    Default


    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:

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

  4. #3
    Sencha User
    Join Date
    Sep 2010
    Location
    Netherlands
    Posts
    120
    Answers
    3
    Vote Rating
    4
    aacoro is on a distinguished road

      0  

    Default


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

  5. #4
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    As Hans says, both items will need to be in a container with a card layout.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  6. #5
    Sencha User
    Join Date
    Sep 2010
    Location
    Netherlands
    Posts
    120
    Answers
    3
    Vote Rating
    4
    aacoro is on a distinguished road

      0  

    Default


    Quote Originally Posted by Hans Wildenberg View Post
    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:

    Code:
    layout: {
        type: 'card',
        animation: {
            type: 'fade', // or slide or .....
            duration: 500
        }
    }
    Thanks, I have got it working now.

Thread Participants: 2

Tags for this Thread