How to set show / hide ExtJS window with animation?

Question

Here is my source code:

  Ext.create ('Ext.window.Window', {
     id: 'edit_segtype_win',
     title: 'msg',
     layout: 'fit',
     html: data,
     modal: true,
     resizable: false,
     constrain: true
 }). show (undefined, bind_ajax_success);

When I call show (...), the window will display without animation. I want to add some animation like fadein / fadeout / slidein / slideout. Can someone help me? Thanks!

Answer 1

You can use the Anim object http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.fx.Anim to use in your Window component as follows:

var myWindow = Ext.create('Ext.window.Window', { html:"hello world", }); Ext.create('Ext.fx.Anim', { target: myWindow, duration: 1000, from: { width: 400, //starting width 400 opacity: 0, // Transparent color: '#ffffff', // White left: 0 }, to: { width: 300, //end width 300 height: 300 // end height 300 } }); 

And then this animation is added when your call

 window.show();