`
tipx
  • 浏览: 109026 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

用Extjs3实现右下角小贴士

阅读更多

代码挺简单,主要是位置设定、新建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();


效果:


  • 大小: 33 KB
1
1
分享到:
评论
4 楼 tipx 2012-03-28  
Sartner 写道
我改了改...
当mouseover的时候不隐藏,
mouseout的时候按照autoHide设定的秒数进行隐藏

3 楼 Sartner 2012-03-07  
[size=xx-small]我改了改...
当mouseover的时候不隐藏,
mouseout的时候按照autoHide设定的秒数进行隐藏

(function($) {
				//新建window组,避免被其它window影响显示在最前的效果
				var tipsGroupMgr = new Ext.WindowGroup();
				tipsGroupMgr.zseed=99999; //将小贴士窗口前置
				var hideTask;  //隐藏窗口的任务
				var delaySecond;  //延迟隐藏的时间

				$.TipsWindow = Ext.extend(Ext.Window, {
					width:200,
					height:150,
					layout:'fit',
					modal : false,
					plain: true,
					isHide: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){
							hideTask = new Ext.util.DelayedTask(this.hide, this);
							delaySecond = (parseInt(this.autoHide) || 3) * 1000;
							this.on('beforeshow', function(self) {
								hideTask.delay(delaySecond);
							});
							this.on('afterrender', this.setDelayHideOnMouseover);
						}
						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()-30-this.height;
						this.setPosition(left, top);
					},
					showTips: function() {
						this.isHide=false;
						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() {
						this.isHide=true;
						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
					},
					setDelayHideOnMouseover:function(_thisWin){
						_thisWin.mon(_thisWin.el, {
							mouseover:function(){
								hideTask.cancel(); //鼠标悬停时不隐藏窗体
							},
							mouseout:function(){
								hideTask.delay(delaySecond);	//鼠标移开时开启延时隐藏窗体
							}
						});
					}
				});
			})(MyLib)
[/size]
2 楼 tipx 2010-07-02  
babydeed 写道
咋实现已经弹出一个 然后再弹出一个(这个在第1个的上面) 同理弹出第3个(在第2个上面)。。。?


如果是类似MSN那样的,需要修改initPosition方法,并且需要每次都实例化TipsWindow。

修改initPosition方法:
在设置(left,top)前,
用tipsGroupMgr.each()取出hidden为false的window,并找到值最小的top,
将这个最小的top加上当前TipsWindow的height作为top即可。
1 楼 babydeed 2010-07-01  
咋实现已经弹出一个 然后再弹出一个(这个在第1个的上面) 同理弹出第3个(在第2个上面)。。。?

相关推荐

    extJs3升级extjs4方案

    在 ExtJS3 中,我们可以使用 Ext.extend 来定义类,而在 ExtJS4 中,我们需要使用 Ext.define 来定义类。例如,在 ExtJS3 中,我们可以使用以下代码来定义一个类: ```javascript Ext.ux.PostStore = Ext.extend...

    Extjs 轻松实现下拉框联动

    最近小弟做了Extjs实现实现下拉框联动的效果,参考了好久才学会,闲下来发一个简单的例子。。呵呵

    ExtJs消息提示框

    在标题提到的"ExtJs消息提示框"中,我们关注的是如何在ExtJs应用程序中实现这些功能。通常,ExtJs的消息提示框并不内置于核心库中,而是作为扩展(ux)存在,例如在`Ext.ux.window.Notification-master`这个压缩包...

    ExtJs3 演示系统

    ExtJs3是一个强大的JavaScript框架,主要用于构建富客户端的Web应用程序。...通过分析和研究这个系统,开发者可以掌握如何使用ExtJs3构建复杂且功能丰富的前端应用,并为实际项目提供有价值的参考。

    ExtJS 多文件上传 UploadDialog For ExtJS3.x

    ### ExtJS 多文件上传 UploadDialog For ExtJS3.x #### 概述 在Web开发领域,特别是使用ExtJS框架进行界面设计时,文件上传功能是必不可少的一部分。然而,随着ExtJS版本的更新,原有的多文件上传组件可能不再兼容...

    ExtJS实现多文件上传UploadDialog For ExtJS3.x

    在本文中,我们将深入探讨如何使用ExtJS 3.x实现多文件上传功能,结合Struts2框架进行数据处理。首先,我们需要确保环境配置正确。在描述中提到,我们需要将一系列Struts2相关的库文件复制到项目的`WebContent\lib`...

    extjs实现动态树

    在ExtJS中,这种功能主要通过`Ext.tree.TreePanel`或其现代版本`Ext.tree.View`来实现。 一、ExtJS 动态树基础 1. `Ext.tree.TreePanel`:这是ExtJS中用于创建树形结构的主要组件。它具有丰富的配置项和事件,支持...

    ExtjS实现聊天功能

    3. **实时通信**:由于ExtJS本身不支持实时通信,我们需要借助WebSocket或者Long Polling等技术实现消息的即时传输。WebSocket提供双向通信,可以实现实时的消息推送;而Long Polling则是一种模拟实时的解决方案,...

    Extjs 4.2分组小计

    默认情况下,ExtJS会自动在每个分组底部显示小计。如果你想要自定义小计的样式或行为,可以使用`summaryRenderer`函数。例如,你可以将小计格式化为货币值: ```javascript { text: '销售额', dataIndex: '...

    extjs3合并表头 rowspan

    在ExtJS 3中,如果你需要合并表头,你可能会使用`Ext.grid.GroupingView`或自定义的视图类。表头合并通常涉及到设置特定的配置选项和处理渲染过程。以下是一些关键知识点: 1. **GroupingView**: 这是ExtJS 3中用于...

    extjs3中文手册

    extjs3中文手册 最新的extjs3版本的中文手册

    extjs 实现动态表头

    在IT领域,特别是Web开发中,ExtJS是一个广泛使用的JavaScript框架,它提供了丰富的用户界面组件,包括表格(Grid)等。动态表头是ExtJS中一个高级特性,它允许开发者根据需要在运行时动态地创建和修改表格的列结构...

    Extjs3.4+Ext-core.pdf+轻松搞定Extjs.pdf

    `轻松搞定Extjs.pdf` 很可能是一份详细的教程或指南,它可能涵盖了ExtJS的基本概念、组件使用、布局管理、数据绑定、Ajax通信等方面,通过实例和步骤指导读者快速上手ExtJS 3.4的开发。在学习这个PDF时,读者可以...

    包含各种类型的extjs小图标,Extjs4小图标

    在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列图形图标,这些图标用于增强应用程序的视觉效果,提供用户友好的操作指示。 1. **图标分类**: - 图标通常分为不同的类别,如操作图标(比如...

    extjs实现增删查改

    在“extjs实现增删查改”这个主题中,我们将探讨如何使用ExtJS来实现基本的数据操作功能。 首先,增删查改(CRUD,Create, Read, Update, Delete)是任何数据管理应用的核心功能。在ExtJS中,我们可以利用Grid ...

    Extjs3 API

    3. 数据绑定(Data Binding):通过Store和Model,ExtJS 3实现了数据和视图之间的双向绑定,使UI能够实时反映数据变化。 二、组件体系 1. 表格(Grid):ExtJS 3的表格组件支持多列、排序、分页、过滤等功能,并能...

    Extjs 实现多行合并(rowspan)效果

    在ExtJS中实现多行合并(rowspan)的效果,通常是为了在数据表格中展示具有层次结构的数据,或者在某些特定情况下需要对表格行进行合并,以优化数据的展示。这通常涉及到对表格(GridPanel)的配置和自定义。下面...

    extjs实现的带标签、翻页动画的书

    在这个目录下,你可能会找到`.js`文件,里面包含了实现上述功能的ExtJS代码,以及可能的HTML和CSS文件来展示这个应用。开发者可能通过阅读这些代码,了解如何将ExtJS组件和动画结合起来,以创建具有翻页效果的电子书...

    ssh整合实现登录的例子,包含源代码,用extjs做的登录界面

    在这个例子中,我们将深入探讨如何利用SSH整合来实现一个登录功能,并且这个功能的前端界面是通过ExtJS库创建的。 1. **Spring框架**:Spring是核心的依赖注入(DI)和面向切面编程(AOP)框架,它管理着应用中的...

    ExtJS3X最新中文书籍.rar

    通过阅读这本中文书籍,读者可以学习到如何利用ExtJS3X创建功能丰富的Web应用程序,掌握组件的使用、数据绑定、事件处理、布局设计等关键技能。同时,对于已经熟悉JavaScript基础的开发者,这本书也会帮助他们快速...

Global site tag (gtag.js) - Google Analytics