How to slideout and destroy in extjs4 panel?

How to slide out开发者_高级运维 a panel and then close?

i tried like this but it doesn't remove the panel, it just seems to be hiding

this.el.slideOut('b', {remove: true});

in the panel configuration i have this

closable: true,
closeAction: 'destroy',

what i want to do is slideout panel then close it. any idea why this doesn't remove panel from DOM ?

Regards

Try the following code.Hope it will help you:

var btn = Ext.create('Ext.Button',{
  text    : 'hide me',
  handler : function() {
    myPanel.el.switchOff({
      callback : function() {
          myPanel.el.slideOut('b',{remove : true});
           myPanel.destroy();
      }
    });
  } 
});

myPanel = Ext.create('Ext.Panel',{
  width    : 200,
  height   : 100,
  title    : 'Title me',
  frame    : true,
  renderTo : Ext.getBody(), 
  items    :  btn   
});

You can check the working sample using below link:

http://jsfiddle.net/kesamkiran/kVbra/14/