Extjs 右下角弹出框 可弹出多个 冒泡小窗体

 Extjs 右下角弹出框 可弹出多个 冒泡小窗体

TipsWindow对象声明

 

view plaincopy to clipboardprint?

1. Ext.ns('Ext.ux');
2. /**
3. * 右下角的小贴士窗口
4. * @author tipx.javaeye.com
5. * @params conf 参考Ext.Window
6. * conf中添加autoHide配置项, 默认3秒自动隐藏, 设置自动隐藏的时间(单位:秒), 不需要自动隐藏时设置为false
7. * @注: 使用独立的window管理组(manager:new Ext.WindowGroup()), 达到总是显示在最前的效果
8. */
9. ; (function($)
10. {
11. //新建window组，避免被其它window影响显示在最前的效果
12. var tipsGroupMgr = new Ext.WindowGroup();
13. tipsGroupMgr.zseed = 99999; //将小贴士窗口前置
15. $.TipsWindow = Ext.extend(Ext.Window,
16. {
17. width: 500,
18. height: 150,
19. layout: 'fit',
20. modal: false,
21. plain: true,
22. shadow: false,
23. //去除阴影
24. draggable: false,
25. //默认不可拖拽
26. resizable: false,
27. closable: true,
28. closeAction: 'hide',
29. //默认关闭为隐藏
30. autoHide: 3,
31. count:1,//设置显示的是第几个tipwindow
32. //n秒后自动隐藏，为false时,不自动隐藏
33. manager: tipsGroupMgr,
34. //设置window所属的组
35. constructor: function(conf)
36. {
37. $.TipsWindow.superclass.constructor.call(this, conf);
38. this.initPosition(true);
39. },
40. initEvents: function()
41. {
42. $.TipsWindow.superclass.initEvents.call(this);
43. //自动隐藏
44. if (false !== this.autoHide)
45. {
46. var task = new Ext.util.DelayedTask(this.hide, this),
47. second = (parseInt(this.autoHide) || 3) * 1000;
48. this.on('beforeshow',
49. function(self)
50. {
51. task.delay(second);
52. });
53. }
54. this.on('beforeshow', this.showTips);
55. this.on('beforehide', this.hideTips);
57. Ext.EventManager.onWindowResize(this.initPosition, this); //window大小改变时，重新设置坐标
58. Ext.EventManager.on(window, 'scroll', this.initPosition, this); //window移动滚动条时，重新设置坐标
59. },
60. //参数: flag - true时强制更新位置
61. initPosition: function(flag)
62. {
63. if (true !== flag && this.hidden)
64. { //不可见时，不调整坐标
65. return false;
66. }
67. var doc = document,
68. bd = (doc.body || doc.documentElement);
69. //ext取可视范围宽高(与上面方法取的值相同), 加上滚动坐标
70. var left = bd.scrollLeft + Ext.lib.Dom.getViewWidth() - 4 - this.width;
71. var top = bd.scrollTop + Ext.lib.Dom.getViewHeight() - 4 - this.height*this.count;
72. this.setPosition(left, top);
73. },
74. showTips: function()
75. {
76. var self = this;
77. if (!self.hidden)
78. {
79. return false;
80. }
82. self.initPosition(true); //初始化坐标
83. self.el.slideIn('b',
84. {
85. callback: function()
86. {
87. //显示完成后,手动触发show事件,并将hidden属性设置false,否则将不能触发hide事件
88. self.fireEvent('show', self);
89. self.hidden = false;
90. }
91. });
92. return false; //不执行默认的show
93. },
94. hideTips: function()
95. {
96. var self = this;
97. if (self.hidden)
98. {
99. return false;
100. }
102. self.el.slideOut('b',
103. {
104. callback: function()
105. {
106. //渐隐动作执行完成时,手动触发hide事件,并将hidden属性设置true
107. self.fireEvent('hide', self);
108. self.hidden = true;
109. }
110. });
111. return false; //不执行默认的hide
112. }
113. });
114. })(Ext.ux);

Ext.ns('Ext.ux');/** * 右下角的小贴士窗口 * @author tipx.javaeye.com * @params conf 参考Ext.Window * conf中添加autoHide配置项, 默认3秒自动隐藏, 设置自动隐藏的时间(单位:秒), 不需要自动隐藏时设置为false * @注: 使用独立的window管理组(manager:new Ext.WindowGroup()), 达到总是显示在最前的效果 */; (function($){ //新建window组，避免被其它window影响显示在最前的效果 var tipsGroupMgr = new Ext.WindowGroup(); tipsGroupMgr.zseed = 99999; //将小贴士窗口前置 $.TipsWindow = Ext.extend(Ext.Window, { width: 500, height: 150, layout: 'fit', modal: false, plain: true, shadow: false, //去除阴影 draggable: false, //默认不可拖拽 resizable: false, closable: true, closeAction: 'hide', //默认关闭为隐藏 autoHide: 3, count:1,//设置显示的是第几个tipwindow //n秒后自动隐藏，为false时,不自动隐藏 manager: tipsGroupMgr, //设置window所属的组 constructor: function(conf) { $.TipsWindow.superclass.constructor.call(this, conf); this.initPosition(true); }, initEvents: function() { $.TipsWindow.superclass.initEvents.call(this); //自动隐藏 if (false !== this.autoHide) { var task = new Ext.util.DelayedTask(this.hide, this), second = (parseInt(this.autoHide) || 3) * 1000; this.on('beforeshow', function(self) { task.delay(second); }); } this.on('beforeshow', this.showTips); this.on('beforehide', this.hideTips); Ext.EventManager.onWindowResize(this.initPosition, this); //window大小改变时，重新设置坐标 Ext.EventManager.on(window, 'scroll', this.initPosition, this); //window移动滚动条时，重新设置坐标 }, //参数: flag - true时强制更新位置 initPosition: function(flag) { if (true !== flag && this.hidden) { //不可见时，不调整坐标 return false; } var doc = document, bd = (doc.body || doc.documentElement); //ext取可视范围宽高(与上面方法取的值相同), 加上滚动坐标 var left = bd.scrollLeft + Ext.lib.Dom.getViewWidth() - 4 - this.width; var top = bd.scrollTop + Ext.lib.Dom.getViewHeight() - 4 - this.height*this.count; this.setPosition(left, top); }, showTips: function() { var self = this; if (!self.hidden) { return false; } self.initPosition(true); //初始化坐标 self.el.slideIn('b', { callback: function() { //显示完成后,手动触发show事件,并将hidden属性设置false,否则将不能触发hide事件 self.fireEvent('show', self); self.hidden = false; } }); return false; //不执行默认的show }, hideTips: function() { var self = this; if (self.hidden) { return false; } self.el.slideOut('b', { callback: function() { //渐隐动作执行完成时,手动触发hide事件,并将hidden属性设置true self.fireEvent('hide', self); self.hidden = true; } }); return false; //不执行默认的hide } });})(Ext.ux);

 

调用方法

 

view plaincopy to clipboardprint?

1. var abc=0,
2. tipw=[];
3. 加一个方法调用弹出
4. abcd = functon(){
5. tipw[abc] = new Ext.ux.TipsWindow(
6. {
7. title: "小贴士<a href="#" mce_href="#">电视发射塔</a>",
8. autoHide: 5,
9. count:abc+1,//设置弹出的是第几个
10. //5秒自动关闭
11. html: "这是提示"
12. });
13. tipw[abc].show();
14. }