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

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

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

/resources/css/ext-all.css"/>

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

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

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

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

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

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

      四种固定取值：

• Ext.MessageBox.INFO  样式： 
• Ext.MessageBox.WARNING 样式：
• Ext.MessageBox.QUESTION 样式：
• Ext.MessageBox.ERROR 样式：

   可以自定义图片：在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.一个自定义的弹出框。

  
    
	
    
    
    
    
    
	
	
	
  
  	
  
   	点击展示Ext自定义提示框效果
  

5.效果：

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