使用ExtJs3.0从零开始建立华丽客户端(7)
时间：2010-09-01 来源：展露
使用ExtJs3.0从零开始建立华丽客户端(7)
【甜蜜的蔗糖】
※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
小瓜：蔗糖老师，都已经有一个星期没有更新日志啦！
我刚刚上线不久，小瓜就发来了一个淘气的表情。
蔗糖老师：是呀是呀！终于要忙完了！
小瓜：那恭喜喽！这次我们是不是要讲对话框了呢？
蔗糖老师：嗯。这一讲我们来介绍一下对话框。
※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
蔗糖老师：首先我们要知道这些对话框都有哪些：alert(),confirm(),prompt(),show()。
蔗糖老师：这些对话框是存在于类Ext.MessageBox当中。
蔗糖老师：那么我们下面分别来介绍一下这几个对话框。
蔗糖老师：第一个是alert对话框，是我们经常见到的一个。那么我们看一下它的结构
蔗糖老师：alert( String title, String msg, [Function fn], [Object scope] )。
蔗糖老师：我们来看一下这些参数是什么意思：string title:标题栏提示文字；string msg:提示信息;[function fn]:在里面可以包含一个函数；[object scope]:范围，在默认情况下是本窗体(浏览器)。
蔗糖老师：调用这个对话框也很简单：Ext.MessageBox.alert()或者Ext.Msg.alert()。需要注意，Msg是MessageBox的简写。
蔗糖老师：上面是我们的alert,下面我们来说一下confirm()。先看一下它的结构。
蔗糖老师：confirm( String title, String msg, [Function fn], [Object scope] )。
蔗糖老师：那么它和我们上面的alert的参数是一样的，下面我们具体来看一下用法。
蔗糖老师：
代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>第五节对话框示例</title>
<script type="text/javascript" src="../ext-3.1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-3.1.1/ext-all.js"></script>
<link rel="stylesheet" href="../ext-3.1.1/resources/css/ext-all.css" />
<script type="text/javascript">
Ext.onReady(
function()
{
Ext.get("btn").on("click",function(){Ext.Msg.confirm("请确认","是否要执行这样操作？",function(button,text)
{
if(button=="yes")
{
//do somrthing
alert("你选择了执行这项操作");
}else
{
//do something
alert("你取消了执行这项操作");
}
}
)})
}
)
</script>
</head>
<body>
<input type="button" id="btn" value="点击我显示Confirm对话框" />
</body>
</html>
蔗糖老师：在function当中，我们传递了一个button参数，这个参数一般包含两种情况，“yes”或者“no”。注意是小写。
蔗糖老师：接下来我们来看一下prompt。首先还是看结构。
蔗糖老师： prompt( String title, String msg, [Function fn], [Object scope], [Boolean/Number multiline], [String value] )。
蔗糖老师：这个对话框和前两个对话框有一点区别。我们来看一下后面的两个参数是做什么用的。
蔗糖老师：那么第一个[Boolean/Number multiline]，指的是是否允许多行输入或者指定最多输入的行数。第二个[String value]，是指给对话框指定一个初始值。
蔗糖老师：我们来看一个例子：
蔗糖老师：
代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>第五节对话框示例2</title>
<script type="text/javascript" src="../ext-
3.1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-3.1.1/ext-
all.js"></script>
<link rel="stylesheet" href="../ext-3.1.1/resources/css/ext-
all.css" />
<script type="text/javascript">
Ext.onReady(
function()
{
Ext.get("btn").on("click",function()
{Ext.Msg.prompt("请输入你的姓名","姓名:",function(button,text)
{
if(button=="ok")
{
alert("你的名字叫:"+text);
}else
{
//do something
}
})})
}
)
</script>
</head>
<body>
<input type="button" id="btn" value="显示Prompt对话框" />
</body>
</html>
蔗糖老师：下面我们来说一下自定义对话框show。
蔗糖老师：自定义对话框的定义很多，具体的可以参看api文档。我在这里呢举一个例子给你看看。
蔗糖老师：
代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>第五节自定义对话框</title>
<script type="text/javascript" src="../ext-3.1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-3.1.1/ext-all.js"></script>
<link rel="stylesheet" href="../ext-3.1.1/resources/css/ext-all.css" />
<script type="text/javascript">
function save(button)
{
if(button=="yes")
{
alert("保存");
}
}
Ext.onReady(
function()
{
Ext.get("btn").on("click",function(){Ext.Msg.show(
{
title:"自定义对话框",
msg:"你是否要保存这些更改？",
buttons:Ext.Msg.YESNO,
icon:Ext.Msg.INFORMATION,
fn:save
}
)})
}
)
</script>
</head>
<body>
<input type="button" id="btn" value="使用我的自定义对话框" />
</body>
</html>
※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
小瓜：看来要记住的东西还不少呢！
蔗糖老师：是呀，我给你截几个图看看。
蔗糖老师：
蔗糖老师：那么今天就先说到这里吧，你回去要好好学习哦！
小瓜：好的好的，byebye！
相关阅读 更多 +
