（四）ExtJs自定义弹出框（show）

最新推荐文章于 2023-04-19 16:39:52 发布

fubo1990

最新推荐文章于 2023-04-19 16:39:52 发布

阅读量9.8k

点赞数

分类专栏： extjs系统学习文章标签： ajax ext extjs javascript 字体

本文链接：https://blog.csdn.net/fubo1990/article/details/50901897

版权

extjs系统学习专栏收录该内容

7 篇文章 1 订阅

订阅专栏

1.老生常谈的问题，要想使用ExtJs必须引入ExtJs相关资源。

ext相关文件（由于所建文件不同，引入资源路径不经相同，但是红色字体部分必须一致）

2.今天我们学习MessageBox.show()方法来进行自定义弹出框，它功能强大，采用config的配置方式，参数很多，可以写出满足需求个性化的弹出框。

3.列举一些常用参数，并进行分析。

（1）title：弹出框标题，String类型。

（2）msg：显示内容，String类型。

（3）closable：关闭是否能用也就是弹出框右上角的小叉是否显示，Boolean类型，默认为true。

（4）icon：显示内容前的图标。String类型。默认只提供四种固定的图标。如果需要可以修改ExtJs的原生js。

四种固定取值：

可以自定义图片：在ext-all.css样式中添加一个样式如：

.ext-mb-success {
background-image:url(../images/default/window/qq.png);
}

icon:"ext-mb-success"

（5）width：弹出框宽度。Number类型。

（6）prompt：是否带有输入框。 Boolean类型。默认为：false。

（7）multiline：是否为多行输入框。 Boolean类型。默认为：false。

（8）fn：关闭窗口后执行的回调函数。Function类型。不是必须的。没有的话，关闭弹出框不做任何响应。

（9）buttons：弹出框按钮的设置。

（10）modal：遮罩层是否起作用。Boolean类型。默认为true。

主要有以下几种：Ext.Msg.OK,Ext.Msg.OKCANCEL,Ext.Msg.CAMCEL,Ext.Msg.YESNO,Ext.Msg.YESNOCANCEL

你也可以自定义按钮上面的字： {yes:"我是yes",no:"我是no"},。若设为false，则不显示任何按钮.

下面几个参数来控制滚动条

（11）progress：是否显示进度条。Boolean类型。默认为：false。

（12）progressTest：显示在进度条上的字。 String类型。

（13）wait：是否动态显示进度条。 Boolean类型。默认为：false。

（14）waitConfig：动态显示进度条时，通过配置参数，控制进度条显示。

waitConfig参数：

  1.interval:进度的频率
  2.duration：执行进度的持续时间，超过这个时间后，interval失效，不再产生进度效果，但进度框也不会消失。
  3.fn:duration的时间到后执行的函数

4.一个自定义的弹出框。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>extShow.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<link rel="stylesheet" type="text/css" href="../ext1/resources/css/ext-all.css"/>
	<script type="text/javascript" src="../ext1/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="../ext1/ext-all.js"></script>
  </head>
  	<script type="text/javascript">
  		Ext.onReady(function(){
	  		Ext.get("test").on('click',function(){
	  			//自定义弹出框，它的功能十分强大，采用config配置的方式
	  			Ext.Msg.show({
	  				title: '标题', 
                    buttons: {'yes':'我是yes','no':'我是no'},  
                    width: 200,  
                    height: 400,  
                    closable: false,  
                    msg: '显示的内容',  
                    fn: function(button, text) {  
                        Ext.MessageBox.alert('您点击的是' + button + "输入的内容为: " + text);  
                    },  
                    icon: "ext-mb-success",  
                    prompt: true,  
                    multiline: true  
	  			})
	  		});
  		})
  	</script>
  <body>
   	<button id="test" >点击展示Ext自定义提示框效果</button>
  </body>
</html>

5.效果：

今天就到这吧。明天我们继续自定义进度条。大家对前几节有不懂的或则疑问，可以私信我。谢谢观看。

fubo1990

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
（四）ExtJs自定义弹出框（show）

1.老生常谈的问题，要想使用ExtJs必须引入ExtJs相关资源。ext相关文件（由于所建文件不同，引入资源路径不经相同，但是红色字体部分必须一致）/resources/css/ext-all.css"/>adapter/ext/ext-base.js">/ext-all.js">2.今天我们学习MessageBox.show()方法来进行自定义弹出框
复制链接

扫一扫