Compositeとは？

"Compositeパターンは複数のオブジェクト対する操作をあたかもそれが一つのオブジェクトに対する操作であるように振る舞わせるためのデザインパターンです。" (Wikipedia) Ext.CompositeElementを利用することにより複数のExt.Elementで構成される集合に対して、一つのExt.Elementオブジェクトに対する操作と同じ操作が可能になります。Ext.CompositeElementはExt.Elementと同じインターフェース（メソッド）を提供してくれるので、例えば複数のExt.Elementに対する何らかのチェック処理が必要な場合であっても個別のExt.Elementに対する処理を何行も（あるいはループ処理で）書くのではなく、Ext.ComsiteElemetオブジェクト一つに対する一回のメソッド呼び出しで済ませることができます。CompositeElementオブジェクトは通常Ext.selectメソッドにより生成・取得します。Ext.selectの内部ではExt.DomQueryにより引数として渡されたセレクタにマッチする要素が検索・選択されます。

例えば下記の要素があった場合：

<html>
   <body>
      <div id="first" class="title">Sample A</div>
      <div id="second" class="doesNotMatch">Lorem Ipsum</div>
      <div id="third" class="title secondCSSCls">Some additional content</div>
   </body>
</html>

CSSセレクタの'.title'を指定することにより最初と最後のdivタグへの参照を持つCompositeElementオブジェクトを取得することができます。

var els = Ext.select('.title');

注意： 最後のdivタグは'secondCSSCls'というCSSクラスを持っています。HTMLElementは空白で区切ることにより複数のCSSクラスを持つことができます。'.title'というセレクタはこのクラスのみを持つ要素ということではないため、最初と最後のdivタグが選択されることになるわけです。

Ext.CompositeElementを取得後は一つのExt.Elementに対するように操作をすることができます。例えば、"error"というCSSクラスを選択されたdivタグに追加する場合は下記の通りです：

var els = Ext.select('.title');
els.addClass('error');

取得したい要素の場所が予め分かっている場合は、まず最初にその場所を指すExt.Elementを取得し、そこから検索するようにしてください。そうすることによって、検索の範囲が文書全体から一部にを狭まり、処理も速くなります。例えば先ほど登場した3つのdivタグを囲む'accordion'というidを持つdivタグを加えてみましょう：

<html>
   <body>
      <div id="accordion">
         <div id="first" class="title">Sample A</div>
         <div id="second" class="doesNotMatch">Lorem Ipsum</div>
         <div id="third" class="title secondCSSCls">
            Some additional content
         </div>
      </div>
   </body>
</html>

既に目的のdivタグは'accordion'というidのdivタグの中にあることは分かっているので、検索の範囲をこの'accordion'に限定します：

var accordion = Ext.get('accordion');
accordion.select('title');

検索範囲があらかじめ分かっている場合は常にこのようにして検索範囲を予め絞り込んでから検索を行うようにしてください。実行速度の向上につながります。

Ext.CompositeElementでよく利用される他のメソッドについて下記例に示します：

var accordion = Ext.get('accordion');
accordion.select('title');
// firstItem は最初のdivタグを参照します
var firstItem = accordion.item(0);
 // 1というアラートを表示します
alert(accordion.indexOf('third'));
// 2というアラートを表示します
alert(accordion.getCount()); 
// 最初のdivタグをaccordionから、そしてDOMツリーから削除します
accordion.removeElement('first', true);

注意: Ext JSのCompositeElementで用意されているeach、first、last、fill、contains、filterの各メソッドはExt Coreではご利用いただけません。