ExtJS 学习系列（2）---Message Box 详解（1）

最新推荐文章于 2024-01-06 23:30:00 发布

weixin_34217773

最新推荐文章于 2024-01-06 23:30:00 发布

阅读量103

点赞数

文章标签： javascript ViewUI

1.回顾

上一讲在入门的配置中，简单的介绍了ExtJS的下载和配置。简单用一个Message box 显示了通俗的Hello world 对话框的弹出。究竟Message是如何使用的，事件是如何触发的呢。ExtJS提供了一套强大的事件处理机制，通过这些事件处理机制来响应用户的动作、监控控件状态变化、更新控件视图信息、与服务器进行交互等等。事件统一由Ext.EventManager对象管理，与浏览器W3C标准事件对象Event相对应，Ext封装了一个Ext.EventObject事件对象。支持事件处理的类(或接口)为Ext.util.Observable，凡是继承该类的组件或类都支持往对象中添加事件处理及响应功能。
首先回顾一下从前我们在处理普通的JS代码时候是如何使用的：

Code
<script>
    function f()
    {
        alert('Hello World');
    }
</script>
<input id="btn1" type="button" onclick="f();" value="alert" />

在从前我们通过onclick方法触发js里面的函数。显然，结果是单击btn1按钮，触发f（）函数，弹出窗口。

2.ExtJS中，方法的调用。

其事件的处理和普通的没有什么太大的区别。如下：

Code
<script>
function f()
{
alert('blablabla');
}
Ext.onReady(function(){
Ext.get("btn1").addListener("click",f);
});
</script>
<input id="btn1" type="button" value="alert " />

Ext.get("btn1")的到btn按就关联的Element对象，可以直接调用对象的方法addListerner给其添加事件。第一个参数表示时间的名称，而第二个参数表示时间处理器或者是整个响应函数。我们通常使用addListerner的别名on来代替它。因为这个方法实在太普遍了。on简单方便。达到同样的效果。效果如下图所示。

3.Message Box API 简介（1）

l alert( String title, String msg, [Function fn], [Object scope] ) : Ext.MessageBox

显示一个只读对话框，可就是弹出一个窗口，并且带一个OK按钮。如果用户点击了button按钮触发了事件，并且函数是正确的，就会触发这个函数，并且这个按钮的id会成为唯一的一个参数传个回调函数。 (当然了，弹出的窗口是可以通过右上角的红叉关闭的). 这个函数基本不用演示了，效果和上面的一样。

参数

title : String

标题

msg : String

body里面的信息内容

fn : Function

（可选的）在回调方法唤醒之后关闭

scope : Object

回调方法的范围。

Returns:

Ext.MessageBox

l confirm( String title, String msg, [Function fn], [Object scope] ) : Ext.MessageBox

弹出带有YES和cancel的窗口。其余的通alert函数。点击了右上角的红叉关闭，相当于点击了cancel按钮。

参数：

title : String

标题

msg : String

窗口内部内容

fn : Function

(可选的) 消息框关闭之后，回调函数生效。

scope : Object

(可选的) 回调函数的范围。

Returns:

Ext.MessageBox

Code
<head runat="server">
    <title>HelloWorld</title>
<link rel="stylesheet" type="text/css" href="ExtJS/CSS/ext-all.css" />
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ExtJS/ext-all.js"></script>
<script type = "text/javascript">
function f()
{
confirm('blablabla');
}

Ext.onReady(function(){
Ext.get("btn1").addListener("click",f);
     });

</script>
</head>

唐僧一句，使用者千万别忘了使用之前添加引用。不然什么都找不到。废话不多说，看confirm效果。一个OK和一个cancel按钮。