javascript - How to set ExtJS window showhide with animation? - Stack Overflow

admin管理员组

文章数量:1336731

Here is My sourcecode:

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 show without any animation. I want to add some animation,such as fadein/fadeout/slidein/slideout. Can somebody help me? Thank you!

Here is My sourcecode:

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 show without any animation. I want to add some animation,such as fadein/fadeout/slidein/slideout. Can somebody help me? Thank you!

• javascript
• extjs

Share Follow asked Apr 19, 2013 at 23:57 scott1028scott1028 43722 gold badges99 silver badges1717 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You can use Anim object http://docs.sencha./extjs/4.2.0/#!/api/Ext.fx.Anim to use in your Window Component like this:

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, that animation is added when your call to

window.show();

本文标签： javascriptHow to set ExtJS window showhide with animationStack Overflow