热门:网页模板.net视频教程JQueryMVCjsonExtJs源码示例三级联动JQuery菜单
您现在的位置:.Net中文社区>> AJAX编程>>正文内容

详解 ExtJS弹出对话

发布时间:2010年04月02日点击数: 佚名

 

  1. Ext.onReady(function() { 
  2.                Ext.Msg.alert('提示''逗号分隔参数列表'); //这种方式非常常见的 
  3.            }); 

效果图:

  1. Ext.onReady(function() { 
  2.            //定义 JSON(配置对象) 
  3.            var config = { 
  4.                     title:'提示'
  5.                     msg: 'JSON配置方式,简单吧' 
  6.                 } 
  7.                 Ext.Msg.show(config); 
  8.             }); 

效果图:

上边我只是简单举例,好了看到了漂亮的界面了吧!接下来认识一下Ext.MessageBox
Ext.MessageBox是一个工具类,他继承自Obiect对象,用来生成各种风格的信息提示对话框,Ext.Msg是该类的别名,使用Ext.MessageBox和用Ext.Msg效果是一样的,而后者提供了更简单的方式。在介绍前,下来了解Ext.MessageBox提供的信息提示框与JavaScript提供的原始信息提示框的差别,主要表现在3个方面,他们分别是“实现方式”、“显示信息的格式”、和“对程序运行的影响”,下面对着3方面分别进行详细说明。
1、 实现方式:
标准JavaScript提供的信息提示对话框是一个真正的弹出窗口。Ext.MessageBox提供的信息提示对话框并不是真正的弹出窗口,他只是在当前页面显示的一个层(div),所以无法用窗口扑捉到软件来的到他
2、 显示信息的格式:
标准JavaScript提供的信息提示对话框中显示的内容不是HTML格式文本,而是纯文本。
不能使用HEML中的格式化方法进行排版,只能以空格、回车以及各种标点符来构建显示格式。
Ext.MessageBox提供的信息提示对话框显示的文本不仅支持纯文本显示还支持用HTML格式文本,采用HTML中的格式化方法进行排版,效果更加丰富多彩。下面是一个简单的示例。

  1. <script type="text/javascript"
  2.            alert('只能用纯文本');//这里不支持HTML格式的字符串 
  3.   </script> 

效果图:

  1. //支持html格式文本           
  2.             Ext.onReady(function()  { 
  3.             Ext.Msg.alert('<font size=4>提示</font>','<font color=red> 支持html格式文本 </font>'); 
  4.             }); 

效果图:

  1. <script type="text/javascript"
  2.           
  3.            Ext.onReady(function() { 
  4.            alert('我会停止程序的执行'); 
  5.            Ext.Msg.alert('提示','我不会停止程序的执行');          
  6.            }); 
  7.        </script> 

效果图:

  1. <script type="text/javascript"
  2.           
  3.            Ext.onReady(function() {          
  4.            Ext.Msg.alert('提示','我不会停止程序的执行'); 
  5.            alert('我会停止程序的执行'); 
  6.            }); 
  7.        </script> 

效果图:

看到效果了很简单很简单吧!下面我们了解一下怎么回调函数,一个只读信息提示框,用来代替JavaScript标准的alert()方法有一个确定按钮,如果其提供一个回调函数,则该函数将在单击按钮后被调用(包括右上角的推出按钮),所单击按钮的id将被作为唯一的参数传递到回调函数中。
调用格式:

  1. alert( String title,String msg,[function fn],[Object scope]); 
  2.   //参数说明 
  3.   title: 提示框的标题 
  4.   msg:  显示的信息内容 
  5.   [function fn]: (可选) 回调函数 
  6.   [Object scopt]: (可选) 回调函数的作用域 
  7.   返回值: 
  8.   Ext.MessageBox 
  9.    示例: 
  10.     <script type="text/javascript"
  11.   
  12.            Ext.onReady(function() { 
  13.            Ext.MessageBox.alert('提示''请单击我 确定', callBack); 
  14.                function callBack(id) { 
  15.                    alert('单击的按钮id是:'+id); 
  16.                } 
  17.            }); 
  18.        </script> 

效果图:
点击OK的效果

点击x的效果

本站热点业务

更多模板/案例展示

关于我们 | 联系我们 | 团队日志 | 网站地图 | 网站合作