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 相关文章推荐
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
js中使用replace方法完成某个字符的转换
Aug 20 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
electron实现qq快捷登录的方法示例
Oct 22 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 Javascript
layui清空,重置表单数据的实例
Sep 12 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 Javascript
vue router 动态路由清除方式
May 25 Vue.js
基于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连接SQLServer2005的方法
2015/01/27 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
php实现向javascript传递数组的方法
2015/07/27 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
[48:35]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 TNC vs Optic
2018/04/03 DOTA
Python计算已经过去多少个周末的方法
2015/07/25 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
pyspark 随机森林的实现
2020/04/24 Python
Python实现汇率转换操作
2020/05/03 Python
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
社会实践心得体会
2014/01/03 职场文书
大学秋游活动方案
2014/02/11 职场文书
家长对学生的评语
2014/04/18 职场文书
超市客服工作职责
2014/06/11 职场文书
汇报材料怎么写
2014/12/30 职场文书
年度考核个人总结
2015/03/06 职场文书
如何理解及使用Python闭包
2021/06/01 Python
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle