ExtJSでタブブラウザ

今月 ExtJS 2 が発表になりました。すでに、3件ほど、仕事で ExtJS を使っています。ExtJS 2 は ExtJS 1 よりもずいぶんと良くなりましたね。

ExtJS 1 はオブジェクト作って、メソッド呼んで、という形でUIを作っていく感じでした。ExtJS 2 でもそのやり方は継続できますが、JSONのような物で、UIの内容（つまり View の内容）を指定できるようになりました。ExtJS 2 のサンプルだと、古いやり方と新しいやり方が両方混在しているのですが、ExtJSを設計しているJack Slocumさんの設計思想は View は JSON で記述するというポリシーのように感じました。このことは、良い事だと思います。

というわけで、ExtJS 2 でタブブラウザを作ってみました。

http://accelart.jp/blog/TabBrowser/

＜iframe＞の中をJavaScriptからいじれない関係上、色々な部分がおかしいです。サーバー側でHTMLを書き換える、というテクニックを使うと、もっといい感じで、Ajaxでもタブブラウザが作れると思います。やってません。お許しください。

あと、Firefox2 に限り、起動後にもたつきます。おそらくGCをしているのだと想像しています。Firefox3は問題ないです。IE6は今月のWindows Updateにより、劇的に高速化しました。Safari3やOpera9は問題ありません。

(2007/12/23 追記：嘘でした。Firebug を使っているかどうかが大きな影響を及ぼします。Firefox3 の方がかなり速いですが、Firefox2 でも、Firebugを無効にすると速くなりました。）

http://accelart.jp/blog/TabBrowser/js/tabbrowser.js がソースです。2〜42行目が View の定義です。xtype でどんなコンポーネントを作るか指定していきます。例えば、tbbutton ならば、ツールバーのボタンで、tabpanel ならタブパネルです。46〜80行目が Control です。

イベントリスナーの方は、scope: this を指定すると、thisを正しく設定してくれるので、JavaScriptならではの、"this問題"を解決してくれます。表示するWebページのタイトルは、Ext.Ajaxを使って、getTitle.php 経由で取得しています。

全体として、ExtJS 2 を初めて学習していく上で、いいサンプルになったのではないかと、勝手に自負しております。教科書的なテクニックが満載だと思います。ソース全体は、http://accelart.jp/blog/TabBrowser/src.zip にまとめましたので、よろしかったらご参考にしてください。

IE6など、フルAjaxを使用した時に、劇的に高速になりました。2005年は、Ajax元年でしたが、Ajaxは動的HTMLのおつまみな感じでした。しかし、2008年は、ブラウザの高速化により、フルAjax元年になるかもしれませんね。