ITPub博客

首页 > Linux操作系统 > Linux操作系统 > MessageBox对话框

MessageBox对话框

原创 Linux操作系统 作者:iDotNetSpace 时间:2009-01-14 16:41:56 0 删除 编辑

由于传统使用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框”按钮,将会在页面上显示如下图所示的对话框。

 

除了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);
        });
    });
});


点击对话框按钮将会出现下面的对话框,然后选择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页面:


代码: 全选


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

 

在实际应用中,可以直接使用MessageBox的show方法来显示自定义的对话框,如下面的代码:


代码: 全选
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按钮则会提示放弃了录入,如下图所示:

在实际应用中,可以直接使用MessageBox的show方法来显示自定义的对话框,如下面的代码:

[code]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所示。

 

 

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/12639172/viewspace-539620/,如需转载,请注明出处,否则将追究法律责任。

下一篇: xml web service
请登录后发表评论 登录
全部评论

注册时间:2008-01-04

  • 博文量
    2376
  • 访问量
    5327887