确定框与模态输入框在VC6的MFC窗体程序是不可或缺地东西,还记得在VC6的MFC搞一个模态输入框是多么蛋疼的一件事,详见《【mfc】用对话框的切换实现重新登录》(点击打开链接),但是搬到网页上,用ExtJs,几行代码就可以实现这东西。关键是兼容IE6,然后你之后就按往常一样,获取用户的输入的内容做Ajax什么都可以。
一、基本目标
先搞出如下简单的程序,当用户点按钮1,就出一个模态确定框,用户点击了什么则提示。点击按钮2,则出一个模态输入框给用户输入,用户点击确定之后能够顺利获取用户的输入信息。这东西如果单纯用JavaScript是非常蛋疼的。
二、制作过程
如何配置好ExtJs在《【ExtJs】ExtJs4.2.1的配置与Helloworld》(点击打开链接)已经说过了,这里不再赘述。
首先HTML布局非常简单,就两个按钮:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>对话框</title>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/ext-lang-zh_CN.js"></script>
<link href="ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css" >
</head>
<body>
<button id="btn1" type="button" >确定框</button>
<button id="btn2" type="button" >输入对话框</button>
</body>
</html>
之后重点说说核心脚本,分两部分,对于确定框,用如下函数就可以实现:
Ext.get("btn1").on("click", function () {
Ext.MessageBox.confirm("标题栏", "请点击任意按钮", function (btn) {
if(btn=='yes'){
Ext.Msg.alert("提示", "你点击了“是”按钮");
}
else{
Ext.Msg.alert("提示", "你点击了“否”按钮");
}
});
});
Ext的所有方法,必须以Ext为开头的。然后get的方法,相当于document.getElementbyId,onXX相当于Jquery里面的绑定XX事件。
之后这个事件的处理方式是一个函数。弹出一个MessageBox,同时这个MessageBox是一个确定框。
确定框的处理函数必须带有参数的。
用户点击“是”,则形式参数的值就为yes。
则弹出一个告警框。其中Msg是MessageBox简写。还是第一参数,就是提示标题栏,第二个参数就是提示的内容。
第二部分,是模态输入框,这东西参数较多,不过也简单易懂:
Ext.get("btn2").on("click", function () {
Ext.Msg.prompt("标题栏","请输入一些东西",function (btn, text) {
if(btn=='ok'){
Ext.Msg.alert("结果", "你输入了:" + text);
}
else{}
},this,true,"输入框初始文本");
});
基本上是同理,只是注意倒数第二个参数true,则给用户输入的文本框是多行文本框textarea,如果是false,则给用户输入的是单行文本框input type='text',最后一个参数一般不设置,这东西不是替换文本,不会自动去掉。
处理函数中,形式参数text就是用户输入的值。