Ext JS 実践開発ガイド Vol.5

第５回目になる、Ext JS開発ガイドです。今回は、「DOMエレメントとExt.Element」について学んでいきます。

DOMエレメントとExt.Element

Ext JSはJavaScript RIA Frameworkであるとともに、オブジェクト指向プログラミングを実現するためのフレームワークでもあります。JavaScriptにはクラスという仕組みがありません 。

しかし、Ext JSを使用することでクラスの作成やクラス継承を比較的簡単に実装することが可能になります。なお、Ext JS自身、次にあげるデザインパターンを利用して実装されています。

• Observable
• Flyweight
• Singleton
• Composite

これらを知らなくてもExt JSを使用することはできますが、Ext JSの理解を深めるため、または、Ext JSを使わなくても、より良いコードがかけるようになるために、もしご存じないようでしたら、この機会に学習してみてはいかがでしょうか。
デザインパターンについては、それだけで本1冊分の内容になるため、ここでは割愛します。

さらに、Ext JSは、以下の4つのコアクラスがHTMLページを操作する上で非常に重要な役割を果たしています。

• Element
• CompositeElement
• DomHelper
• DomQuery

このコアクラスたちが果たす役割は、今回学んでいただくDOMエレメントとExt.Elementの操作です。

Ext.Elementクラス

Ext JSアプリケーションを構成する最も基本的なクラスになります。Ext.ElementクラスはDOMエレメントをラッピングしてDOM操作を柔軟に行えるインタフェースを提供します。
Ext.Elementオブジェクトを取得するには、次の3つの方法があります。

• Ext.get
• Ext.fly
• Ext.select

Ext.get

「完全なElementオブジェクト」を取得することができます。ここでいっている「完全なExt.Elementオブジェクト」というのは、取得するたびにインスタンスが生成され返されることを意味しています。

var el = Ext.get( ‘foo’ );
console.log( el );

getの引数には、DOMエレメントのIDを指定します。また、オブジェクトの中を確認するためにFireBug（console.log）を使用します。

Ext.fly

Flywightオブジェクト（共有オブジェクト）を取得することができます。Flyweightオブジェクトとは、内部的に1つのExt.Elementオブジェクトを共有して利用するオブジェクトです。

var el = Ext.fly ( ‘foo’ );

使用方法は、Ext.get同様、引数にDOMエレメントのIDを指定します。

上図では、2回Ext.flyを実行した時の様子を表しています。1回目に取得したDOM情報を共有オブジェクトに格納しています。2回目は、DOM:Bの情報で共有オブジェクトの内容を上書きしています。つまり、DOM:Aの情報を完全に消去して格納しているわけではなく、DOM:Bに存在する情報のみを上書きで格納して、格納した共有オブジェクトを返却しています。

また、取得したExt.ElementオブジェクトのisFlyweightがtrueに設定されているため、flyで取得したことを判定できます。
Ext.flyはワンライナー（1行構文）の時に有効です。

Ext.flyはExt.getに比べて高速に動作しますが、先の例のように変数に格納して使い回すことは、思わぬバグが発生しやすいので変数に格納する場合は、Ext.getを使用してください。

次の例は、取得したExt.Elementオブジェクトにハイライト処理を行っています。

Ext.fly(‘foo’).highlight();

Ext.select

Ext.selectは、ドキュメント内のDOMをCSSセレクタで絞り込みExt.CompositeElementオブジェクトを返却します。

Ext.CompositeElementオブジェクトは、Ext.Elementクラスインタフェース介して1つのExt.Elementオブジェクトを操作するように、複数のExt.Elementオブジェクトを操作することが可能です。

<div class="x-foo">DIV1</div>
<div class="x-bar">DIV2</div>
<div class="x-foo">DIV3</div>

CSSセレクタで「.x-foo」を指定すると「DIV1」「DIV3」が選択されます。ここまでは、デザインをCSSで適用する時と同じ考え方です。

では、選択されたExt.ElementオブジェクトをExt.CompositeElementオブジェクトから操作してみます。

Ext.select( ‘.x-foo’ ).setStyle({
     color: ‘red’
});

選択されたDIVタグの文字色が赤に変更されます。先のExt.getやExt.flyで一つずつ指定するのではなく、CSSセレクタで抽出したExt.Elementオブジェクトを一括操作できます。

Ext.CompositeElementクラス

