Extjs學習筆記之一初識Extjs之MessageBox

更新時間：2010年01月07日 18:00:12 作者：

去官網(wǎng)下載好extjs的壓縮包，解壓縮之后得到如下目錄結構。

在其中新建一個my目錄，以后所有的樣例文件都新建在這個目錄中。
1.Hello world!
先看一個Extjs版的Hello World網(wǎng)頁的全部代碼：

 
<html> 
<head> 
<title>Extjs MessageBox</title> 
<link rel="Stylesheet" type="text/css" href="../resources/css/ext-all.css" /> 
<script type="text/javascript" src="../adapter/ext/ext-base-debug.js"></script> 
<script type="text/javascript" src="../ext-all-debug.js"></script> 
</head> 
<body> 
<script type="text/javascript"> 
Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif'; 
Ext.onReady(function() { 
Ext.MessageBox.alert('Hello', 'Hello world'); 
}); 
</script> 
</body> 
</html> 

運行下，結果如下：

注意上面引入js文件的順序不能顛倒，否則不能得到正確的結果。2.Ext.MessageBox
Ext.MessageBox實現(xiàn)了常見的提示框功能。Ext.Msg是和他完全相同的對象，只是名字不一樣而已。Ext.Msg有常見的alert,confirm,promt,show等方法，都很簡單。下面通過例子來說明。Extjs的函數(shù)參數(shù)可以用通常的逗號列表分隔,也可以傳入一個具有參數(shù)名：參數(shù)值的對象。下面的例子也會有體現(xiàn)。

復制代碼代碼如下:

 
<html> 
<head> 
<title>Extjs MessageBox</title> 
<link rel="Stylesheet" type="text/css" href="../resources/css/ext-all.css" /> 
<script type="text/javascript" src="../adapter/ext/ext-base-debug.js"></script> 
<script type="text/javascript" src="../ext-all-debug.js"></script> 
<script type="text/javascript"> 
function alertClick() { 
Ext.Msg.alert("alert", "Hello"); 
} 

function showOutput(s) { 
var area = document.getElementById("Output"); 
area.innerHTML = s; 
} 

function confirmClick() { 
Ext.Msg.confirm('Confirm','Choose one please',showOutput); 
} 

function promptClick() { 
Ext.Msg.prompt('Prompt', 'Try enter something', 
function(id, msg) { 
showOutput('You pressed ' + id + ' key and entered ' + msg); 
}); 
} 

function showClick() { 
var option = { 
title:'Box Show', 
msg: 'This is a most flexible messagebox with an info icon.', 
modal: true, 
buttons: Ext.Msg.YESNOCANCEL, 
icon: Ext.Msg.INFO, 
fn:showOutput 
}; 
Ext.Msg.show(option); 
showOutput("Hi, a box is promting,right?"); 
} 
</script> 
</head> 
<body> 
<div id='Output'></div> 
<p><button id='Button1' onclick='alertClick()'>AlertButton</button></p> 
<p><button id='Button2' onclick='confirmClick()'>ConfirmButton</button></p> 
<p><button id='Button3' onclick='promptClick()'>PromptButton</button></p> 
<p><button id='Button4' onclick='showClick()'>ShowButton</button></p> 
</body> 
</html> 

Msg的各個方法的參數(shù)是類似的，主要是設置標題和提示語，以及對按鈕的設置。要注意Msg的消息框和javascript默認的提示框不一樣，它的彈出并不會阻止其余的代碼的執(zhí)行。要在彈出框被關閉之后執(zhí)行某些代碼必須向它傳入一個函數(shù)，fn。最后一個例子很清晰的顯示了這一點，彈出提示框后，下面的代碼仍然被執(zhí)行，彈出框關閉后執(zhí)行showOutput函數(shù)：