ExtJS入門その１『土台・環境作り』
2009/08/27 18:44:42
※2009/12/28に追記修正（2009/12/17にExt JS 3.1リリースのため）
まずはExtJSでアプリを作っていくための土台・環境作りから行きましょう。
はじめにExt JSフレームワークをサイトからダウンロードします。
Ext Japan (http://extjs.co.jp/)
ページ中ほど左側「Ext JS 3.1」欄の「詳細を見る」ボタンをクリックします。
「Ext JS 3.1.0 SDK」の右側にある「ダウンロード」ボタンをクリックするとダウンロードが始まります。
まずはExtJSでアプリを作っていくための土台・環境作りから行きましょう。
はじめにExt JSフレームワークをサイトからダウンロードします。
Ext Japan (http://extjs.co.jp/)
ページ中ほど左側「Ext JS 3.1」欄の「詳細を見る」ボタンをクリックします。
「Ext JS 3.1.0 SDK」の右側にある「ダウンロード」ボタンをクリックするとダウンロードが始まります。
ダウンロードファイル「ext-3.1.0.zip」を解凍すると以下のようなファイル／フォルダ構成になっているのを確認しましょう。
なんか色々たくさんのファイルが入っていますが、動作に最低限必要なフォルダ及びファイルは赤枠で囲まれた
これらのファイル／フォルダをWebルートにコピーして新しく「index.html」を作成して以下のように配置します。
「ext-3.1.0」フォルダの中に必要ファイルを全て配置してます。別にルートにそのままおいてもOKです。ここらへんは自分の好みで。
新しく作成した「index.html」のソース
上記ではhtmlファイルはUTF-8エンコードになってますが、EUC-JPでもShift_JISでもOKです。自分の好きなように。
最低限と言いましたが、「ext-lang-ja.js」ファイルはなくても大丈夫ですが、表示表記はデフォルトで英語のところ、このファイルを読み込んでおくと日本語で表記されるようになるので便利でしょう。
レイアウト位置を調整するための透明GIFファイルを指定
ここまででとりあえずExtJSで作りこめる準備ができました。
はじめはこの状態を土台にして、色々なものをたくさん作るとよいでしょうから別にコピーするなりして置いておくなどするとよいかと思われます。
・参考資料
Ext JS入門 リッチUIなWebサイトをつくるAjaxフレームワーク
なんか色々たくさんのファイルが入っていますが、動作に最低限必要なフォルダ及びファイルは赤枠で囲まれた
ext-3.1.0 > adapter > ext > ext-base.js JSファイル ext-3.1.0 > resources resources.jsbファイル以外全て ext-3.1.0 > ext-all.js JSファイル ext-3.1.0 > src > locale > ext-lang-ja.js JSファイルです。
これらのファイル／フォルダをWebルートにコピーして新しく「index.html」を作成して以下のように配置します。
「ext-3.1.0」フォルダの中に必要ファイルを全て配置してます。別にルートにそのままおいてもOKです。ここらへんは自分の好みで。
新しく作成した「index.html」のソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title>ExtJS入門サンプル</title> <link rel="stylesheet" href="ext-3.1.0/css/ext-all.css" type="text/css" media="all" /> <script type="text/javascript" src="ext-3.1.0/ext-base.js"></script> <script type="text/javascript" src="ext-3.1.0/ext-all.js"></script> <script type="text/javascript" src="ext-3.1.0/ext-lang-ja.js"></script> <script type="text/javascript"> //<![CDATA[ Ext.BLANK_IMAGE_URL = "ext-3.1.0/images/default/s.gif"; //]]> </script> </head> <body> <h1>ExtJS入門サンプル</h1> </body> </html>
上記ではhtmlファイルはUTF-8エンコードになってますが、EUC-JPでもShift_JISでもOKです。自分の好きなように。
最低限と言いましたが、「ext-lang-ja.js」ファイルはなくても大丈夫ですが、表示表記はデフォルトで英語のところ、このファイルを読み込んでおくと日本語で表記されるようになるので便利でしょう。
レイアウト位置を調整するための透明GIFファイルを指定
Ext.BLANK_IMAGE_URL = "ext-3.1.0/images/default/s.gif";この行はなくても大丈夫ですが、デフォルトではわざわざExtJSのサーバーの絶対パスになっているらしいので、ローカルファイルを指定した方がベターです（心理的によい）。上記のようにresourcesフォルダに予め用意されてあるのでそれを使用します。
ここまででとりあえずExtJSで作りこめる準備ができました。
はじめはこの状態を土台にして、色々なものをたくさん作るとよいでしょうから別にコピーするなりして置いておくなどするとよいかと思われます。
・参考資料
Ext JS入門 リッチUIなWebサイトをつくるAjaxフレームワーク
