ExtJsにおけるXTemplateの使い方

1、配列の自動充填と役割ドメインの切り替え
 

          Ext.onReady(function(){
              var tpl=new Ext.XTemplate(
                 '

',
'',
'',
'',
'',
'氏名年齢操作{name}{age}'
) ;
var tplData=[
{name:'a',age:10},
{name:'b',age:20},
{name:'c',age:30},
{name:'d',age:40},
{name:'e',age:50},
];
var panel=Ext.create('Ext.panel.Panel',{
title:'XTmplate',
width:1200,
height:300,
tpl:tpl,
renderTo:Ext.getBody()
});
tpl.append('tmp',tplData);
});
 
コードにはtplラベルとfor演算子が使用されます.この例ではfor演算子の値は「.」です.現在のオブジェクトを指します.親を指すことを表し、直接オブジェクト名を書くこともできます.また、配列のサポートはテンプレートに一括してデータを追加することもできます.
 
 
2、単純配列の自動レンダリング
 

  
Ext.onReady(function(){
              var tpl=new Ext.XTemplate(
                 '

',
'',
'',
'',
'',
'氏名年齢COM{#}{.}{.}'
) ;
var array=['a','b','c','d','e'];
tpl.append('tmp',array);
}) ;
 
 
ここで、{#}は行番号、{.}を表します.配列の内容を表します
 
 
3、テンプレートで任意のコードを実行する
 
 

    Ext.onReady(function(){
              var tpl=new Ext.XTemplate(
                 '

',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'シーケンス番号氏名給与ボーナス{[xindex]}{[values.name]}{[values.wage*parent.per]}{[Math.round(values.wage*parent.per/xcount)]}給与時間{[fm.date(new Date,"Y年m月d日")]}給与合計'
) ;
var tplData={
per:0.9,
emps:[
{name:'a',wage:1000},
{name:'b',wage:200},
{name:'c',wage:100},
{name:'d',wage:10},
{name:'e',wage:897},
{name:'f',wage:110}
]
};
tpl.append('tmp',tplData);
});
 
次のようになります.
    
values:現在のスコープの下の値オブジェクトで、サブテンプレートのスコープを切り替えることで値を変更できます.
 
parent:親テンプレートの値オブジェクト
 
xindex:ループテンプレートのインデックス
 
xcount:テンプレートをループするときの総ループ回数
 
 
 
参考資料:ExtJs中XTemplate使用http://www.studyofnet.com/news/408.html