1. #1
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    7
    Vote Rating
    0
    sunzhuoshi is on a distinguished road

      0  

    Default Unanswered: hideAnimation and showAnimation

    Unanswered: hideAnimation and showAnimation


    I'd like to simulation modal view animation on iPhone, and here is my code
    Code:
    Ext.define("test.view.Main", {    extend: 'Ext.Panel',
        id: 'MainView',
        requires: [
        ],
        config: {
            layout: 'card',
            items: [
                {
                    xtype: 'panel',
                    style: 'background: blue',
                    /* 
                    hideAnimation: {
                        type: 'fade',
                        out: true
                    },
                    */
                    items: [
                        {
                            xtype: 'button',
                            text: 'panel2',
                            handler: function() {
                                this.up('#MainView').setActiveItem(1);
                            }
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    style: 'background: red',
                    showAnimation: {
                        type: 'slide',
                        direction: 'up'
                    },
                    hideAnimation: {
                        type: 'slide',
                        direction: 'down'
                    },
                    items: [
                        {
                            xtype: 'button',
                            text: 'close',
                            handler: function() {
                                this.up('#MainView').setActiveItem(0);
                            }
                        }
                    ]
                }
            ]
        }
    });
    the code works, but when showing the second panel, the first one hides immediately leaving a white background, so I want to hide it with delay or fade.
    but when I comment out the hideAnimation code of the first panel, the second panel shows without animation.
    Is this a feature or bug? Thanks in advance.

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

      0  

    Default try this...

    try this...


    Code:
    { xtype: 'button', text: 'close', handler: function() { this.up('#MainView').animateActiveItem(1,{type:'slide', direction:'left'}); } }

  3. #3
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    7
    Vote Rating
    0
    sunzhuoshi is on a distinguished road

      0  

    Default


    Quote Originally Posted by shweta.saxena09 View Post
    Code:
    { xtype: 'button', text: 'close', handler: function() { this.up('#MainView').animateActiveItem(1,{type:'slide', direction:'left'}); } }
    Thank you, but my issue happens when panel2 shows, not when it hides...

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

      0  

    Default


    Change the index thats it.....

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

      0  

    Default Its working.....

    Its working.....


    Code:
    layout: 'card',        items: [
                {
                    xtype: 'panel',
                    style: 'background: blue',
                    items: [
                        {
                            xtype: 'button',
                            text: 'panel2',
                            handler: function() {
                                Ext.getCmp('MainView').animateActiveItem(1,{type:'slide', direction:'left'});
                            }
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    style: 'background: red',
                    items: [
                        {
                            xtype: 'button',
                            text: 'close',
                            handler: function() {
                                Ext.getCmp('MainView').animateActiveItem(0,{type:'slide', direction:'right'});
                            }
                        }
                    ]
                }
            ]

  6. #6
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    7
    Vote Rating
    0
    sunzhuoshi is on a distinguished road

      0  

    Default


    Thanks, and I've tested your code.
    It slides out the old panel instead of covering it ...

Thread Participants: 1

Tags for this Thread