1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    5
    Vote Rating
    0
    davidchan is on a distinguished road

      0  

    Smile ST2 animation of a modal panel.

    ST2 animation of a modal panel.


    Hi,

    Currently, I created a popup (extended from Panel, modal: true). After running panel.show(), it just appears.

    I would like it to animate it from bottom to up. Not sure how to proceed. I have added the below to the panel configuration to no avail.

    Code:
    Ext.define('MyApp.view.AgentDetails', {
        extend: 'Ext.Panel',
        xtype: 'agentdetails',
        config: {
            modal: true,
            hideOnMaskTap: true,
            centered: true,
            height: '90%',
            width: '90%',
            layout: {
                animation: {
                    type: 'slide',
                    duration: 500
                }
            },
            items:[
                {
                    xtype: 'toolbar',
                    title: 'Agent Details',
                    docked: 'top'
                },
                {
                    xtype: 'container',
                    html: 'Showing details'
                }
            ]
        }
    });

    Thanks!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,059
    Vote Rating
    851
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Animations aren't fully baked in just yet.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

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

      0  

    Default


    Yeah. Unfortunately there is no easy way to do this right now.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  4. #4
    Sencha User
    Join Date
    Sep 2011
    Posts
    78
    Vote Rating
    1
    shweta.saxena09 is on a distinguished road

      0  

    Default


    Code:
    show: function(animation) {
            this.callParent();
            Ext.Animator.run([{
                element  : this.element,
                xclass   : 'Ext.fx.animation.SlideIn',
                direction: Ext.os.deviceType == "Phone" ? "right" : "left",
                duration : this.animationDuration
            }, {
                element : 'imageCarasoul',
                xclass  : 'Ext.fx.animation.SlideIn',
                duration: this.animationDuration,
                direction: Ext.os.deviceType == "right"
            }]); 
        }
    this code showing error... when i use in 1st card, and work properly in other card.