ExtJs 实现类似QQ的提示消息框

 

 

ExtJs实现类似QQ的提示消息框

 

 

1 扩展Ext.Window控件

 

Ext.namespace("Ext.ux"); Ext.ux.SysMsgWindowManager = {     positions: [] };   Ext.ux.SysMsgWindow = Ext.extend(Ext.Window, {     setTitle: function(title, iconCls){        Ext.ux.SysMsgWindow.superclass.setTitle.call(this, title, iconCls||this.iconCls);     },     setMessage: function(msg){        this.body.update(msg);     },     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.SysMsgWindow.superclass.initComponent.call(this);     },     onRender:function(ct, position) {        Ext.ux.SysMsgWindow.superclass.onRender.call(this, ct, position);     },     onDestroy: function(){     Ext.ux.SysMsgWindowManager.positions.remove(this.pos);         Ext.ux.SysMsgWindow.superclass.onDestroy.call(this);     },     afterShow: function(){     Ext.ux.SysMsgWindow.superclass.afterShow.call(this);         this.on('move', function(){         Ext.ux.SysMsgWindowManager.positions.remove(this.pos);             this.task.cancel();         }, this);         this.task.delay(4000);     },     animShow: function(){         this.pos = 0;         while(Ext.ux.SysMsgWindowManager.positions.indexOf(this.pos)>-1)         this.pos++;         Ext.ux.SysMsgWindowManager.positions.push(this.pos);         this.setSize(250,150);         this.el.alignTo(document, "br-br", [ -10, -10-((this.getSize().height+10)*this.pos) ]);         this.el.slideIn('b', {         duration: 2,         callback: this.afterShow,         scope: this         });        },     animHide: function(){          Ext.ux.SysMsgWindowManager.positions.remove(this.pos);         this.el.ghost("b", {             duration: 2,             remove: true,             scope: this,             callback: this.destroy         });     } });

 

 

2 调用方法

 

<script type="text/javascript">     Ext.onReady(function(){        Ext.get('alert').on('click',function(){            new Ext.ux.SysMsgWindow({               title: '提示窗口',               html: '测试信息',               iconCls: 'error'            }).show(document);         });         }); </script>