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