【问题标题】:How to set ExtJS window show/hide with animation?如何设置 ExtJS 窗口显示/隐藏动画?
【发布时间】:2013-04-13 11:08:31
【问题描述】:

这是我的源代码:

Ext.create('Ext.window.Window', { id:'edit_segtype_win', 标题:'味精', 布局:'适合', html:数据, 模态:真, 可调整大小:假, 约束:真 }).show(未定义,bind_ajax_success);

当我调用 show(...) 时,窗口将显示没有任何动画。 我想添加一些动画,例如淡入/淡出/滑入/滑出。 有人可以帮助我吗?谢谢!

【问题讨论】:

    标签: javascript extjs


    【解决方案1】:

    您可以使用 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();
    

    【讨论】:

    • 这个解决方案似乎只工作一次,对隐藏不起作用。有没有人有使用 Ext.fx.Anim 和 show/hide 的建议或其他示例?
    • 只是吹毛求疵,但width: 400 应该是width: 400,
    猜你喜欢
    • 2014-02-02
    • 2010-10-28
    • 1970-01-01
    • 2013-02-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多