[Ext.js]とりあえずExt.js導入からダイアログ（アラート）表示までやってみる

なんかExt.jsが格好良いなぁ～なんて思ったので

いやー、飛びつくのがちょっと遅れてしまいましたが、名前は聞いたことあったけど注目していなかったExt.jsについて、なんかのきっかけでサンプルを見てみたら、いやいやいやいやいやいやいや、これちょっと良さそうじゃんねぇー！ってなって、ひとまず現時点ですぐに何かに組み込むようなケースも無いんですが、覚える事も色々ありそうで、何かあったときにはもう遅い！なんてことにならない為にも、ちょっとかじっておこうかなぁ、なんていう、ゆるーい感じの備忘録です。

まずはアーカイブを拾ってきましょう。

では早速、Ext JSさんのサイトに行って、プロダクトタブからサンプルを見て「へー」「ほー」とか言いながら、右下にある「ダウンロード」をクリックして、現時点のパブリックリリースでは最新の「EXT JS 3.1.0」のSDKの所からダウンロードをクリック。豪快にダウンロードが始まります。

ぽぽーそして解凍してみると、
/adapter/
/docs/
/examples/
/pkgs/
/resources/
/src/
/CHANGES_ext-3.1.0.html
/ext.jsb2
/ext-all.js
/ext-all-debug.js
/gpl-3.0.txt
/INCLUDE_ORDER.txt
/license.txt
というファイル達が入っていますので、まずはサイトのどこかにこれらを放り込んでみましょうかね。

ひとまず私は、/extjs/ というディレクトリを用意して、
/ext-all.js
/adapter/
/resources/
を入れておきました。

本当にそれで良いのん？

知るか－！！
人生、トライアンドエラーなんじゃー！！！

そしていよいよ、簡単そうなダイアログ（アラート）表示をしてみる。

最初から目標を高く設定してそれを完遂出来る人は良いですけど、私は全く違うので、超低いハードルを設置して、１つ１つこなしていったりしてみようと思います。

と言うわけで、ダイアログ（アラート）を使って、「Hello World」でもやってみようと思います。

いやしかし、私自身、あまりWorldに興味が無いし、あったとしても気軽に「Hello」と呼びかける程あつかましくもないですので、ここは謙虚に「すみません、ちょっとよろしいでしょうか？」くらいにしてみましょう。

1.headでExt.js周りのファイルを読み込む

私の場合、/extjs/ に置きましたので、このページからだと以下の感じ。もちろん環境に応じてパスを変えましょう。

Ext JS で使う、ext-all.css と、ext-base.js と、ext-all.js を読み込むのが基本っぽい。
最後の ext001.js は、このページで実験する「すみません、ちょっとよろしいでしょうか？」（Hello World 改）のソースを記述するためのものです。ええ。

2.ext001.js にダイアログ（アラート）を表示させるソースを記述

こんな感じです。

1行目の
Ext.GLANK_IMAGE_URL = '../../extjs/resources/images/default/s.gif';
って何よ！？ってな話なんですが、、、
Ext.jsでは、透明GIFを用いていて、デフォルトだと本家のサイトのs.gifを見に行ってしまうようになっているので、それを自分の所のs.gifを用いるように変えてあげよう、という感じです。いわゆるおまじないです。私の同僚が、「おまじないって書かれてるの見ると腹が立つ」と言っていました。思う存分腹立ててください。

2行目の
Ext.onReady(function(){
は、DOMが読み込み終わったら処理を開始しますよー、という奴で、細かい動作は調査不足なんだけど、意味合い的には、window.onload とか、jqueryの$(function(){ 的なもののようです。

その次の
Ext.get('btnShowAlert')
は、Elementを取得します。getElementById 的なアレです。jqueryの $('#hoge') 的なアレです。

チェーンしてしまいましたが、その次の
on('click', function(){
は、Elementに対してイベントを付けてあげまっせー的なアレです。jqueryの click(function(){ 的なアレです。さっきからjquery例えばっかりだな。まあ良いか。そんで、

Ext.Msg.alert('TEST[タイトル]', 'すみません、ちょっとよろしいでしょうか？[本文]');
でフィニッシュです！

3.ボタンを押してみる。

雑感

とりあえずダイアログ（アラート）表示まで出来ました。

めでたしめでたし。

完

終わってどうするよ

まあそんな訳で、やりたいことの5000分の1（過少気味）も出来ていない状態ではありますが、文体もおふざけ状態から抜け出せませんので、今回はこの辺で・・・・・

2010/02/03

[Ext.js]とりあえずExt.js導入からダイアログ（アラート）表示までやってみる

なんかExt.jsが格好良いなぁ～なんて思ったので

まずはアーカイブを拾ってきましょう。

本当にそれで良いのん？

そしていよいよ、簡単そうなダイアログ（アラート）表示をしてみる。

1.headでExt.js周りのファイルを読み込む

2.ext001.js にダイアログ（アラート）を表示させるソースを記述

3.ボタンを押してみる。

雑感

関連項目

雑多なもの

Ext.js

jquery

lightwindow,greybox

SyntaxHighlighter

特別企画「犯人はヤス」

サイト

どう考えてもおすすめ書籍

JavaScript 第5版
	David Flanagan 村上列オライリー・ジャパン 2007-08-14 売り上げランキング : 10413 おすすめ平均誤解を招く本言語としてのJavaScriptに一番踏み込んだ本 JavaScriptのバイブル本 Amazonで詳しく見る by G-Tools

JavaScript: The Good Parts
	Douglas Crockford Oreilly & Associates Inc 2008-05 売り上げランキング : 31572 Amazonで詳しく見る by G-Tools