`
dingherry
  • 浏览: 67067 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

Ext.Window滑入滑出效果

 
阅读更多
项目有个模块,进去模块后,页面右下角会滑出一个向上的窗体,窗体内容区提示一些内容。

顿生好奇之心,赶紧去看看源码,,尼玛自己封装的!经过几次修改,想加入自己的元素,但愣是不生效。而且滑出的窗口,拖动后还BUG不断~~~

自己写个简易的好了,供以后设计时用到:

function getMsgWindow(errorInfo){
	msgWindow = msgWindow || new Ext.Window({
		title : '提示窗口',
		width : 210,
		height : 100,
		autoScroll : true,
		autoDestroy : true,
		closable : false, 
		plain : false,
		shadow : false,
		draggable : false ,
		html :errorInfo, iconCls : 'error' 
	});
	//show时窗口自下而上滑动
	msgWindow.on('show',function(){
		msgWindow.setPosition(document.documentElement.scrollWidth , document.documentElement.scrollHeight);
		msgWindow.el.alignTo(document, "br-br", 
				[ -0,-20 - ((msgWindow.getSize().height + 10) * 0.1) ]);
		msgWindow.el.slideIn('b', {
		  	    duration : 1,
		  	    callback : null,
		  	    scope : this
		});
	});
    msgWindow.show();
}

function optionWindow(tipsInfo){
	try{
		if(msgWindow == null){
			getMsgWindow(tipsInfo);
		}else{
			msgWindow.show();
		}
		(new Ext.util.DelayedTask(function(){
			   msgWindow.hide();
		},this)).delay(3000);
	}catch(e){
		getMsgWindow(tipsInfo);	}
}



用法:
调用optionWindow。其中tipsInfo表示窗体内要展示的信息。

注:都是EXT的东东,在msgWindow.on('show'这个监听里,你可以完成自己的事。

扩展:可以做一些改变,使窗体的滑出位置可控。

分享到:
评论

相关推荐

    一个简单的Ext.Window中插入图片的例子

    在Ext JS这个强大的JavaScript框架中,`Ext.Window`是一个常用组件,用于创建浮动、可弹出的窗口。在Web应用程序中,我们常常需要在这些窗口中展示各种内容,包括文字、表格、按钮,当然还有图片。本文将详细介绍...

    Ext.window从右下角弹出/隐藏

    ### Ext.window从右下角弹出/隐藏:深入解析与实现 #### 一、概述 在Web应用开发中,为了提升用户体验,开发者经常会利用各种UI框架来实现丰富的交互效果。ExtJS作为一款成熟且功能强大的JavaScript框架,在这方面...

    Ext.window的一个扩展组件SuperWin.js

    Ext.window的一个扩展组件SuperWin.js.可灵活自主随意定位,和显示模式;

    Ext.get与Ext.fly的区别

    ### Ext.get与Ext.fly的区别 在Ext JS框架中,`Ext.get`和`Ext.fly`是两个非常重要的方法,它们主要用于操作DOM元素。理解这两个方法之间的区别以及如何使用它们对于开发高质量、高效率的应用程序至关重要。 #### ...

    EasyExt_003_第一个组件Ext.Window

    EasyExt_003_第一个组件Ext.Window EasyExt_003_第一个组件Ext.Window

    extjs-Ext.ux.form.LovCombo下拉框

    在EXTJS框架中,`Ext.ux.form.LovCombo`是一种自定义组件,它扩展了基本的`Ext.form.field.ComboBox`,提供了更丰富的功能,尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”(即“Look Up Value”...

    Ext-window属性

    【Ext.Window属性详解】 在Ext JS中,`Ext.Panel`是一个强大的组件,它可以用来创建各种复杂的用户界面。当Panel被用作窗口时,它通常会继承或包含`Ext.window.Window`的一些属性。以下是对`Ext.Panel` API中与`...

    Ext.Ajax.request2.x实现同步请求

    在EXTJS库中,`Ext.Ajax.request`是用于发送Ajax请求的核心方法,它支持异步和同步操作。本文将详细解析如何利用`Ext.Ajax.request`实现同步请求,并探讨其背后的原理和注意事项。 首先,我们需要理解Ajax的本质,...

    Ext.data.Store的基本用法

    ### Ext.data.Store的基本用法详解 #### 一、Ext.data.Store简介 `Ext.data.Store`是ExtJS框架中用于管理数据的核心组件之一。它主要负责数据的存储、加载、更新等操作,并且提供了多种方法来方便地处理这些数据。...

    org.restlet.ext.spring.jar

    org.restlet.ext.spring.jar

    Ext.get与Ext.fly 的区别

    在EXTJS这个强大的JavaScript框架中,`Ext.get`和`Ext.fly`是两个非常重要的方法,它们都用于操作DOM元素,但它们之间存在着微妙的差异。了解这些差异对于优化代码性能和理解EXTJS的工作机制至关重要。 首先,`Ext....

    EXT.form组件

    EXT.form组件的灵活性和丰富性使得开发者可以轻松地构建出符合需求的复杂表单,同时提供了一套完整的验证机制,确保用户输入的数据质量。通过组合使用这些组件,开发者可以创建出功能强大的前端表单应用。

    Ext.Store的获取方法

    在Ext.js中,`Ext.Store`是用来管理数据的类,它通常与各种UI组件(如Grid、ComboBox等)关联,用于存储和检索数据。然而,获取`Ext.Store`的方式并不像获取其他Ext组件那样直接,因为Store并不是一个具有可视界面的...

    Ext.tree.TreeLoader附带封装的json类

    在本文中,我们将深入探讨`Ext.tree.TreeLoader`与JSON数据在Ext JS框架中的应用。`Ext.tree.TreeLoader`是Ext JS库中的一个组件,它负责加载和解析树形结构的数据,而JSON(JavaScript Object Notation)则是一种轻...

    EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档

    EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档...

    Ext.js教程和Ext.js API

    通过结合中文API文档和教程,开发者可以全面掌握Ext.js 3.0的使用,从而构建出高效、用户体验良好的Web应用程序。虽然现在有更新的版本(如Ext JS 7.x),但学习旧版本有助于理解框架的发展历程,同时许多核心概念在...

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...

    Ext3.2的Ext.data.Store类和Ext.Ajax类的实际运用

    环境:Window XP Sp2、Tomcat 6.0、...关于Ext.data.Store类,我们可以看出:该框架提供了客户端缓存的功能--这对于我们框架系统是非常有帮助的。本示例代码注释非常详细。 阅读对象:需要使用Ext框架进行Web开发的人员

    vbe6ext.olb

    运行Microsoft office时,vbe6ext.olb不能加载

    Ext.window

    NULL 博文链接:https://oppovaan.iteye.com/blog/627655

Global site tag (gtag.js) - Google Analytics