冷雨在线
EasyJWEB,JavaScript,Spring,JPA,MySql
半路出家,现在混JAVA.
我的首页
文章
相册
圈子
留言
管理
 
    当前所在页面:首页>>文章>>《ExtJS2.0实用简明教程》之对话框
《ExtJS2.0实用简明教程》之对话框
    作者:小雨 来源: 发表时间:2008-02-17

 
 

《ExtJS实用开发指南》印刷版3月10号推出,赶快去看看吧。 

  由于传统使用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页面中的内容:


<input id="btnAlert" type="button" value="alert框" />

  执行程序,点击上面的“alert框”按钮,将会在页面上显示如下图所示的对话框。

  除了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内容:

<input id="对话框" type="button" value="btn" />

  点击对话框按钮将会出现下面的对话框,然后选择yes或no则会用传统的提示框输出回调函数中button及text参数的内容。 

   因此,在实际的应用中,上面的代码可以改成如下的内容:

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页面:

<input id="btn" type="button" value="对话框" />

  点击上面的“对话框”按钮可以显示如下图所示的内容,如果点击OK按钮则会输入你输入的文本内容,选择cancel按钮则会提示放弃了录入,如下图所示:

  在实际应用中,可以直接使用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所示。

(版权声明:本人Blog上的所有文章版本均归EasyJF开源的冷雨所有,受法律保护,可以在互联网上进行转载,转载必须保留作者版权声明及链接;未经本人书面许可,不得把本人Blog上的文章用于出版、发行或其它商业用途。)

 

上一篇:窗口分组    下一篇:布局概述

 
 

(阅读 )   评论数(:12)
评论】 【收藏】
评论:共12条
<input id="对话框" type="button" value="btn" />
应是:
<input id="btn" type="button" value="对话框" />
评论人: 那一抹血红     评论时间: 2008-07-22 17:24:11
傻叉,开源包的东西调用下就成你的了?还版权保护
评论人: 匿名用户     评论时间: 2008-09-03 11:02:40
confirm后面的text参数有必要?
评论人: gotochenjie     评论时间: 2008-11-24 17:40:41
Tip top stuff. I'll eexpct more now.
评论人: oKwpVSxykCzEJl     评论时间: 2011-10-05 00:02:43
vtD175  <a href="http://ovyosxcvezuv.com/">ovyosxcvezuv</a>
评论人: WgyuQkbmfiwGBYIFBAb     评论时间: 2011-10-05 16:55:51
uFa8ng , [url=http://ruuhufikdxll.com/]ruuhufikdxll[/url], [link=http://oeyirnfrygip.com/]oeyirnfrygip[/link], http://acilrciavlkl.com/
评论人: EDkJyPNluvKb     评论时间: 2011-10-05 22:06:31
qbu2eX  <a href="http://aqjmublhlvye.com/">aqjmublhlvye</a>
评论人: ZYRcXXeIFztIxp     评论时间: 2011-10-06 19:27:53
MwGApx , [url=http://ezbfenquqegp.com/]ezbfenquqegp[/url], [link=http://bfqjtxasgici.com/]bfqjtxasgici[/link], http://magywlfmccyq.com/
评论人: RDqIesIphGqr     评论时间: 2011-10-09 00:25:25
It's good to get a fresh way of lkoonig at it.
评论人: grEKXTDqXhK     评论时间: 2013-01-05 00:34:25
tCxgit  <a href="http://zrscnfbztdsd.com/">zrscnfbztdsd</a>
评论人: lbUriVAQhmBoLRUe     评论时间: 2013-01-05 18:32:16
LATkwG , [url=http://xkmpvrxewyeq.com/]xkmpvrxewyeq[/url], [link=http://cxzxvyykpgie.com/]cxzxvyykpgie[/link], http://kmjcpkpjvpak.com/
评论人: YyKnvfOeqNWsrKJkEn     评论时间: 2013-01-09 03:33:29
pDDbhI , [url=http://kykdvgbpkxmx.com/]kykdvgbpkxmx[/url], [link=http://gglojhgjqgsn.com/]gglojhgjqgsn[/link], http://orugyzwnatck.com/
评论人: viUEGzVesaOZAWdxPuk     评论时间: 2013-01-09 03:34:08

发表评论:
发表人:
评论: 
验证码:
请输入前面图中的四位验证码,字母不区分大小写
  
 
关于我们 | 诚聘英才 | 联系我们 | 广告业务 | 网站地图 | 法律声明

EasyJF开源团队版权所有  建议使用1024*768分辨率