HOME > Learning Place >  No.4 DOM操作

No.4 DOM操作

Sencha フレームワークもWebブラウザ上で表示されますから、最終的にはDOMを画面に表示します。 フレームワークにはそのDOMの操作を行うための、クラスやメソッドが用意されています。

ここではSencha フレームワークにおけるDOM操作についてご紹介させていただきます。

Ext.get

Ext.getメソッドは、DomエレメントのIDを引数に指定することで、Ext.dom.Elementオブジェクトの取得ができます。

Ext.dom.Elementオブジェクトは、DOMのエレメントをラッピングしたクラスです。 詳しくは後ほど説明いたします。

1
2
3
4

 
var elem = Ext.get('my_element_id');
 
elem.addCls('classname');

Ext.fly

Ext.flyメソッドは、DomエレメントのIDを指定することで、Ext.dom.Element.Flyオブジェクトの取得ができます。

Ext.dom.Element.Flyは、Ext.dom.Elementのサブクラスですが、flywaightオブジェクトです。 Ext.get では、取得したDOMに対してExt.dom.Elementのインスタンスが生成され、そのDOMをラッピングします。 しかし、Ext.fly では、共有のExt.dom.Elementオブジェクト（これがflywaightオブジェクト）に、取得したDOMを関連づけるだけです。 次にExt.flyが呼び出された時には、そのDOMとの関係は上書きされてしまいます。

Ext.getでは、DOMとオブジェクトの関係は永続的ですが、Ext.flyではその場限りです。 したがって、オブジェクトを使い回さないワンライナーなどの用途でよく利用されます。

1
2

 
Ext.get('my_element_id').addCls('classname').;

Ext.dom.Element

Ext.dom.Elementは、Ext.Elementの別名を持ち、DOMのエレメントをラッピングしたクラスです。 SenchaフレームワークでDOM操作する際に利用されます。 生のJavaScriptで直接DOMを操作するのではなく、このExt.Elementクラスを利用することで、ブラウザ間の操作、挙動のちがいを吸収しクロスブラウザ対応ができます。

また、Ext.Elementには簡単なDOM操作を可能とする機能が備わっています。

ここではそのうちの一つを紹介いたします。

アニメーション

Ext.ElementのDOM操作メソッドの多くには、animateパラメータを持っています。

animateパラメータはデフォルトでは無効とされています。

ここでは、幅を変更したときにアニメーションさせる例を示します。

1
2

 
Ext.fly('animation_id').setWidth(600,true);

Ext.select

Ext.selectメソッドは、Ext.Element.select.selectのショートハンドで、CSSセレクタを引数に指定することで、Ext.dom.CompositeElementを取得することができます。

Ext.dom.CompositeElementは、DOMエレメントのコレクションです。 CSSセレクタを指定して取得するので、複数のDOMエレメントを持つことができるようになっています。

次に、引数に指定するCSSセレクタと、戻り値であるCompositeElementオブジェクトについて説明します。

DomQueryとCSSセレクタ

Ext.selectメソッドは、DOMオブジェクト選択のために、内部的にExt.DomQueryクラスを使用しています。

このクラスはCSSセレクタからDOMオブジェクトを選択するために必要な処理を受け持っています。

CSSセレクタはスタイルシートでスタイルを適用する対象のHTMLエレメントを特定するものですが、 Sencha フレームワークではこれを利用してDOMエレメントを選択することができます。

以下にCSSセレクタの例を示します。 この例では、divタグの中で、exampleクラスを指定しているHTMLエレメントに対して、幅を指定しています。

1
2
3
4

 
div.example {
    width:100px;
}

CSSセレクタはdiv.exampleの部分です。

Ext.dom.CompositeElement / Ext.dom.CompositeElementLite

Ext.selectメソッドの戻り値は、この Ext.dom.CompositeElementLite または Ext.dom.CompositeElementLite クラスのインスタンスになります。 Ext.selectメソッドの第2引数に true を渡すと、 Ext.dom.CompositeElementLite それ以外は Ext.dom.CompositeElementLite が返されます。 CompositeElementLiteはflywaightオブジェクトのコレクションで、 CompositeElementは、それぞれのエレメントに実際のElementオブジェクトが生成されます。

Ext.DomHelper

Ext.DomHelperは、DOM操作を簡単にできるようなユーティリティメソッドを多数持ったクラスです。

これを使うことで、DOMを追加、変更することをクロスブラウザ対応を意識することなく、確実に行うことができます。 Sencha フレームワークの内部では、このクラスを使って沢山のDOMを生成しています。

ここでは多数あるメソッドのうちの一部を紹介いたします。

  • append
  • insertBefore
  • insertAfter
  • overwrite

次の例は、ドキュメントボディに、アンカータグを追加するサンプルです。

1
2
3
4
5
6
7
8
9
10

 
Ext.DomHelper.append(document.body, {
    id: 'my-anchor',
    cn: [{
        tag: 'a',
        href: 'http://google.co.jp',
        html: 'グーグル',
        target: '_blank'
    }]
});

サンプルを見ると、とても構造的に書くことができることがわかりますね。

まとめ

SenchaフレームワークでのDOMの操作についてご紹介させていただきました。 今回紹介していないメソッドも多数ございますので、理解を深めたいと思った方は是非APIドキュメント をご覧くださいませ。

次回は、Sencha におけるデザインパターンのご紹介をしたいと思います。

Learning Placeトップに戻る

PAGETOP