ExtJSでHello, Worldを表示させる

ExtJS はWebアプリケーションを開発するためのJavaScriptライブラリです。
元々はYUIを拡張するアドオンライブラリでしたが、現在は他のライブラリに依存する部分がなくなり、単体で利用することができるようになりました。
こういったライブラリを使用することで、容易に見栄えがあるGUIを作ることができます。

お試しでHello, Worldを表示させてみましょう。

まずはHTMLファイルを作成します。

hello.htmlのソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Hello World</title>
    <link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
    <script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="lib/ext/ext-all-debug.js"></script>
    <script language="javascript" src="hello.js"></script>
</head>
<body>
</body>
</html>

6～8行目の3行はほぼデフォルトな定義です。
（ディレクトリ構成は適時読み替えてください）
8行目で今回はext-all-debug.jsを読み込んでいますが、本番時？はext-all.jsを読み込みます。

9行目で今回使用するhello.jsを読み込みます。

今回は単純にメッセージアラートで「Hello, World」を表示させます。

hello.jsのソース
Ext.onReady(function(){
    Ext.Msg.alert(
        'Alert',
        'Hello, World!'
    );
});
hello.htmlを開くとこんなダイアログが表示されるはずです。

コメント

コメントを投稿

・コメントはお気軽にどうぞ。
・記事に関係のないコメントはご遠慮ください。
・<b>, <i>, <a> などの一部の HTML タグを使用できます。