EXT窗口Window及对话框MessageBox


Posted in Javascript onJanuary 27, 2011

看下面的代码:

var i=0; 
function newWin(){ 
var win = new Ext.Window({ 
title:"窗口"+i++, 
width:400, 
height:300, 
maximizable:true 
}); 
win.show(); 
} 
Ext.onReady( 
function(){ 
Ext.get("btn").on("click",newWin); 
} 
);

页面中的html内容:

执行上面的代码,当点击按钮“新窗口”的时候,会在页面中显示一个窗口,窗口标题为“窗口x”,窗口可以关闭,可以最大化,点击最大化按钮会最大化窗口,最大化的窗口可以还原,如图xxx所示。
EXT窗口Window及对话框MessageBox
窗口分组

窗口是分组进行管理的,可以对一组窗口进行操作,默认情况下的窗口都在默认的组 Ext.WindowMgr中。窗口分组由类Ext.WindowGroup定义,该类包括bringToFront、getActive、 hideAll、sendToBack等方法用来对分组中的窗口进行操作。

看下面的代码:

var i=0,mygroup; 
function newWin(){ 
var win=new Ext.Window({ 
title:"窗口"+i++, 
width:400, 
height:300, 
maximizable:true, 
manager:mygroup 
}); 
win.show(); 
} 
function toBack(){ 
mygroup.sendToBack(mygroup.getActive()); 
} 
function hideAll(){ 
mygroup.hideAll(); 
} 
Ext.oReay( 
function(){ 
mygroup=new Ext.WindowGroup(); 
Ext.get("btn").on("click",newWin); 
Ext.get("btnToBack").on("click",toBack); 
Ext.get("btnHide").on("click",hideAll); 
} 
);

页面中的html代码

执行上面的代码,先点击几次“新窗口”按钮,可以在页面中显示几个容器,然后拖动这些窗口,让他们在屏幕中不同的位置。然后点“放到后台”按钮,可以实现把最前面的窗口移动该组窗口的最后面去,点击“隐藏所有”按钮,可以隐藏当前打开的所有窗口。如下图所示:
EXT窗口Window及对话框MessageBox
对话框

由于传统使用alert、confirm等方法产生的对话框非常古板,不好看。因此,ExtJS提供了一套非常漂亮的对话框,可以使用这些对话框代替传统的alert、confirm等,实现华丽的应用程序界面。
Ext的对话框都封装在Ext.MessageBox类,该类还有一个简写形式即Ext.Msg,可以直接通过Ext.MessageBox或Ext.Msg来直接调用相应的对话框方法来显示Ext对话框。看下面的代码:

Ext.onReady( 
function(){ 
Ext.get("btnAlert").on( 
"click", 
function(){ 
Ext.MessageBox.alert("请注意","这是ExtJS的提示框"); 
} 
); 
} 
);

Html页面中的内容:

执行程序,点击上面的“alert框”按钮,将会在页面上显示如下图所示的对话框。
EXT窗口Window及对话框MessageBox
除了alert以外,Ext还包含confirm、prompt、progress、wait等对话框,另外我们可以根据需要显示自下定义的对话框。普通对话框一般包括四个参数,比如confirm的方法签名为confirm ( String title, String msg, [Function fn], [Object scope] ) ,参数title表示对话框的标题,参数msg表示对话框中的提示信息,这两个参数是必须的;可选的参数fn表示当关闭对话框后执行的回调函数,参数 scope表示回调函数的执行作用域。回调函数可以包含两个参数,即button与text,button表示点击的按钮,text表示对话框中有活动输入选项时输入的文本内容。我们可以在回调函数中通过button参数来判断用户作了什么什么选择,可以通过text来读取在对话框中输入的内容。看下面的例子:

Ext.onReady( 
function(){ 
Ext.get("btn").on( 
"click", 
function(){ 
Ext.MessageBox.confirm( 
"请确认","是否真的要删除指定的内容", 
function(button,text){ 
alert(button); 
alert(text); 
} 
); 
} 
); 
} 
);

Html内容:

点击对话框按钮将会出现下面的对话框,然后选择yes或no则会用传统的提示框输出回调函数中button及text参数的内容。
EXT窗口Window及对话框MessageBox
因此,在实际的应用中,上面的代码可以改成如下的内容:

Ext.onReady( 
function(){ 
Ext.get("btnAlert").on( 
"click", 
function(){ 
Ext.MessageBox.confirm( 
"请确认", 
"是否真的要删除指定的内容", 
function(button,text){ 
if(button=="yes"){ 
//执行删除操作 
alert("成功删除"); 
} 
} 
); 
} 
); 
} 
);

这样当用户点击对话框中的yes按钮时,就会执行相应的操作,而选择no则忽略操作。

下面再看看prompt框,我们看下面的代码:

Ext.onReady( 
function(){ 
Ext.get("btn").on( 
"click", 
function(){ 
Ext.MessageBox.prompt( 
"输入提示框", 
"请输入你的新年愿望:", 
function(button,text){ 
if(button=="ok"){ 
alert("你的新年愿望是:"+text); 
} 
else 
alert("你放弃了录入!"); 
} 
); 
} 
); 
} 
);

Html页面:

点击上面的“对话框”按钮可以显示如下图所示的内容,如果点击OK按钮则会输入你输入的文本内容,选择cancel按钮则会提示放弃了录入,如下图所示:
EXT窗口Window及对话框MessageBox EXT窗口Window及对话框MessageBox
在实际应用中,可以直接使用MessageBox的show方法来显示自定义的对话框,如下面的代码:

function save(button){ 
if(button=="yes"){ 
//执行数据保存操作 
} 
else if(button=="no"){ 
//不保存数据 
} 
else{ 
//取消当前操作 
} 
} 
Ext.onReady( 
function(){ 
Ext.get("btn").on( 
"click", 
function(){ 
Ext.Msg.show({ 
title:'保存数据', 
msg: '你已经作了一些数据操作,是否要保存当前内容的修改?', 
buttons: Ext.Msg.YESNOCANCEL, 
fn: save, 
icon: Ext.MessageBox.QUESTION 
}); 
} 
); 
} 
);

点击“对话框”按钮可显示一个自定义的保存数据对话框,对话框中包含yes、no、cancel三个按钮,可以在回调函数save中根据点击的按钮执行相应的操作,如图xx所示。
EXT窗口Window及对话框MessageBox

Javascript 相关文章推荐
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
js 操作select相关方法函数
Dec 06 Javascript
潜说js对象和数组
May 25 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
javascript入门教程基础篇
Nov 16 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
基于jquery的表头固定的若干方法
Jan 27 #Javascript
jquery animate图片模向滑动示例代码
Jan 26 #Javascript
jQuery 幻灯片插件(带缩略图功能)
Jan 24 #Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 #Javascript
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 #Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 #Javascript
精选的10款用于构建良好易用性网站的jQuery插件
Jan 23 #Javascript
You might like
PHP中生成UUID自定义函数分享
2015/06/10 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
拖拉表格的JS函数
2008/11/20 Javascript
html数组字符串拼接的最快方法
2009/09/16 Javascript
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
Python 中的lambda函数介绍
2018/10/10 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
python是怎么被发明的
2020/06/15 Python
python中类与对象之间的关系详解
2020/12/16 Python
用python读取xlsx文件
2020/12/17 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
init进程的作用
2012/04/12 面试题
幼师求职自荐信范文
2014/01/26 职场文书
厂区绿化方案
2014/05/08 职场文书
学校安全防火方案
2014/06/07 职场文书
班主任与学生安全责任书
2014/07/25 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python