用于动画的Ext JS面板显示不起作用

Question

Ext JS Modern Theme have a panel. This panel while tapping hide and again show the same panel with animation. Now panel hiding is working but showing is not working. Any one find the problem?

Ext.defer() is working with alerts. Only show function is not working.

{
 xtype  : 'panel',
 layout  : {
    type: 'vbox',
    align: 'center',
         },
 width   : '30%',
 name    : 'countImg',
 html    : '<div  > <img src="./resources/mala.png"></div>', 
 hideAnimation:{
     type        : 'slideOut',
     duration    : 500,
     direction   : 'top',
   },
 showAnimation:{
     type        : 'slideIn',
     duration    : 500,
     direction   : 'down',
   },
 listeners:
 {
   initialize: function()
  {
      this.element.on({
      tap: function()
      { 
       var imgPanelObj = Ext.ComponentQuery.query('panel[name=countImg]');
        imgPanelObj[0].hide();  
        Ext.defer( function(){
           imgPanelObj[0].show();
}, 500);
 }
     });
   }    
 }   
}

I want to show the panel again with animation after hiding panel. Its like slide up and slide down.

Answer 1

{ 
   var imgPanelObj = Ext.ComponentQuery.query('panel[name=countImg]');
    imgPanelObj[0].hide();  
    Ext.defer( function(){
       imgPanelObj[0].show();
}, 1000);

Increase the duration it will work