[JavaScript][Ext]Ext.jsの使い方メモ(Core機能)

Ext.jsの使い方メモです。Core機能をまとめてみようと思います。

最初に必要なライブラリを読み込みます。(ext-1.0に展開されたソースがある前提)

<script src="ext-1.0/adapter/yui/yui-utilities.js" type="text/javascript" charset="utf-8"></script>
<script src="ext-1.0/adapter/yui/ext-yui-adapter.js" type="text/javascript" charset="utf-8"></script>
<script src="ext-1.0/ext-all-debug.js" type="text/javascript" charset="utf-8"></script>

スタイルシートの読み込みます。
自分で全部定義するのは大変なので付属のものを使います。

<link rel="stylesheet" href="ext-1.0/resources/css/ext-all.css" type="text/css" media="screen" charset="utf-8" />

テーマを変更したい場合は上に加えてythema-xxx.cssを読み込むだけです。

<link rel="stylesheet" href="ext-1.0/resources/css/ythema-aero.css" type="text/css" media="screen" charset="utf-8" />

基本はExt.Elementオブジェクトです。

var elem = Ext.get('my-div');

でExt.Elementオブジェクトが返ってきます。これはHTMLElementオブジェクトをラップしたオブジェクトで、各種プロパティの設定／取得や、アニメーション、AJAX機能が利用できます。

表示非表示の切り替えは、show(), hide()メソッドでそれぞれ行います。

elem.show();
elem.hide();

デフォルトではvisibilityプロパティを変更して表示／非表示を制御します。
要素ブロックごと消したい場合はenableDisplayMode()としてからそれぞれのメソッドを呼び出すとdisplayプロパティで表示／非表示を切り替えてくれます。

elem.enableDisplayMode();
elem.hide();

イベントハンドラの設定

イベントハンドラの設定はExt.Element.onメソッドで行います。これはxt.Element.addListnerのaliasになっています。

elem.on('click', function(event, target) {
    // 処理
});

ハンドラの第一引数はExt.EventObject、第２引数はイベントソースのHTMLElementオブジェクトとなります。

アニメーションエフェクト
エフェクト系はExt.Fxで定義されています。
Ext.FxのメソッドはExt.Elementのprototypeにコピー(Ext.apply)されているので、Ext.Elementオブジェクト経由なら特に意識することなく利用できます。

elem.highlight();
elem.fadeOut();
elem.fadeIn();
elem.switchOff();
elem.switchOn();
// etc...

またFx系のメソッドはElementが返ってくるので、でつないでアニメーションチェーンにすることができます。

elem.highlight().fadeOut().fadeIn().switchOff().switchOn();

セレクター
CSSセレクターで要素を選択するにはExt.selectメソッドを使用します。

var elems = Ext.select('.myclass');

戻り値はExt.CompositeElementオブジェクトです。こちらは名前のとおりCompositeパターンに
なっているので、Ext.Elementのメソッドを呼び出すと透過的に全てのオブジェクトに対して
メソッドが呼び出されます。

// myclassクラスが設定されている全ての要素に対してclickイベントハンドラを設定
elems.on('click', function() { ... } );

要素を一つずつ処理する場合はeachを使います。途中でbreakしたい場合はfalseを返します。
continueは単にreturnです。

elems.each(function (elem) {
    if ( condition ) {
        // ... なんらかの処理
        return false; // breakする
    } else {
        // ... なんらかの処理
        return; // continueする
    };
    // ...
});

XPathセレクター
XPathで要素を選択するにはExt.queryメソッドを使います。こちらはDomQuery.selectのaliasです。
こちらの戻り値はExt.CompositeElementではなくHTMLElementのArrayオブジェクトとなります。
おそらくExt.queryの実装であるDomQueryクラスがExtに依存しないようにするためだと思われます。

Ext.Elementオブジェクトに対してselect, queryを行うと、その要素の子要素以下に限定して
要素を選択します。

elem.select('.myclass') // same as '#' + elem.dom.id + ' .myclass';
elem.query('.myclass') // same as '#' + elem.dom.id + ' .myclass';

ただselectの方はグループ化に対応していない(1.0.1a)らしく最初のセレクターにしかidを追加して
くれないようです。(queryの方は上手くいく）

Mindomoでマインドマップにしてみました。

次はAJAX周りで遊んで見る予定。

参考

• [JavaScript]Ext.js 1.0が正式リリース


• Ext JSメモ


• 【ハウツー】Apolloのサンプルで使われた、美しきJavaScriptフレームワーク「Ext 1.0」 | エンタープライズ | マイコミジャーナル