ExtJS入門 Ext.XTemplateの補足
Ext.XTemplateの補足というか真髄の機能にテンプレート内でforやifによる制御ができる点です。
Ext.XTempalteでは、テンプレートにセットするデータの値によって処理を分岐したり、配列の値をループで取り出すことができます。
サンプルではダミーのデータ(data)をオブジェクトで用意して、その内容に対してテンプレート側で制御をしながらHTMLを構築しています。
・HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS名古屋勉強会 xtemplateの使い方(for,ifを使う)</title>
<!--Ext JS CSS-->
<link rel="stylesheet" href="../js/ext/resources/css/ext-all.css" type="text/css" />
<!--Ext JS-->
<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext/ext-all.js"></script>
<!--my App JS-->
<script type="text/javascript" src="xtemplate2.js"></script>
</head>
<body>
<h1 style="background-color:#BDD3EF;">for,ifを使ったXTemplate</h1>
<div id="js-tpl"></div>
</body>
</html>
・Javascript
Ext.onReady(function(){
//ダミーのデータ
var data = {
name:'株式会社sus4',
url:'http://www.sus4.co.jp',
//この配列をループで読み出す
array:[
{key:'C',value:'Major'},
{key:'D',value:'Minor'},
{key:'E',value:'7'},
{key:'F',value:'Minor7'},
{key:'G',value:'dim'},
{key:'A',value:'aug'},
{key:'B',value:'add'}
]
};
/**
* テンプレート
* (HTMLに描いたテンプレートではうまく動作しない。)
*/
var jsTpl = new Ext.XTemplate(
//ここは普通に{}でセットする
'<a href="{url}">{name}</a>',
'<table>',
'<tpl for="array">',
'<tr>',
//数字と比較
'<tpl if="value == 7">',
'<th>{key}</th>',
'<td style="color:red;"><b>{value}</b></td>',
'</tpl>',
//文字列と比較。比較する文字列をエスケープ下シングルクォートで囲む
'<tpl if="key == \'C\'">',
'<th style="color:orange;"><b>{key}</b></th>',
'<td>{value}</td>',
'</tpl>',
//elseの代わりのif分岐
'<tpl if="key != \'C\' && value != 7">',
'<th>{key}</th>',
'<td>{value}</td>',
'</tpl>',
'</tr>',
'</tpl>',
'</table>'
);
//JSに描いたテンプレートを使用
var jsTplHtml = jsTpl.apply(data);
new Ext.Panel({
renderTo:'js-tpl',
title:'XTemplateパネル(for,ifを使用中)',
bodyStyle:'padding:20px;',
html:jsTplHtml
});
});
・実行結果
XTemplate for/if
ダミーのデータはオブジェクトです。このデータのarrayプロパティに配列がセットされています。この配列をテンプレートのループで取り出して、HTML構築しさらに各値によってスタイルを設定するようにします。
テンプレートの記述はJavascript側で行っています。
ループを展開する
<tpl for=".">
<p>{some_value}</p>
</tpl>
ifで分岐する
<tpl if="some_value > 0">
<p>{some_value}</p>
</tpl>
という形でテンプレートに制御を記述します。制御の詳しいルールはAPIドキュメントに詳しく書かれています。
いくつかポイントを挙げておきますと
&&,||ももちろん使える。
ループを展開する
<tpl if="some_value > 10 && some_value < 100">
<p>{some_value}</p>
</tpl>
ifでの文字列比較が特殊
テンプレートのif分で文字列の比較を行う場合は文字列にバックスラッシュとシングルクウォートで括る必要があります。
<tpl if="some_value== \'比較する文字列\'"> シングルクウォートで括る。 </tpl>
elseはかけない
elseがかけない為、ifの否定で制御する。例えば
<tpl if ="some_value == 10"> 一つの条件で分岐 </tpl> <tpl if="some_value != 10"> elseの代わり <tpl>
html側に書いたテンプレートでは動かないことがある。
ExtJSのバージョンにもよるのかもしれませんが、HTMLに書いたforやifを含むテンプレートはExt.XTemplate.fromで読み込んだ場合上手く動作しないことがあります。
Javascript側に書いた場合は、特に問題が起きませんでした。将来的に改善されるかもしれませんが、現状ではforやifを含むテンプレートはJavascript内で記述して new Ext.XTemplate()で読み込むようにします。
このようにテンプレート側だけで簡単な操作は可能になります。サンプルのように任意の項目のCSSを書き換えるような処理はテンプレートで行うとスマートです。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