先ほど、Ext.selectを使用して取得したExt.CompositeElementオブジェクトについて、もう少し詳しくみていきましょう。
Ext.CompositeElementオブジェクトは、大きく分けて次の3つの機能があります。

1. 1度の操作でExt.Elementを透過的に操作する機能
2. 選択したExt.Elementオブジェクトのフィルタリング機能
3. カスタム処理機能

1.については、先ほど試しました。

2.については、一度CSSセレクタで選択したExt.Elementをさらにフィルタリングして利用することが可能です。

<div class="x-foo">DIV1</div>
<div class="x-bar">DIV2</div>
<div class="x-foo x-filter">DIV3</div>

まず「.x-foo」でExt.Elementを取得します。その後、x-filterでフィルタリングをして、DIVタグの文字色を赤に変更します。

var els = Ext.select( ‘.x-foo’ );

els.filter( ‘.x-filter’ );

els.setStyle({

    color: ‘red’

});

filterメソッドを使用してフィルタリング処理を行うことで、「DIV3」のみが選択され、文字色が変更されます。

3.は、選択されたエレメントに対して独自の処理を設定することができる機能です。eachメソッドを使い、引数に実行関数を設定します。

Ext.select( ‘.x-foo’ ).each(function( el ){

    // スタイル適用

    el.setStyle({

        color: ‘red’

    });

    // ハイライト処理

    el.highlight();

});

実行関数の引数としてel（第一引数）を指定することで、一つずつのエレメントを参照できます。このelに入ってくるオブジェクトは、先ほどExt.flyで学んだ「共有オブジェクト」です。

これは、Ext.selectで取得するExt.ElementオブジェクトがFlyweightになっているためです。Ext.getのようにインスタンスを取得したい場合は、Ext.selectの第二引数をtrueに設定することで共有オブジェクトではなくExt.Elementオブジェクトを取得することができます。

Ext.DomQueryクラス

Ext.DomQueryクラスは、高度なDOM選択処理を行うためのクラスで、ほとんどのCSS2/3セレクターに対応しています。

具体的な例は、既に学習しました。DomQueryクラスは、Ext.selectメソッドやExt.queryメソッド経由で利用するとき以外に直接利用することは、ほとんどありませんが、CSSセレクタの内部処理を行っているのは、このDomQueryクラスであるということを把握しておきましょう。

Ext.DomHelperクラス

表示されたドキュメントに対して、動的なマークアップの追加・削除などの操作を行うことがあると思います。JavaScriptはDOMを使用し操作することができます。しかし、その記述方法は複雑で可読性が低くなることが否めません。

そこで、Ext.DomHelperを使用することで簡潔にDOM操作を行うことができます。「DOMによる操作」「Ext.DomHelperによる操作」を比較してみましょう。それぞれは、同じ処理を行っています。

DOMによる操作

var linkEl = document.createElement( ‘a’ );

linkEl.href = ‘http://extjs.com/’;

linkEl.innerHTML = ‘Ext – A foundation you can build on’;

linkEl.setAttribute( ‘target’, ‘_blank’ );

var containerDiv = document.createElement( ‘div’ );

containerDiv.id = ‘link-div’;

containerDiv.appendChild( linkEl );

document.body.appendChild( containerDiv );

Ext.DomHelperによる操作

Ext.DomHelper.append(document.body, {

    id: ‘link-div’,

    cn: [{

        tag: ‘a’,

        href: ‘http://extjs.com/’,

        html: ‘Ext – A foundation you can build on’,

        target: ‘_blank’

    }]

});

2つを比較してみて、いかがでしょうか？「DOMによる操作」では、Aタグから作り始め、外側のDIVタグを作って、BODYタグに追加しています。「Ext.DomHelperによる操作」では、タグ構造に近い状態をオブジェクトリテラルで設定することで、タグを生成しています。

Ext.DomHelperを使用することで、クロスブラウザ対応もできる利点があります。

このように、HTMLElementをオブジェクトリテラルとして記述して、生成するための手段を提供しています。オブジェクトリテラルで設定するパラメータは、APIドキュメントを参照してください。

次回予告

いかがでしたでしょうか。知っている人にとっては、当たり前のことですが、日常の（？）Ext JS開発では、このExt.ElementやDomHelperは非常に多様するクラスですので、基礎としてしっかり学習しておきましょう。

次回は、「イベント処理」について学んでいきます。

お楽しみに。