- 2007-12-07 (金) 17:43
- Ext JS | JavaScript
Ext.js 2.0 Bata1とjqueryを使ったエントリーを書いてから1か月が過ぎてしまいました。。。Ext.jsは2.0の正式版が発表されました。僕の方はやっとExtを使う仕事に戻ったのでExt.js関連のエントリーを書いていきたいと思います。
さて、まずはバージョンアップしてしまったので各ファイルの構成を作りなおします。今回は次のようにしました。
- jquery 1.2.1 - jquery.comより最新版を取得）
- jquery-plugin.js - Ext.js adapterフォルダにあるもの
- ext-jquery-adapter.js - Ext.js adapterフォルダ
- ext-all.js - Ext.js 本体 全部いり
- first.js - これから記述するスクリプトを書くためのファイル
基本的にはExt.js 2.0正式版のファイルにjqueryだけ最新版に差し替えただけです。（同梱されていたjquery.1.1.1より最新版のほうが動作速度の面で有利なため）これらを読み込ませるため、次のような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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Inputlog - Ext test1</title> <meta name="description" content="Ext.jsのテストページ" /> <link rel="stylesheet" href="css/ext-all.css" type="text/css" /> <script src="js/jquery-1.2.1.min.js" type="text/javascript"></script> <script src="js/jquery-plugins.js" type="text/javascript"></script> <script src="js/ext-jquery-adapter.js" type="text/javascript"></script> <script src="js/ext-all.js" type="text/javascript"></script> <script src="js/first.js" type="text/javascript"></script> </head> <body> </body> </html>HTMLが用意できたところでfirst.jsを書いていきます。まずはExtがうまく動作しているか次のように書いてみましょう。
Ext.onReady(function() {
alert('hello');
});
これでブラウザで表示してみます。アラートボックスでhelloと表示されればExt.jsはうまく動作しています。
Ext.onReadyを使うと引数に書かれたfunctionが、DOMツリーを構築後に実行されます。jqueryでいうところの$(function)と同じです。
$(function(){ // $(document).ready(function(){ としても同じ
alert('hello');
));
今回はここまで。次回はHTML要素の取得について書きます。
- Newer: Ext.js 2.0 書き方その2: HTML要素の取得
- Older: vimでの文字コード変換
Comments:0
Trackbacks:0
- Trackback URL for this entry
- http://blog.kyosuke.jp/2007/12/07/45/trackback
- Listed below are links to weblogs that reference
- Ext.js 2.0 書き方その1: DOMツリー構築後に実行 from inputlog