用Extjs3實現右下角小貼士

:D
代碼挺簡單，主要是位置設定、新建Ext.WindowGroup並設置zseed、自動關閉處理。
其它就是Ext的繼承而已了

Ext.ns('MyLib');
/**
 * 右下角的小貼士窗口
 * @author tipx.iteye.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:200,
        height:150,
        layout:'fit',
        modal : false,
        plain: true,
        shadow:false, //去除陰影
        draggable:false, //默認不可拖拽
        resizable:false,
        closable: true,
        closeAction:'hide', //默認關閉爲隱藏
        autoHide:3, //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.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
        }
    });
})(MyLib);

調用：

//其它參數參考Ext.Window的參數設置
var tipw = new MyLib.TipsWindow({
    title:"小貼士",
    autoHide:5, //5秒自動關閉
    html:"fdasfdsa54f54"
});
tipw.show();

效果：

[img]http://dl.iteye.com/upload/attachment/281291/e6fee129-ce18-3319-b33a-3b29cdb08f08.jpg[/img]