Ext JSのMessageBox

Ext JSでHello Worldで、「Hello World」と表示してみましたが、ここではExt.MessageBoxを使用してHello Worldを 表示してみます。

public_htmlフォルダに次のHTMLファイルを用意します。(※ここでは、ext-all-debug.jsを使用していますがリリースする際はext-all.jsに変更します)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
        <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext/ext-all-debug.js"></script>
        <script type="text/javascript" src="main.js"></script>
        <title>New Web Project</title>
    </head>
    <body>
        <h1>New Web Project Page</h1>
    </body>
</html>

JavaScript用のファイル(main.js)を作成します。

Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
 
Ext.onReady(function() {
    Ext.Msg.alert('Message','hello world')
});

Ext.MessageBoxのエイリアスとしてExt.Msgが設定されているので、Ext.Msg.alertとしています。

第一引数にタイトル,第二引数にメッセージを指定します。HTMLファイルを表示すると次のように表示されます。

Hello Worldのイメージ

MessageBoxでできること

このMessageBoxクラスでは、ダイアログボックスや入力用のダイアログなども表示することが出来ます。

// ダイアログボックスの例
Ext.onReady(function() {
  Ext.Msg.show({
     title:'Message Title',
     msg: 'Hello World',
     buttons: Ext.Msg.OKCANCEL,
     icon: Ext.Msg.INFO
   });
});

実行すると次のように表示されます。

ダイアログボックスの例

入力ダイアログを作成するには、Ext.Msg.promptを使用します。

Ext.onReady(function() {
  Ext.Msg.prompt('Name', '名前を入力してください:', function(btn, text){
    if (btn == 'ok'){
      Ext.Msg.alert('Name',text);
    }
  });
});

第三引数にコールバック関数を渡すことで、入力されたテキストや押されたボタンを取得することが出来ます。

入力用ダイアログボックスの例