情報アイランド

「情報を制する者は世界を制す」をモットーに様々な情報を提供することを目指すブログです。現在はプログラミング関連情報が多めですが、投資関連情報も取り扱っていきたいです。

Ext JSでHello World.

導入方法は探せばすぐ見つかるので触れません。

Ext JSを使って何か処理をする場合は、通常Ext.onReadyの中で行います。エントリポイントのようなものだと思えば良いかと思います。

Ext.onReady(function()
{
    //処理
});

最初なので、定番のHello World.をメッセージボックスで表示してみようと思います。

その前に、以降の記事でサンプルのテストを実行する為のテンプレートとなるHTMLページを作っておきます。

以後、サンプルではExt.onReady(と関数定義等)だけを示し、テンプレート部分は省略することになります。

尚、テストには、Fx3 RC1を使用しています(以降、記事執筆時点でのFxの最新版でテストします)。

以下がテンプレートのHTMLとCSSです。ブログのデザインを模したものとなっています。

ヘッダをクリックするとメニューが表示されるようになっています。

★HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>○○のブログ</title>
    <link rel="Stylesheet" href="StyleSheet1.css" type="text/css"/>

    <script type="text/javascript" src="ext-2.1/ext-2.1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext-2.1/ext-2.1/ext-all-debug.js"></script>
    <link rel="stylesheet" type="text/css" href="ext-2.1/ext-2.1/resources/css/ext-all.css"/>

    <script type="text/javascript" language="javascript">
    //Ext処理のエントリーポイント
    Ext.onReady(function()
    {
    });

    //イベントの追加(クロスブラウザ対応)
    function Observe(target, type, listener)
    {
        target.addEventListener ? target.addEventListener(type, listener, false) : target.attachEvent('on' + type, function() { listener.call(target, window.event); });
    }

    Observe(window, "load", function()
    {
        //メニューの表示・非表示
        Observe(document.getElementById("blogname"), "click", function()
        {
            if(document.getElementById("floatmenucontainer").style.left != '0%')
                document.getElementById("floatmenucontainer").style.left = '0%';
            else
                document.getElementById("floatmenucontainer").style.left = '-1000%';
        });
    });
    </script>

</head>
<body>
    <div id="container">
        <div id="header"><div id="blogname">○○のブログ</div>
            <div id="floatmenucontainer">
                <div id="floatmenu">
                </div>
            </div>
        </div>
        <div id="menu">
            メニュー
        </div>
        <div id="main">
            メイン
        </div>
        <div id="footer">
            フッター
        </div>
    </div>
</body>
</html>

★CSS

body
{
        text-align: center;
        font-family: MS ゴシック;
}

div#container
{
        width: 800px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        background-color: Black;
}

div#header
{
        background-color: Aqua;
}

div#menu
{
        float: left;
        width: 200px;
        background-color: Red;
}

div#main
{
        float: right;
        width: 600px;
        background-color: Yellow;
}

div#footer
{
        clear: both;
        background-color: Orange;
}

div#floatmenucontainer
{
        position: relative;
        left: -1000%;
}

div#floatmenu
{
        position: absolute;
        width: 800px;

        overflow: auto;
        margin-left: auto;
        margin-right: auto;
        background-color :White;
}

では、メッセージボックスを表示させてみましょう。

Ext.MessageBox.showを使えば実現出来ます。

Ext.MessageBox.show(
{
    title: タイトルバーに表示する文字列,
    msg: メッセージの内容,
    width: 幅,
    buttons: ボタンの種類
});

下の様にするとページのオープン時にメッセージボックスが表示されます。

Ext.onReady(function()
{
    Ext.MessageBox.show(
    {
        title: "タイトル",
        msg: "Hello World.",
        width: 400,
        buttons: Ext.MessageBox.OK
    });
});

(第1回終)

pizyumi
プログラミング歴19年のベテランプログラマー。業務システム全般何でも作れます。現在はWeb系の技術を勉強中。
スポンサーリンク

-ExtJS