Extjs 右下角彈出框 可彈出多個 冒泡小窗體

 Extjs 右下角彈出框 可彈出多個 冒泡小窗體

TipsWindow對象聲明

 

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

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

 

調用方法

 

var abc=0,
tipw=[];
加一個方法調用彈出
abcd = functon(){
tipw[abc] = new Ext.ux.TipsWindow(
{
title: "小貼士<a href="#" mce_href="#">電視發射塔</a>",
autoHide: 5,
count:abc+1,//設置彈出的是第幾個
//5秒自動關閉
html: "這是提示"
});
tipw[abc].show();
}