hideAnimation and showAnimation

[sunzhuoshi]

I'd like to simulation modal view animation on iPhone, and here is my 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.

[shweta.saxena09]

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

[sunzhuoshi]

{ 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...

[shweta.saxena09]

Change the index thats it.....

[shweta.saxena09]

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'});
                        }
                    }
                ]
            }
        ]

[sunzhuoshi]

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