|
|
在其中新建一個(gè)my目錄，以后所有的樣例文件都新建在這個(gè)目錄中。
1.Hello world!
先看一個(gè)Extjs版的Hello World網(wǎng)頁的全部代碼：
復(fù)制代碼 代碼如下:
<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>
運(yùn)行下，結(jié)果如下：
注意上面引入js文件的順序不能顛倒，否則不能得到正確的結(jié)果。2.Ext.MessageBox
Ext.MessageBox實(shí)現(xiàn)了常見的提示框功能。Ext.Msg是和他完全相同的對(duì)象，只是名字不一樣而已。Ext.Msg有常見的alert,confirm,promt,show等方法，都很簡單。下面通過例子來說明。Extjs的函數(shù)參數(shù)可以用通常的逗號(hào)列表分隔,也可以傳入一個(gè)具有參數(shù)名：參數(shù)值的對(duì)象。下面的例子也會(huì)有體現(xiàn)。
復(fù)制代碼 代碼如下:
<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的各個(gè)方法的參數(shù)是類似的，主要是設(shè)置標(biāo)題和提示語，以及對(duì)按鈕的設(shè)置。要注意Msg的消息框和Javascript默認(rèn)的提示框不一樣，它的彈出并不會(huì)阻止其余的代碼的執(zhí)行。要在彈出框被關(guān)閉之后執(zhí)行某些代碼必須向它傳入一個(gè)函數(shù)，fn。最后一個(gè)例子很清晰的顯示了這一點(diǎn)，彈出提示框后，下面的代碼仍然被執(zhí)行，彈出框關(guān)閉后執(zhí)行showOutput函數(shù)： 
JavaScript技術(shù)：Extjs學(xué)習(xí)筆記之一 初識(shí)Extjs之MessageBox，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
