【ExtJs】模态确定框与模态输入框
浏览数：96 /
时间：2015年06月09日
确定框与模态输入框在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就是用户输入的值。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
