ExtJSをつかったDOMの操作方法(入門編)

この記事は Sencha Advent Calendar 2013 19日目の記事です。

今回は、ExtJSをつかったDOMの操作方法の出だしの部分について書きます。

##はじめに

本記事の内容はこちらで試すことができます。

##DOMとは・・・

DOMは、Document Object Model のことで、HTMLの要素（aタグや、divタグなど)に対して
操作するための仕組み(API)のことです。

DOMを使うことで、javascriptからリンクURLを書き換えたり、スタイルの変更をしたり、
構造をまるっと入れ替えることすらできます。

さて、ExtJSでDOM操作をすることができるクラスメソッドにはどんな物があるでしょうか。

簡単に紹介していきます。

###素のjavascriptの場合

素のjavascriptではdocument.getElementByIdメソッドを呼ぶことで、element オブジェクト
を取得できます。
長いですね・・・。

###Ext.getメソッド

このメソッドの引数にidを指定して呼び出すことで、エレメントを取得することができます。

Ext.getメソッドは、スタティックメソッドなのでそのまま呼ぶことができます。

id=piyo01のエレメントに、hogehogeクラスを付加する使用例を以下に示します。

hoge.js

var hoge = Ext.get('piyo01');
hoge.addCls('hogehoge');

###Ext.flyメソッド

このメソッドもidを指定して呼び出すことで、エレメントを取得することができます。

Ext.flyメソッドも、Ext.get同様に、スタティックメソッドなのでそのまま呼ぶことができます。

id=piyo01のエレメントに、hogehogeクラスを付加する使用例を以下に示します。

fuga.js

var hoge = Ext.fly('piyo01');
hoge.addCls('hogehoge');

ここまで見た限りではこの二つのメソッドに、違いが無いように見えます。

しかしそんなことはありません。

では、その違いは何なのか・・・。

ということで、以下の例をご覧ください。

例1.js

var hoge = Ext.get('piyo01');
hoge.addCls('hogehoge');
var fuga= Ext.get('piyo02');
hoge.addCls('hogehoge');

hoge.hide();
fuga.hide();

hoge.show()
fuga.show()

例2.js

var hoge = Ext.fly('piyo01');
hoge.addCls('hogehoge');
var fuga= Ext.fly('piyo02');
hoge.addCls('hogehoge');

hoge.hide();
fuga.hide();

hoge.show();
fuga.show();

さて、例1では、piyo01,piyo02の表示非表示が切り替わりますが、
例2ではpiyo01の表示非表示が切り替わらないはずです。

なぜこうなってしまうかというと、
Ext.getはExt.Elementオブジェクトが返すのに対して、
Ext.flyではExt.dom.Element.Flyオブジェクトが返されるためです。

Ext.dom.Element.Flyオブジェクトは、flyweight であるため、
領域が再利用されるのです。

使い分けとしては、ワンライナーなど、その場限りのDOM操作にはfly、
後で取得したオブジェクトを再利用したい場合にはgetを使います。

特に、メモリ使用量を節約したいモバイルではメモリ使用量が抑えられるflyを多用することになるでしょう。

##最後に

今日紹介したメソッドはほんの入り口に過ぎません。
Ext　JSにはほかにも数多くのDom操作エレメントがありますので、是非使いこなしてみてください。

##リンク
document.getElementById
Ext.dom.Element
Ext.get
Ext.fly

---

つぎは、yasutomogさんです。