ext4 學習筆記（二） [Ext.window.MessageBox]（白鶴翔第一季）
阿新 • • 發佈：2019-01-05
首先說明一下：
（1）本文章是針對於ExtJs 4.X ，文章中出現的5版本只是我引入的檔案是ExtJs.5.0,並不是文章是基於5版本，文章是4版本的
（2）由於註釋很全，所以文章內容就不寫那麼詳細了，直接貼程式碼還望讀者能夠理解
Ext.onReady：這個方法是Ext的準備函式，也就是Ext相關的程式碼都會在這個函式裡書寫，它比較類似於window的onload方法，但是注意其執行時機是在頁面的DOM物件載入完畢之後立即執行。
Ext.window.MessageBox：Ext.MessageBox是一個工具類，提供了各種風格的資訊提示對話方塊，也可以簡寫為Ext.Msg,這在Ext中很常見,很多元件或類都可以使用簡寫形式。
下面是關於Ext.window.MessageBox 的幾個簡單小元件例項。
alert，confirm，prompt，wait，show方法
文章中充分說明 Ext 的MessageBox 是封裝的一個div 文中等待框Ext.Msg.wait（）在例項中配置失效，出現效果但是動畫於時間，次數配置失敗，在4.1.1下正常，文章中我引入的是5.0的包，具體暫時還沒弄清楚原因，建議使用下一種方式，renderTo 可以自己定義div，如果您知道原因還希望指點，謝謝。O(∩_∩)O<span style="font-size:14px;"><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> </body> <!-- 引入EXT樣式 --> <link href="resources/ext-5.0.1-min/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" rel="stylesheet" /> <!-- 引入EXT all --> <script src="resources/ext-5.0.1-min/ext-all.js"></script> <!-- 引入EXT 國際化--> <script src="resources/ext-5.0.1-min/packages/ext-locale/ext-locale-zh_CN.js"></script> <script type="text/javascript"> //Ext.onReady 準備函式 類似於window.onload Ext.onReady(function(){ //提示資訊 Ext.MessageBox.alert('我是標題!' , 'Hello World!' , function(){ console.info(this); alert('我是回撥函式!'); } , this); //這裡充分說明 Ext.Msg.alert 不是瀏覽器的alert 只是一個DIV Ext.Msg.alert('提示資訊','ExtJS!!!'); alert("我來了，前面的Ext.Msg.alert()你是冒牌的alert"); //詢問確認框 Ext.Msg.confirm('提示資訊','確認刪除該條記錄麼?',function(op){ // yes on if(op == 'yes'){ alert('確認了!'); } else { alert('取消了!'); } }); //輸入框 //String title, String msg, [Function fn], [Object scope], [Boolean/Number multiline], [String value] Ext.Msg.prompt('我是標題!','請輸入姓名:' , function(op , val){ //op ok cancel console.info(op); console.info(val); } , this , true , '張三'); //等待框 Ext.Msg.wait('提示資訊','我是標題' ,{ interval: 1000, //迴圈定時的間隔 duration: 20000, //總時長 increment: 5, //執行進度條的次數 text: 'w...', //進度條上的文字 scope: this, fn: function(){ alert('更新成功!'); }, animate:true //更新渲染時提供一個漸進動畫效果 }); /* var progressBar = new Ext.ProgressBar({ width: 800, renderTo: Ext.getBody() });*/ //此方式於上一種方式都是建立， 4.X推薦使用Ext.create()方式 var progressBar = Ext.create('Ext.ProgressBar', { renderTo: Ext.getBody(), width: 800 }); progressBar.wait({ duration: 10000, interval: 1000, increment: 10, text: 'waiting...', scope: this, fn: function() { Ext.MessageBox.alert('Information', '更新完畢'); }, animate:true }); //show方法 Ext.Msg.show({ title:'我是自定義的提示框!!' , msg:'我是內容!!' , width:300 , height:300 , buttons:Ext.Msg.YESNOCANCEL , icon:Ext.Msg.WARNING // ERROR INFO QUESTION WARNING }); }); </script> </html></span>