Ext学习笔记7-对话框

18-Ext.Msg

* Ext 中的对话框是异步的，不会阻止javaScript运行，因此对于用户确认后才能执行的代码也需要放到回调函数中

* 关于Ext.MessageBox.show([object config])的使用方法

 [object config] 常见配置见下表(只是部分)

配置项	类型	说明
title	String	略
msg	String	略
width	String	略
closable	Boolean	对话框右上角的关闭按钮,默认未true, 如果一设置wait或progress为true则该配置将被忽略 ,提示框只能通过程序关闭
modal	Boolean	true为模式窗口,false为非模式窗口
fn	Function	回调函数
buttons	Object/Boolean	一个包含配置信息的json对象或false不显示任何按钮, 默认为false; 系统自带的按钮如下: Ext.Msg.OK  Ext.Msg.CANCEL  Ext.Msg.OKCANCEL  Ext.Msg.YESNO  Ext.Msg.YESNOCANCEL
progress	Boolean	true则显示一个进度条,默认为false,该进度条需要有程序控制滚动
progressText	String	进度条上显示的文字
wait	Boolean	true则显示一个自动滚动的进度条,默认为false
prompt	Boolean	true则显示一个单行文本域,默认为false
value	String	如果prompt设置为true,则value值将显示在文本域中
multline	Boolean	如果prompt设置为true,且multiline也为true,则显示多行文本区域,false显示单行文本区域
icon	String	一个样式文件,它为对话框提供一个背景图,Ext自带的有: Ext.Msg.ERROR, Ext.Msg.INFO, Ext.Msg.QUESTION, Ext.Msg.WARNING

 

* 一个示例:

  Ext.onReady(function(){
   Ext.MessageBox.show({
   title:'提示',
   msg:'我有三个按钮，和一个多行文本区。',
   modal:true,
   prompt:true,
   value:'请输入',
   fn:callBack,
   buttons:Ext.Msg.YESNOCANCEL,
   icon:Ext.Msg.QUESTION 
  })
  function callBack(id,msg){
   alert('单击的按钮ID是：'+id+'\n'+'输入的内容是：'+msg);
  }
   });

* Ext.MessageBox的其他功能

1.改变默认的按钮文字,示例如下

方法1(改变所有按钮默认文字):

Ext.onReady(function(){
  //必须放在创建提示框之前
  Ext.MessageBox.buttonText={
   yes:'按钮一',        //一定要三个按钮同时设置,否则没有设置的按钮一旦用到了,就会显示空白文本
   no:'按钮二' ,
   cancel:'按钮三'
  }
  Ext.MessageBox.show({
   title:'提示',
   msg:'自定义按钮文字',
   modal:true,
   buttons:Ext.Msg.YESNOCANCEL
  })
 });

方法2(改变某种按钮的的默认文字):

Ext.onReady(function(){
  //必须放在创建提示框之前
  Ext.MessageBox.buttonText.yes ='按钮一'; 
  Ext.MessageBox.buttonText.no = '按钮二'; 
  Ext.MessageBox.show({
   title:'提示',
   msg:'自定义按钮文字',
   modal:true,
   buttons:Ext.Msg.YESNOCANCEL
  })
 });

2.动态更新提示框(缺点:每更新一次,提示框会回到初始位置)

调用格式:updateText([String text]);

示例:Ext.onReady(function(){
  var msgBox = Ext.MessageBox.show({
   title:'提示',
   msg:'动态跟新的信息文字',
   modal:true,
   buttons:Ext.Msg.OK
  })
  //Ext.TaskMgr是一个功能类，用来定时执行程序，
  //在这里我们使用它来定时触发提示信息的更新。
  Ext.TaskMgr.start({
   run:function(){
    msgBox.updateText('会动的时间：'+new Date().format('Y-m-d g:i:s A'));
   },
   interval:1000
  });
 });

3.动态更新进度条及提示信息

调用格式:updateProgress(Number value, String progressText, String msg)  //该方法在progress:true的情况下会生效

参数说明:

value : 0~1之间的数字,默认为0.
progressText : 进度条上显示的文字
msg : 显示的信息内容

示例代码:

Ext.onReady(function(){
  var msgBox = Ext.MessageBox.show({
   title:'提示',
   msg:'动态跟新的进度条和信息文字',
   modal:true,
   width:300,
   progress:true
  })

  var count = 0;//滚动条被刷新的次数
  var percentage = 0;//进度百分比
  var progressText = '';//进度条信息

  Ext.TaskMgr.start({
   run:function(){
    count++;
    //刷新10次后关闭信息提示对话框
    if(count > 10){
     msgBox.hide();
    }
    //计算进度
    percentage = count/10;
    //生成进度条文字
    progressText = '当前完成度：'+percentage*100 + "%";
    //更新信息提示对话框
    msgBox.updateProgress(percentage,progressText,
     '当前时间：'+new Date().format('Y-m-d g:i:s A'));
    
   },
   interval:1000
  });
 });