在 qwikiOffice 中看到有右下角的消息提示框,在系统中用这种提示框来提示成功或者失败信息很有用。在 ext 的论坛上看到了一个实现方案: Notification ( http://www.sencha.com/forum/showthread.php?32365-Ext.ux.Notification ),前身是 ToastWindow 。
官方 demo : http://efattal.fr/extjs-dev/examples/toastwindow/ (貌似不能访问)
我根据实际的要求,简化了 Notification 的初始化配置,并且增加了 3 个方法,修改了一个缺陷:如果提示窗口过多,就会出现窗口堆积的缺点。 (ExtJS 2.0.2)
1、方法修改:
初始化:
new Ext.ux.Notification() 或者 new Ext.ux.Notification({autoHide:true/false,hideDelay:3000});
autoHide : 信息提示窗口是否自动隐藏(可选参数)
hideDelay :延迟多久开始隐藏(可选参数)
方法
1 : showSuccess :显示成功的信息,默认在信息提示完成之后,自动隐藏窗口
参数:
title :提示窗口的标题(可选参数)
message :提示窗口的内容(可选参数)
2 : showFailure :显示失败的信息,默认在信息提示完成之后,一直显示窗口
参数:
title :提示窗口的标题(可选参数)
message :提示窗口的内容(可选参数)
3 : showMessage :显示信息。如果 success 为 true ,则显示成功信息,提示窗口在 hideDelay 毫秒后隐藏窗口。如果 success 为 false ,根据初试化 autoHide 和 hideDelay 的配置,来决定是否隐藏窗口。
参数:
title :提示窗口的标题(必填)
message :提示窗口的内容(必填)
success : true/false ,操作成功 / 失败(必填)
效果图:
注: protoculous-packer.js 声音播放器,可以删除。
2、缺陷修改
bug图:
修正版:
3、牛×er版
这个Notification修改版中没有实现提示框显示位置的设置,例如:左下角、左上角、右上角、 XY 定位显示……,但是在Ext官网上已经有一个相应的实现:http://www.sencha.com/forum/showthread.php?48135-Ext.ux.MessageWindow
MessageWindow功能很强大:左下角、左上角、右上角、XY定位显示、在目标控件上显示提示window,定时显示window……
4、代码见附件
要把测试代码解压在ext的example文件中,或者自己配置ext资源路径。
My blog:http://blog.csdn.net/liu251/archive/2010/07/22/5754310.aspx
分享到:
相关推荐
模仿ExtJS qwikiOffice中右下角的消息提示框
模仿ExtJS qwikiOffice中右下角的消息提示框
ExtJs2.0.2包 全部,包括演示部分
EXT2.0,也就是EXTJS2.0是目前最新的技术产品,很强大的功能和完善、美观的界面,是JavaScript(JS)和JAVA用户开发WEB应用程序想要美化界面必需的插件,现打包完整,下载解压后在编写的代码中相应的调用就可以了!...
extjs2.0.2及eclipse插件spket1.6.23
ExtJs Demo100个演示Demo
ExtJS是一个很不错的Ajax框架,可以用来开发带有华丽外观的富客户端应用,使得我们的b...本教程记录了前段时间本人学习ExtJS的一些心得及小结,希望能帮助正在学习或准备学习ExtJS的朋友们快速走进ExtJS2.0的精彩世界。
学习Extjs时,引入这个文件头,可以在VS2008里面进行智能提醒,Extjs里有部分功能可以提示
最后一版免费版,后面的都是要钱或要公开源码的了。
基于EXTJS插件制作的弹出提示窗口,本效果代码更新记录: v1.0(20090424) 偷窃ext window素材以及利用ext core,DD,Resizable 简化重新实现Window v1.1(20090424) 修正ie显示问题 v1.5 抄袭extjs window 拖放...
ExtJs2.0学习系列大全 共15个word文档,大部分介绍都在里面了
ExtJs 后台通用界面布局,左侧树,Center Tab 选项
完整演示包,里边有十几种皮肤已经制作成html文件演示. 方便修改....
在extjs3 window窗口中修改完数据退出,提示是否保存,未修改不提示直接退出 本程序在extjs3中测试可行
包含各种类型的extjs小图标,Extjs4小图标
ExtJS-2.0.2.zip之后的文件目录结构。 ExtJS-2.0.2开发包中有8个文件子包与8个文件,下面 分别对这些资源进行简单介绍。 • adapter目录中放置的是ExtJS的核心代码与底层库 (如jquery和prototype)的适配器,ExtJS...
Extjs 4.2分组小计
VS2008 Extjs代码提示工具 引用方法: ///<reference path="../js/vswd-ext_2.0.2.js" />
最近小弟做了Extjs实现实现下拉框联动的效果,参考了好久才学会,闲下来发一个简单的例子。。呵呵
etmvc+extjs+qwikioffice框架的开源系统jxc Desktop qwikioffice