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
  });
 });