Ext类似QQ右下角弹出窗口(转)

最新推荐文章于 2025-04-24 22:53:19 发布

leejingnan87

最新推荐文章于 2025-04-24 22:53:19 发布

阅读量204

点赞数

分类专栏： Ext 文章标签： EXT QQ HTML

Ext 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用Ext.js库实现一个类似QQ消息弹窗的窗口，并通过配置shadow属性来移除消失时出现的黑色阴影。通过实例演示了初始化组件、设置消息和标题、渲染位置以及动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

类似qq消息弹窗的窗口也是在网上找到但是消失的时候有一个黑色的阴影很讨厌,查了些资料稍作修改,只需要配置一个

shadow:false 即可.

Ext.namespace("Ext.ux");

Ext.ux.ToastWindowMgr = {
positions: []
};

Ext.ux.ToastWindow = Ext.extend(Ext.Window, {
    initComponent: function(){
          Ext.apply(this, {
              iconCls: this.iconCls || 'information',
            width: 250,
            height: 150,
            autoScroll: true,
            autoDestroy: true,
            plain: false,
            shadow:false
          });
        this.task = new Ext.util.DelayedTask(this.hide, this);
        Ext.ux.ToastWindow.superclass.initComponent.call(this);
    },
    setMessage: function(msg){
        this.body.update(msg);
    },
    setTitle: function(title, iconCls){
        Ext.ux.ToastWindow.superclass.setTitle.call(this, title, iconCls||this.iconCls);
    },
    onRender:function(ct, position) {
        Ext.ux.ToastWindow.superclass.onRender.call(this, ct, position);
    },
    onDestroy: function(){
        Ext.ux.ToastWindowMgr.positions.remove(this.pos);
        Ext.ux.ToastWindow.superclass.onDestroy.call(this);
    },
    afterShow: function(){
        Ext.ux.ToastWindow.superclass.afterShow.call(this);
        this.on('move', function(){
               Ext.ux.ToastWindowMgr.positions.remove(this.pos);
            this.task.cancel();}
        , this);
        this.task.delay(4000);
    },
    animShow: function(){
        this.pos = 0;
        while(Ext.ux.ToastWindowMgr.positions.indexOf(this.pos)>-1)
            this.pos++;
        Ext.ux.ToastWindowMgr.positions.push(this.pos);
        this.setSize(250,150);
        this.el.alignTo(document, "br-br", [ -20, -20-((this.getSize().height+10)*this.pos) ]);
        this.el.slideIn('b', {
            duration: 2,
            callback: this.afterShow,
            scope: this
        });
    },
    animHide: function(){
           Ext.ux.ToastWindowMgr.positions.remove(this.pos);
        this.el.ghost("b", {
            duration: 2,
            remove: true,
        scope: this,
        callback: this.destroy
        });
    }
});