在 qwikiOffice 中看到有右下角的消息提示框,在实现授权系统的时候用这种提示框来提示成功或者失败信息很有用。在 ext 的论坛上看到了一个实现方案: Notification ( http://www.sencha.com/forum/showthread.php?32365-Ext.ux.Notification ),前身是 ToastWindow 。官方 demo : http://efattal.fr/extjs-dev/examples/toastwindow/ (貌似不能访问)我根据实际的要求,简化了 Notification 的初始化配置,并且增加了 3 个方法。 (ExtJS 2.0.2)初始化:
new Ext.ux.Notification() 或者 new Ext.ux.Notification({autoHide:true/false,hideDelay:3000});
autoHide : 信息提示窗口是否自动隐藏(可选参数)
hideDelay :延迟多久开始隐藏(可选参数)
 方法
1 : showSuccess :显示成功的信息,默认在信息提示完成之后,自动隐藏窗口
       参数:
       title :提示窗口的标题(可选参数)
       message :提示窗口的内容(可选参数)2 : showFailure :显示失败的信息,默认在信息提示完成之后,一直显示窗口
       参数:
       title :提示窗口的标题(可选参数)
       message :提示窗口的内容(可选参数)3 : showMessage :显示信息。如果 success 为 true ,则显示成功信息,提示窗口在 hideDelay 毫秒后隐藏窗口。如果 success 为 false ,根据初试化 autoHide 和 hideDelay 的配置,来决定是否隐藏窗口。
       参数:
       title :提示窗口的标题(必填)
       message :提示窗口的内容(必填)
       success : true/false ,操作成功 / 失败(必填)效果如下:
 修改后的代码:
注: protoculous-packer.js 声音播放器,可以删除。
下载地址:http://download.csdn.net/source/2563966这个窗口没有尽善尽美,例如如果提示窗口过多,就会导致窗口堆积,影响美观和使用,需要修改 animShow 中的实现,希望有童鞋能够帮忙解决这个问题。能力所限,这个代码中没有实现提示框显示位置的设置,例如:左下角、左上角、右上角、 XY 定位显示……,期待大家的改进,站内信联系 ,谢谢!
blog :http://blog.csdn.net/liu251/archive/2010/07/22/5754310.aspx 
blog中已经排版

解决方案 »

  1.   


    左下角、左上角、右上角、 XY 定位显示
    主要这个定位要设置cssposition:absolute;
    left: x坐标;
    top: y坐标;
    设置到相应的窗口中即可;
    如果窗口覆盖掉了
    可以设置z-index: 5;表示在页面z轴也就是窗口放在第几层
      

  2.   

    Ext 有一个扩展的组件Notification 默认是从有下角弹出的。
    可以修改一下从不同角度弹出
    this.el.alignTo(this.animateTarget || document, "br-tr", [ -1, -1-((this.getSize().height+10)*this.pos) ]);//
    br-tr 是右下角的意思。
      

  3.   

    ext已经封装好了。不需要计算。
    bl-tl //左下角
    br-tr//又下角