Extjs4のXTemplateのビルトイン値

Extjs4のXTemplateのビルトイン値でちょっとはまったのでメモ。
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.XTemplate
APIドキュメントには以下のビルトイン値があると書かれている。
values,parent,xindex,xcount
まずこれらを使う時に{[]}で囲まないといけないというところを
{}で囲むと勘違いしてはまった。他の変数は{}だもんよ。。


そしてvaluesとparentが指すオブジェクトが何かよくわからなかった。
valuesは「現在のスコープオブジェクト」なのだが、なんのことか全然分からない。
わからないので、実験してみた。

var xtplCond = new Ext.XTemplate(
	'<ul>',
	'<tpl for="os.list">',
		'<tpl if="name == \'Mac OS X\'">',//シングルクォートのエスケープを忘れずに
			'<li style="font-weight:bold;">{#}. {name}</li>',
			//<tpl if・・・はスコープにならない！
			'<li style="font-weight:bold;">parent.name={[parent.name]}</li>',
		'</tpl>',
		'<tpl if="name != \'Mac OS X\'">',//elseがないのでifで代用
			'<li>{#}. {name}</li>',
		'</tpl>',
		'<tpl if="index &gt;= 2">',//<と>はエンコードする必要がある
			'<li>{#}. {name}</li>',
		'</tpl>',
		//{#}以外に以下のビルトイン変数が使える
		'<li>index={[values.index]}</li>',//valuesはfor="os.list"で取り出した配列の1オブジェクト。for(var values in os.list)と同じ。
		'<li>count={[parent.os.count]}</li>',//parentは親スコープオブジェクト。この例ではoverwriteに渡されるオブジェクトリテラルを指す。必ずしも現在のスコープのオブジェクトの親オブジェクトとは限らないので注意！
		'<li>xindex={[xindex]}</li>',//0から始まるforのインデックス
		'<li>xcount={[xcount]}</li>',//全体の繰り返し回数
		'<tpl for="child">',
			//ここでは親スコープは'<tpl for="os.list">',以下になるので、parentはos.listの要素を指す
			'<li>childxindex={[xindex]}, parent.name={[parent.name]}</li>',
		'</tpl>',
	'</tpl>',
	'</ul>'
);
xtplCond.overwrite(Ext.getBody(), {
	os: {
		count: 33,
		list: [
			{name: 'Mac OS X', index: 1, 
				child: [{cname: 'a'}, {cname: 'c'}]
			},
			{name: 'Windows 7', index: 2, 
				child: [{cname: 'b'}, {cname: 'c'}]
			},
			{name: 'Windows Vista', index: 3, 
				child: [{cname: 'a'}, {cname: 'b'}]
			},
		]
	}
});

上記を実行すると、ブラウザに表示される結果は以下になる。

1. Mac OS X
parent.name=
index=1
count=33
xindex=1
xcount=3
childxindex=1, parent.name=Mac OS X
childxindex=2, parent.name=Mac OS X
2. Windows 7
2. Windows 7
index=2
count=33
xindex=2
xcount=3
childxindex=1, parent.name=Windows 7
childxindex=2, parent.name=Windows 7
3. Windows Vista
3. Windows Vista
index=3
count=33
xindex=3
xcount=3
childxindex=1, parent.name=Windows Vista
childxindex=2, parent.name=Windows Vista

まとめると、
○XTemplate内での「スコープ」とはで囲まれた範囲を指す。但し、はスコープにならないので注意！
○親スコープオブジェクトとオブジェクトの階層構造上の親オブジェクトは異なるので注意！（俺は勘違いしました。。）
○トップレベルのスコープオブジェクトはテンプレートのappendメソッドなどに渡されるオブジェクトリテラルそのもの。