Ext JS入門2 Ext JSでHello, Worldを作ってみる
HTMLを用意する。
まずHTMLファイルを作成して、Ext JSの読み込みます。ext-base.jsは必須のファイルです。ext-all.jsはExt JSのクラスを全て読み込みます。ext-all.jsを使うと実際に使っていないJSファイルまで読み込んでしまいますが、普段はこちらを使うようにします。ext-all.jsを読み込むことでExt JSの機能をフルで使うことができるので、こちらを読み込んで全部Ext JSでExt JSの機能をバリバリ使いましょう。
ext-all.cssはExt JSのデフォルトのスタイルが定義されています。ボタンやパネルなどのExtJSのユーザーインターフェース（UI）はこのスタイルシートに依存しているため、ExtのUIを使う場合は必ず読み込むようにします。自分で作ることもできるようですが、大変なのでこれも全て読み込んで使うことにします。アイコンなども既に定義されているので別途自分で用意しなくても大丈夫です。(あえてCSSをはずすことでExtJSがどのようなDOMを構築しているかを見ることもできます。)
以下が典型的なHTMLのファイルの形になります。ExtJSのファイルを読み込んだあとで自分のアプリケーションのファイルを読み込みます。下の例ではmyApp.jsになっています。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World 2 Ext JS</title>
<!--Ext JS CSS-->
<link rel="stylesheet" href="../js/ext/resources/css/ext-all.css" type="text/css" />
<!--Ext JS-->
<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext/ext-all.js"></script>
<!--My App Root JS-->
<script type="text/javascript" src="../js/myApp.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div class="body">
</div>
</body>
</html>
Viewportを使ったアプリケーションの場合は、ほとんどこのHTMLと同じようになります。
1.ExtJS起動後にAlert()を実行する
ここではHTMLファイル内にJava Scriptを直に書いていますが、普段は外部のJSファイルにしておくほうが良いと思います。この例では全体が見えやすいように1ファイルで完結させています。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World Ext JS</title>
<!--Ext JS CSS-->
<link rel="stylesheet" href="../js/ext/resources/css/ext-all.css" type="text/css" />
<!--ext js-->
<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
alert('Hello, World!');
});
</script>
</head>
<body>
<div class="body">
</div>
</body>
</html>
Ext.onReadyはドキュメントの準備終わった直後実行されます。一般的なJava Scriptのwindow.onloadやbodyのonLoad属性の代わりに使うことができます。
Ext.onReadyはwindow.onloadもしくは、bodyタグのonLoad属性の関数と同時に記述可能でした。どちらの場合もonReadyの方が後で実行されていました。
ExtJSの多くの場合、このExt.onReadyがアプリケーションの起点になっています。
アラートでHello, World!
ここでの処理はJava Scriptの標準のalertで”Hello, World!”を表示しています。
さらにこれをExtJSのアラートに置き換えるとExt.onReady以下はこんな感じになります。
Ext.onReady(function(){
Ext.Msg.alert(
'Alert',
'Hello, World!'
);
});
Extのアラートで表示
Ext.Msgについて詳しくはまた別の機会にまとめて取り上げようと思います。
2.Firebugのコンソールへ出力してみる
次にFirebugへ”Hello, World!”を出力してみます。FirebugはExt JS開発に不可欠といっても過言ではないと思います。デバッグ時に様々なデータを出力してをアプリケーションの処理を確認する必要があります。
ここでは外部ファイルにExt.onReadyを記述して、HTMLファイルとJSファイルを分ける方針で作ってみます。
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World 2 Ext JS</title>
<!--Ext JS CSS-->
<link rel="stylesheet" href="../js/ext/resources/css/ext-all.css" type="text/css" />
<!--Ext JS-->
<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext/ext-all.js"></script>
<!--My App Root JS-->
<script type="text/javascript" src="../js/hello_world.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div class="body">
</div>
</body>
</html>
HTML自体はほぼ同じです。ただしExt.onReadyがなく、hello_world.jsを読み込んでいます。
Java Script
このファイルの中でExt.onReadyを呼んでいます。alertの後でconsole.debugというメソッドを実行しています。これはFirebugのコンソールへの出力を行います。今は引数に文字列を渡していますが、ここにはオブジェクトを渡すこともできます。
Ext.onReady(function(){
alert('Hello, World!');
console.debug('Hello, World!');
});
Firebugは非常に強力なツールです。コンソールへの出力だけなく、外部ファイルの読み込み状況やリクエスト（POST・GET値）の確認、レスポンスの確認など、様々な機能を備えています。またExt JSで扱うもののほとんどはオブジェクトであるため、オブジェクト自体をコンソールに主力することで、プロパティ値やどんなメソッドが定義されているかを見ることができます。
firebugへ出力
もう一つ便利なツールとしてJSLintという構文チェッカーがあります。http://www.jslint.comにあるフォームに自分の書いたJava Scriptを入力して、構文のチェックが行えます。
Firefox、Safariでは動いているのにIEではエラーが出る場合などは、IE特有の構文のチェックでひっかかっている可能性があります。コードが完成したらJSLintを通してチェックしてから、他のブラウザでの実行チェックをするという使い方がよいと思います。
3.Viewportを使う
もう一つViewportでHello, Worldを作ってみます。
Ext.onReady(function(){
new Ext.Viewport({
layout:'fit',
items:[
{
title:'Hello, World',
html:'<div style="text-align:center; padding:100px;"><h1>Hello, World</h1></div>'
}
]
});
});
ViewportでHello, World
ExtJSらしい、タイトルのついたパネルにHello, Worldが表示できました。
Viewportについての説明は次回詳しく説明しますが、簡単に解説しておきます。まずExt.onReadyでExtJSの準備が完了したら、Ext.Viewportを生成しています。Viewportは画面全体をExtJSのパネルで覆ってしまいます。そしてExtはパネルの中にitemsの中のhtmlで記述したHTMLをパネル内描画します。ここではセンタリングのためのdivとh1タグの”Hello, World!”を書いているだけです。
ExtJSの多くのアプリケーションはこのViewportでブラウザの画面全体を支配して、中にいろいろな役割のパネルを配置して構築していきます。次回はViewportをもう少し詳しく解説します。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
[...] [...]
勉強会Ext.onReadyからはじめるExtJSのまとめ | ExtJSで楽しくRIA業務アプリ開発
2 11 月 09 at 8:17 PM
[...] [...]
Ext Japan - ブログ
12 11 月 09 at 11:27 AM
[...] [...]
10月28日（水）に第2回ExtJS勉強会を名古屋で開催しました | ExtJSで楽しくRIA業務アプリ開発
12 11 月 09 at 11:43 AM