第二回EｘｔJS勉強会資料：ExtJS アプリケーション開発

Kotsutsumi 記事更新お知らせ

２００８年７月２９日に開催された、第二回ExtJS勉強会で使用した内容を記載します。

※追記

本日は、ありがとうごいました。何から説明していいかわからず、手探りで資料作っていっています。
次回、次々回と少しづつ進めていきたいと思います。
本日参加された方で、名刺交換させていただいていない方で連絡したいという方は、kotsutsumi@xenophy.comにメールください。ExtJS勉強会でとか書いてくれれば、メール捨てません（笑

開発環境

  • ブラウザ：FireFox 3.0.1
  • デバッガー：FireBug
  • エディタ：好きなもの

ExtJSを使用するために読み込むファイル

  • ext-all.css
  • ext-base.js
  • ext-all.js

１．ベースとなるHTMLを作成する

<?xml version=”1.0″ encoding=”utf-8″?>
<!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” lang=”ja” xml:lang=”ja”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<!– ExtJS CSS読み込み –>
<link rel=”stylesheet” type=”text/css” href=”./common/styles/ext-all.css” />

<!– ExtJS Script読み込み –>
<script type=”text/javascript” src=”./common/scripts/ext/ext-base.js”></script>
<script type=”text/javascript” src=”./common/scripts/ext/ext-all.js”></script>

<script type=”text/javascript” src=”./common/scripts/app.js”></script>
</html>

ExtJSを使ったプログラムは、app.jsに記述することにします。

２．アプリケーションの開始

ExtJSは、onReadyイベントハンドラを記述することで、JavaScriptおよびHTML全体が読み込み終わったあとに処理を走らせることが可能です。

通常JavaScriptは、読み込まれた（記述された）タイミングで実行されてしまうため、bodyタグのonloadを記述すなどして対応していた経験がある方もいらっしゃると思います。

ExtJSでは、OnReadyがアプリケーション開始のタイミングになります。

（もちろん部分的にExtJSを使用する際に、必ずしもonReadyイベントを記述する必要はありません。）

Ext.onReady(function(){

});

３．レイアウトを作成する

ExtJSには、最初からいくつかのレイアウトが用意されています。

このレイアウトとは、ExtJSで画面を構成する際に、どのようにレイアウトを行うかを決定するものです。

ExtJSでレイアウトすることができる例は、本家の☆ 第二回EｘｔJS勉強会資料：ExtJS アプリケーション開発ソース ☆

第二回EｘｔJS勉強会資料：ExtJS アプリケーション開発

3 thoughts on “第二回EｘｔJS勉強会資料：ExtJS アプリケーション開発”

Comments are closed.