【ExtJs】模态确定框与模态输入框

最新推荐文章于 2024-04-20 12:04:09 发布

原创最新推荐文章于 2024-04-20 12:04:09 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #对话框 #模态框 #输入框 #web前端

ExtJs 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用ExtJs快速创建模态确定框与输入框，并实现简单的用户交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

确定框与模态输入框在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就是用户输入的值。