extjs4 右下角弹窗

最新推荐文章于 2020-12-22 18:16:15 发布
最新推荐文章于 2020-12-22 18:16:15 发布
阅读量2.2k 收藏
点赞数 1
分类专栏： Extjs Extjs4 开发经验 

/**
 * extjs4 右下角弹窗
 */
Ext.define('Ext.ux.Tip', {
    extend: 'Ext.Window',
    alias: 'widget.tip',
    autoClose: true,
    autoHeight: true,
    plain: false,
    draggable: false,
    shadow: false,
    focus: Ext.emptyFn,
    manager: null,
    useXAxis: false,
    position: 'br',
    spacing: 6,
    paddingX: 0,
    paddingY: 39,
    slideInAnimation: 'easeIn',
    slideBackAnimation: 'bounceOut',
    slideInDuration: 1500,
    slideBackDuration: 1000,
    hideDuration: 500,
    autoCloseDelay: 3000,//关闭时间
    stickOnClick: true,
    stickWhileHover: true,
    isHiding: false,
    isFading: false,
    destroyAfterHide: false,
    closeOnMouseOut: false,
    xPos: 0,
    yPos: 0,
    statics: {
        defaultManager: {
            el: null
        }
    },
    initComponent: function() {
        var me = this;
        Ext.apply(me, {
			iconCls: me.iconCls || 'comments',
			width: 250,
			height: 150,
			autoScroll: true,
			autoDestroy: true,
			plain: false,
            border: false,
			shadow: false
		});
        if (Ext.isDefined(me.corner)) {
            me.position = me.corner;
        }
        if (Ext.isDefined(me.slideDownAnimation)) {
            me.slideBackAnimation = me.slideDownAnimation;
        }
        if (Ext.isDefined(me.autoDestroyDelay)) {
            me.autoCloseDelay = me.autoDestroyDelay;
        }
        if (Ext.isDefined(me.autoHideDelay)) {
            me.autoCloseDelay = me.autoHideDelay;
        }
        if (Ext.isDefined(me.autoHide)) {
            me.autoClose = me.autoHide;
        }
        if (Ext.isDefined(me.slideInDelay)) {
            me.slideInDuration = me.slideInDelay;
        }
        if (Ext.isDefined(me.slideDownDelay)) {
            me.slideBackDuration = me.slideDownDelay;
        }
        if (Ext.isDefined(me.fadeDelay)) {
            me.hideDuration = me.fadeDelay;
        }
        me.position = me.position.replace(/c/, '');
        me.updateAlignment(me.position);
        me.setManager(me.manager);
        me.callParent(arguments);
    },
    onRender: function() {
        var me = this;
        me.callParent(arguments);
        me.el.hover(
            function () {
                me.mouseIsOver = true;
            },
            function () {
                me.mouseIsOver = false;
                if (me.closeOnMouseOut) {
                    me.closeOnMouseOut = false;
                    me.close();
                }
            },
            me
        );
    },
    
    updateAlignment: function (position) {
        var me = this;
        switch (position) {
            case 'br':
                me.paddingFactorX = -1;
                me.paddingFactorY = -1;
                me.siblingAlignment = "br-br";
                if (me.useXAxis) {
                    me.managerAlignment = "bl-br";
                } else {
                    me.managerAlignment = "tr-br";
                }
                break;
            case 'bl':
                me.paddingFactorX = 1;
                me.paddingFactorY = -1;
                me.siblingAlignment = "bl-bl";
                if (me.useXAxis) {
                    me.managerAlignment = "br-bl";
                } else {
                    me.managerAlignment = "tl-bl";
                }
                break;
            case 'tr':
                me.paddingFactorX = -1;
                me.paddingFactorY = 1;
                me.siblingAlignment = "tr-tr";
                if (me.useXAxis) {
                    me.managerAlignment = "tl-tr";
                } else {
                    me.managerAlignment = "br-tr";
                }
                break;
            case 'tl':
                me.paddingFactorX = 1;
                me.paddingFactorY = 1;
                me.siblingAlignment = "tl-tl";
                if (me.useXAxis) {
                    me.managerAlignment = "tr-tl";
                } else {
                    me.managerAlignment = "bl-tl";
                }
                break;
            case 'b':
                me.paddingFactorX = 0;
                me.paddingFactorY = -1;
                me.siblingAlignment = "b-b";
                me.useXAxis = 0;
                me.managerAlignment = "t-b";
                break;
            case 't':
                me.paddingFactorX = 0;
                me.paddingFactorY = 1;
                me.siblingAlignment = "t-t";
                me.useXAxis = 0;
                me.managerAlignment = "b-t";
                break;
            case 'l':
                me.paddingFactorX = 1;
                me.paddingFactorY = 0;
                me.siblingAlignment = "l-l";
                me.useXAxis = 1;
                me.managerAlignment = "r-l";
                break;
            case 'r':
                me.paddingFactorX = -1;
                me.paddingFactorY = 0;
                me.siblingAlignment = "r-r";
                me.useXAxis = 1;
                me.managerAlignment = "l-r";
                break;
            }
    },
    
    getXposAlignedToManager: function () {
        var me = this;
        var xPos = 0;
        if (me.manager && me.manager.el && me.manager.el.dom) {
            if (!me.useXAxis) {
                return me.el.getLeft();
            } else {
                if (me.position == 'br' || me.position == 'tr' || me.position == 'r') {
                    xPos += me.manager.el.getAnchorXY('r')[0];
                    xPos -= (me.el.getWidth() + me.paddingX);
                } else {
                    xPos += me.manager.el.getAnchorXY('l')[0];
                    xPos += me.paddingX;
                }
            }
        }
        return xPos;
    },
    getYposAlignedToManager: function () {
        var me = this;
        var yPos = 0;
        if (me.manager && me.manager.el && me.manager.el.dom) {
            if (me.useXAxis) {
                return me.el.getTop();
            } else {
                if (me.position == 'br' || me.position == 'bl' || me.position == 'b') {
                    yPos += me.manager.el.getAnchorXY('b')[1];
                    yPos -= (me.el.getHeight() + me.paddingY);
                } else {
                    yPos += me.manager.el.getAnchorXY('t')[1];
                    yPos += me.paddingY;
                }
            }
        }
        return yPos;
    },
    getXposAlignedToSibling: function (sibling) {
        var me = this;
        if (me.useXAxis) {
            if (me.position == 'tl' || me.position == 'bl' || me.position == 'l') {
                return (sibling.xPos + sibling.el.getWidth() + sibling.spacing);
            } else {
                return (sibling.xPos - me.el.getWidth() - me.spacing);
            }
        } else {
            return me.el.getLeft();
        }
    },
    getYposAlignedToSibling: function (sibling) {
        var me = this;
        if (me.useXAxis) {
            return me.el.getTop();
        } else {
            if (me.position == 'tr' || me.position == 'tl' || me.position == 't') {
                return (sibling.yPos + sibling.el.getHeight() + sibling.spacing);                
            } else {
                return (sibling.yPos - me.el.getHeight() - sibling.spacing);
            }
        }
    },
    getNotifications: function (alignment) {
        var me = this;
        if (!me.manager.notifications[alignment]) {
            me.manager.notifications[alignment] = [];
        }
        return me.manager.notifications[alignment];
    },
    setManager: function (manager) {
        var me = this;
        me.manager = manager;
        if (typeof me.manager == 'string') {
            me.manager = Ext.getCmp(me.manager);
        }
        if (!me.manager) {
            me.manager = me.statics().defaultManager;
            if (!me.manager.el) {
                me.manager.el = Ext.getBody();
            }
        }
        if (typeof me.manager.notifications == 'undefined') {
            me.manager.notifications = {};
        }
    },
    beforeShow: function () {
        var me = this;
        if (me.stickOnClick) {
            if (me.body && me.body.dom) {
                Ext.fly(me.body.dom).on('click', function () {
                    me.cancelAutoClose();
                    me.addCls('notification-fixed');
                }, me);
            }
        }
        if (me.autoClose) {
            me.task = new Ext.util.DelayedTask(me.doAutoClose, me);
            me.task.delay(me.autoCloseDelay);
        }
        me.el.setX(-10000);
        me.el.setOpacity(1);
        
    },
    afterShow: function () {
        var me = this;
        me.callParent(arguments);
        var notifications = me.getNotifications(me.managerAlignment);
        if (notifications.length) {
            me.el.alignTo(notifications[notifications.length - 1].el, me.siblingAlignment, [0, 0]);
            me.xPos = me.getXposAlignedToSibling(notifications[notifications.length - 1]);
            me.yPos = me.getYposAlignedToSibling(notifications[notifications.length - 1]);
        } else {
            me.el.alignTo(me.manager.el, me.managerAlignment, [(me.paddingX * me.paddingFactorX), (me.paddingY * me.paddingFactorY)], false);
            me.xPos = me.getXposAlignedToManager();
            me.yPos = me.getYposAlignedToManager();
        }
        Ext.Array.include(notifications, me);
        me.el.animate({
            from: {
                x: me.el.getX(),
                y: me.el.getY()
            },
            to: {
                x: me.xPos,
                y: me.yPos,
                opacity: 1
            },
            easing: me.slideInAnimation,
            duration: me.slideInDuration,
            dynamic: true
        });
    },
    
    slideBack: function () {
        var me = this;
        var notifications = me.getNotifications(me.managerAlignment);
        var index = Ext.Array.indexOf(notifications, me)
        if (!me.isHiding && me.el && me.manager && me.manager.el && me.manager.el.dom && me.manager.el.isVisible()) {
            if (index) {
                me.xPos = me.getXposAlignedToSibling(notifications[index - 1]);
                me.yPos = me.getYposAlignedToSibling(notifications[index - 1]);
            } else {
                me.xPos = me.getXposAlignedToManager();
                me.yPos = me.getYposAlignedToManager();
            }
            me.stopAnimation();
            me.el.animate({
                to: {
                    x: me.xPos,
                    y: me.yPos
                },
                easing: me.slideBackAnimation,
                duration: me.slideBackDuration,
                dynamic: true
            });
        }
    },
    cancelAutoClose: function() {
        var me = this;
        if (me.autoClose) {
            me.task.cancel();
        }
    },
    doAutoClose: function () {
        var me = this;
        if (!(me.stickWhileHover && me.mouseIsOver)) {
            me.close();
        } else {
            me.closeOnMouseOut = true;
        }
    },
    removeFromManager: function () {
        var me = this;
        if (me.manager) {
            var notifications = me.getNotifications(me.managerAlignment);
            var index = Ext.Array.indexOf(notifications, me);
            if (index != -1) {
                Ext.Array.erase(notifications, index, 1);
                for (;index < notifications.length; index++) {
                    notifications[index].slideBack();
                }
            }
        }
    },
    hide: function () {
        var me = this;
        if (me.isHiding) {
            if (!me.isFading) {
                me.callParent(arguments);
                me.isHiding = false;
            }
        } else {
            me.isHiding = true;
            me.isFading = true;
            me.cancelAutoClose();
            if (me.el) {
                me.el.fadeOut({
                    opacity: 0,
                    easing: 'easeIn',
                    duration: me.hideDuration,
                    remove: me.destroyAfterHide,
                    listeners: {
                        afteranimate: function () {
                            me.isFading = false;
                            me.removeCls('notification-fixed');
                            me.removeFromManager();
                            me.hide();
                        }
                    }
                });
            }
        }
        return me;
    },
    destroy: function () {
        var me = this;
        if (!me.hidden) {
            me.destroyAfterHide = true;
            me.hide();
        } else {
            me.callParent(arguments);
        }
    }
});

