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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."