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();
またFx系のメソッドはElementが返ってくるので、でつないでアニメーションチェーンにすることができます。
elem.highlight().fadeOut().fadeIn().switchOff().switchOn();
セレクターCSSセレクターで要素を選択するにはExt.selectメソッドを使用します。
var elems = Ext.select('.myclass');
戻り値はExt.CompositeElementオブジェクトです。こちらは名前のとおりCompositeパターンに
なっているので、Ext.Elementのメソッドを呼び出すと透過的に全てのオブジェクトに対して
メソッドが呼び出されます。
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')
elem.query('.myclass')
ただselectの方はグループ化に対応していない(1.0.1a)らしく最初のセレクターにしかidを追加して
くれないようです。(queryの方は上手くいく）
Mindomoで
マインドマップにしてみました。
次はAJAX周りで遊んで見る予定。
参考