重庆-传说
关注
专栏目录
Ext.window从右下角弹出/隐藏
08-03
从右下角动态弹出window，显示1分钟后自动隐藏，然后再弹出，类似MSN登录提醒。
包含各种类型的extjs小图标，Extjs4小图标
03-28
在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列图形图标，这些图标用于增强应用程序的视觉效果，提供用户友好的操作指示。 1. **图标分类**： - 图标通常分为不同的类别，如操作图标（比如...
extjs4.1 login tip
zhengyuechuan的专栏
12-05 1952
//欢迎提示框 var tip=Ext.create('widget.uxNotification', { title: '欢迎您：'+_userName, position: 'br', width: 260, iconCls: 'ux-notification-icon-information', a
Extjs 轻松实现窗口右下角短消息提示功能
srbjh888的专栏
08-16 2513
Extjs 轻松实现窗口右下角短消息提示功能的基本原理：（基于Extjs3.0版本） 分别创建2个窗体，2个窗体相互切换，当现实A时B退出，当现实B时A退出。里面带有动画效果。             Ext.onReady(function () {             var eBody = Ext.getBody();             //
ExtJs实现类似QQ的右下角消息弹出框 (2013-04-01 19:04:43)转载▼
gaoqiao1988的专栏
05-27 2045
ExtJs实现类似QQ的右下角消息弹出框 (2013-04-01 19:04:43)转载▼ 标签： extjs 数据库轮询 弹出框 定时任务 it 分类： web开发技术 以下为ExtJs实现的右下角提示框，弹出框的位置样式可以根据自己的喜好设置，以下是轮询数据库获取最新的消息，再弹出提示框的例子。 Ext.onReady(function() {  //设置自动刷新轮询数据库，弹
用Extjs3实现右下角小贴士
方豆作坊
07-01 148
:D 代码挺简单，主要是位置设定、新建Ext.WindowGroup并设置zseed、自动关闭处理。 其它就是Ext的继承而已了 [code="java"] Ext.ns('MyLib'); /** * 右下角的小贴士窗口 * @author tipx.iteye.com * @params conf 参考Ext.Window * conf中添加a...
ExtJs4官方的api文档及示例
01-02
很实用的示例及文档。版本为4.1，对初学者以及开发人员很有帮助。 很实用的示例及文档。版本为4.1，对初学者以及开发人员很有帮助。
Extjs4.X下comboboxTree下拉树型菜单，完美支持多选、单选，绝对好用
10-23
同时，还需要配置`mode`为`EXTJS4`特有的`EXTJS4`模式，以启用树结构的多选功能。 3. **数据源与模型** 数据源通常通过`store`属性指定，可以是本地数据或者远程加载的数据。对于树形结构，需要使用`TreeStore`，...
extJs3升级extjs4方案
04-22
ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码，主要是因为 ExtJS4 配备了一类新的系统，不向后兼容。在 ExtJS 3 里生成表的几个框架组件，ExtJS4 大多生成 div，这使得 CSS classes 将会失败...
extjs4-教程
11-07
### ExtJS4基础教程知识点 #### 1. ExtJS4开发环境搭建 ExtJS4是使用JavaScript进行开发的框架，专门用于构建富互联网应用（RIA）。搭建ExtJS开发环境需要预先安装一些软件和配置开发环境。以下步骤详细介绍了如何...
jQuery屏幕右下角消息提示框
05-09
屏幕右下角消息提醒框，支持设置时间自动隐藏，支持隔段时间循环提醒，测试过IE和chrome，无误。用了jQuery的slideUp等函数实现。
Extjs 右下角弹出框 可弹出多个 冒泡小窗体
weixin_30469895的博客
04-15 91
TipsWindow对象声明 Ext.ns('Ext.ux'); /** * 右下角的小贴士窗口 * @author tipx.javaeye.com * @params conf 参考Ext.Window * conf中添加autoHide配置项, 默认3秒自动隐藏, 设置自动隐藏的时间(单位:秒), 不需要自动隐藏时设置为false * @注: 使用独...
ext右下角浮动窗口
知了的博客
10-13 540
第一种 [code="java"] 无标题文档 #test { width:250px; height:0px; position:absolute; right:0; bottom:0; border:1px solid #999999; margin:0; padding:1px; over...
深入浅出ExtJS 弹出窗口
wei_wenlong的博客
08-20 1051
一、 Ext.MessageBox 1 7.1 Ext.MessageBox 2 //Ext.MessageBox为我们提供的alert/confirm/prompt等完全可以代替浏览器原生; 3 7.1.1 Ext.MessageBox.alert() 4 Ext.MessageBox.alert('标题','内容',function(btn){ 5 //参数一...
学习Extjs4 (1) 提示框 Ext.MessageBox
12-18 301
今天主要记录一下学习的Ext.MessageBox。 废话少说 直接上代码和效果 预备代码(javascript)： Ext.MessageBox有个简写形式：Ext.Msg 这两种使用效果是一样的。 1 Ext.require(["*"]); 2 3 var DemoFunc = { 4 evtAfterClick: funct...
ext 打包桌面应用程序_使用Ext构建富Internet应用程序
12-14 204
ext 打包桌面应用程序 Ext（可从extjs.com获得 ）是一个JavaScript开发框架，由受人尊敬JavaScript专家Jack Slocum发起和维护。 通过提供不断增长JavaScript类结构来解决与使用JavaScript开发富Internet应用程序（RIA）相关的许多常见问题，Ext可以潜在地为您节省数月的Web应用程序工作量。 在本文中，我将向您简要介绍Ext的本质...
extjs 右下角弹出消息框
weixin_30783913的博客
08-24 374
var eBody = Ext.getBody(); //施工单位 代办 提示窗体 function InitWindowMessage(eBody) { //var eBody = Ext.getBody(); //短消息窗基本配置 var msgWinConfig = { width: 300, height: 200 }; v...
Extjs 各种框
www.v5qq.com的技术博客
10-16 314
1.ExtJs之消息框： 语法：Ext.MessageBox.alert(String title, String msg,Function fn, Obejct scope); 参数定义： title: 标题 msg: 提示内容 fn: 提示框关闭之后自动调用的回调函数 scope: 作用域，用于指定this指向哪里 例如： Js代码 ExtJsAlert=fu...
extjs 关闭弹出窗口_ExtJs弹出窗口
weixin_39968640的博客
12-22 619
1、Ext.Msg.alert(String title, String msg, [Function fn], [Object scope])显示一个标准的带有一个“确定”按钮的只读消息框(类似于基本的JavaScript警告提示)。参数：title : 标题msg : 提示消息fn : 消息框关闭后调用的回调函数scope : 回调函数被执行的范围(this 引用，默认指向window)eg:...
深入理解Extjs4 MVC架构：下篇
"这篇文章除了介绍EXTJS4 MVC架构的应用，还涉及到组件查询、事件监听、控制器操作以及视图窗口的创建。" EXTJS4的MVC架构是为了解决大型客户端应用的组织和维护问题而设计的。在EXTJS4中，MVC模型包括模型（Model...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值