如何设置ExtJS窗口显示/隐藏动画?

时间:2013-04-19 23:57:40

标签: javascript extjs

这是我的源代码:

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);

当我调用show(...)时,窗口将显示没有任何动画。 我想添加一些动画,例如fadein / fadeout / slidein / slideout。 有人能帮助我吗?谢谢!

1 个答案:

答案 0 :(得分:4)

您可以在Window Component中使用Anim对象http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.fx.Anim,如下所示:

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

然后,当您调用

时,会添加该动画
window.show();