`

extjs右下角滑出提示框

 
阅读更多

http://topic.csdn.net/u/20100722/09/71f799d2-8dce-4ac0-89c0-c97389639c2d.html

 

 仿QQ: http://www.iteye.com/topic/601055

 

Ext.namespace("Ext.ux");

Ext.ux.ToastWindowMgr = {
    positions: [] 
};

Ext.ux.ToastWindow = Ext.extend(Ext.Window, {
    initComponent: function(){
          Ext.apply(this, {
              iconCls: this.iconCls || 'information',
            width: 250,
            height: 150,
            autoScroll: true,
            autoDestroy: true,
            plain: false,
            shadow:false
          });
        this.task = new Ext.util.DelayedTask(this.hide, this);
        Ext.ux.ToastWindow.superclass.initComponent.call(this);
    },
    setMessage: function(msg){
        this.body.update(msg);
    },
    setTitle: function(title, iconCls){
        Ext.ux.ToastWindow.superclass.setTitle.call(this, title, iconCls||this.iconCls);
    },
    onRender:function(ct, position) {
        Ext.ux.ToastWindow.superclass.onRender.call(this, ct, position);
    },
    onDestroy: function(){
        Ext.ux.ToastWindowMgr.positions.remove(this.pos);
        Ext.ux.ToastWindow.superclass.onDestroy.call(this);
    },
    afterShow: function(){
        Ext.ux.ToastWindow.superclass.afterShow.call(this);
        this.on('move', function(){
               Ext.ux.ToastWindowMgr.positions.remove(this.pos);
            this.task.cancel();}
        , this);
        this.task.delay(4000);
    },
    animShow: function(){
        this.pos = 0;
        while(Ext.ux.ToastWindowMgr.positions.indexOf(this.pos)>-1)
            this.pos++;
        Ext.ux.ToastWindowMgr.positions.push(this.pos);
        this.setSize(250,150);
        this.el.alignTo(document, "br-br", [ -20, -20-((this.getSize().height+10)*this.pos) ]);
        this.el.slideIn('b', {
            duration: 2,
            callback: this.afterShow,
            scope: this
        });    
    },
    animHide: function(){
           Ext.ux.ToastWindowMgr.positions.remove(this.pos);
        this.el.ghost("b", {
            duration: 2,
            remove: true,
         scope: this,
         callback: this.destroy
        });    
    }
});  

/*Ext.onReady(function(){
 new Ext.ux.ToastWindow({
  title: '提示窗口',
  html: '测试信息',
  iconCls: 'error'
}).show(document);
})*/

 

分享到:
评论

相关推荐

    ExtJs消息提示框

    在ExtJs中,消息提示框(Notification)是用户界面交互的一个重要元素,它能够向用户显示各种类型的通知信息,如警告、确认、信息提示等。 在标题提到的"ExtJs消息提示框"中,我们关注的是如何在ExtJs应用程序中...

    extjs弹出框 n秒后消失

    在EXTJS中,弹出框(也称为警告、信息或确认对话框)是用户界面交互的重要组成部分,常用于向用户提供信息、警告或者等待用户确认操作。实现EXTJS弹出框在n秒后自动消失,我们可以利用EXTJS的定时器(Ext.util....

    轻松搞定Extjs 带目录

    - 提示框(message box) - 输入框(prompt box) - 确认框(confirm box) - 自定义消息框(自定义外观和行为) - 进度条对话框(用于长时间运行操作的反馈) #### 5. 页面与脚本分离 在Extjs中推荐使用`Ext....

    ExtJs自定义消息框

    本文将详细介绍ExtJs中三种常用的消息框——提示框(Alert)、输入框(Prompt)和确认框(Confirm)的使用方法,并通过实例演示如何在实际项目中运用这些功能。 #### 二、提示框(Alert) 提示框主要用于向用户...

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

    本资源包包含了与ExtJS 3.4相关的学习资料,包括`Ext-core.pdf`、`轻松搞定Extjs.pdf`以及`Extjs学习笔记.docx`,旨在帮助初学者或有经验的开发者更好地理解和掌握ExtJS 3.4。 `Ext-core.pdf` 是关于Ext Core的文档...

    extjs3.X 带复选框的树

    这提示我们在使用时需要注意版本兼容性,特别是在升级或降级ExtJS库时。 `tree.docx`文件可能包含了关于如何使用这个复选框树的文档,包括示例代码、配置项解释和常见问题解答。阅读这份文档可以帮助开发者更好地...

    深入浅出ExtJS 源代码

    深入浅出ExtJS 源代码深入浅出ExtJS 源代码深入浅出ExtJS 源代码深入浅出ExtJS 源代码深入浅出ExtJS 源代码

    ExtJS(ajax框架) 4.2.1

    功能丰富,无人能出其右。 无论是界面之美,还是功能之强,ext的表格控件都高居榜首。 单选行,多选行,高亮显示选中的行,拖拽改变列宽度,按列排序,这些基本功能ExtJS轻量级实现。 自动生成行号,支持checkbox...

    Extjs FineUI开发框架 FineOffice框架 OA源码

    ExtJS FineUI 开发框架与 FineOffice 框架是两个在企业级Web应用开发中常用的工具,尤其在构建OA(办公自动化)系统时。本文将深入探讨这两个框架及其在OA源码中的应用。 首先,ExtJS是一个强大的JavaScript库,...

    extjs模拟excel表格

    ExtJS 是一个强大的JavaScript 框架,专用于构建富客户端Web应用程序。它提供了一整套组件库,包括用于创建类似Excel的表格的功能。在本文中,我们将深入探讨如何使用ExtJS来模拟Excel表格,以及实现Excel的各种功能...

    信息提示小窗口Notification-ExtJS2.0.2(修正版)

    描述中的“模仿ExtJS qwikiOffice中右下角的消息提示框”表明这个修正版Notification是对ExtJS原有功能的一种定制,旨在复现qwikiOffice应用中出现的类似通知效果。qwikiOffice可能是一个使用了ExtJS的项目,它的...

    EXTjs4类似qq消息提醒

    首先,EXTjs4的通知组件(Notification)是EXTJS提供的一个轻量级弹出框,可以用来显示短暂的信息或提示。它通常用于提供反馈,类似于许多即时通讯软件中的消息提醒。EXTjs4的通知系统可以通过`Ext.tip.Toast`或`Ext...

    extjs点击右侧面板生成tab

    extjs点击右侧面板生成tab,面板是ul+li的

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败...

    extjs 4.1.1a datetimefield 日期时间选择框(修改版)

    ExtJS是一个广泛使用的JavaScript库,专门用于构建富客户端应用程序。版本4.1.1a是该库的一个迭代,提供了一套完整的组件和工具,用于创建交互式的、数据驱动的Web应用。DateTimeField是ExtJS中一个重要的组件,它...

    深入浅出EXTJS

    EXTJS深入浅出,extjs etxjs

    ExtJS智能提示Eclipse

    "ExtJS 智能提示 for Eclipse"是指在Eclipse中安装并配置Spket插件,以便在编写ExtJS代码时获得自动补全和API提示。Spket是一个为JavaScript和相关框架提供代码补全的Eclipse插件,它支持包括ExtJS在内的多个...

    Extjs+Struts2系统后台管理框架

    ExtJS 是一个强大的JavaScript库,专门用于构建富客户端(Rich Internet Applications,RIA)的Web应用程序。它提供了丰富的组件模型,包括表格、面板、菜单、工具栏等,使得开发者可以创建出具有桌面应用般用户体验...

    信息提示小窗口Notification-ExtJS2.0.2

    在给定的资料中,我们关注的是一个名为"信息提示小窗口Notification-ExtJS2.0.2"的项目,它是对ExtJS库的一个扩展,用于创建类似qwikiOffice中右下角的消息提示框。 首先,`ExtJS`是一个强大的JavaScript库,专为...

    ExtJS 7.7 SDK trial

    ExtJS 是一个强大的JavaScript框架,主要用于构建富客户端的Web应用程序,提供丰富的用户界面组件和强大的数据绑定机制。在"ExtJS 7.7 SDK trial"中,我们可以探索以下几个关键知识点: 1. **版本升级**:从7.7版本...

Global site tag (gtag.js) - Google Analytics