ExtJS入門12 Ext.XTemplateでfor,ifを使う
Ext.XTemplateではテンプレート内でforやifを設定して、テンプレートを処理することができます。条件分岐の処理をテンプレート内に記述して、apply()でデータを渡すだけです。
Ext.XTemplateについてのその他の記事
ExtJS入門10 Ext.XTemplateを使う
ExtJS入門11 Ext.XtemplateでJS内のテンプレートを使う
Ext.XTemplateクラス – Ext 3.0 – API Documentation 日本語版
http://extdocs.xenophy.com/?class=Ext.XTemplate
・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'}
]
};
/**
* テンプレート
*/
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\' &amp;amp;&amp;amp; 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
});
});
・実行結果
Ext.XTemaplate （for,ifをつかう）
テンプレートを記述するさいに
・for
forの場合、ループする対象のデータを指定します。記述の方法は
サンプルの場合は’array’という要素をforのターゲットにしているので’
var data = {
somedata:{
data:
[
{
name:'株式会社sus4',
url:'http://www.sus4.co.jp',
},
{
name:'yahoo',
url:'http://www.yahoo.com',
},
{
name:'google',
url:'http://www.google.com',
}
]
}
};
/**
* テンプレート ルートを配列としてみる
*/
var jsTpl = new Ext.XTemplate(
//ここは普通に{}でセットする
'<table>',
'<tpl for=".">',
'<tr>',
'<tpl>',
'<th>{name}</th>',
'<td>{url}</td>',
'</tpl>',
'</tr>',
'</tpl>',
'</table>'
);
/**
* テンプレート
* ドットでデータの場所を指定
*/
var jsTpl2 = new Ext.XTemplate(
//ここは普通に{}でセットする
'<table>',
'<tpl for="somedata.data">',
'<tr>',
'<tpl>',
'<th>{name}</th>',
'<td>{url}</td>',
'</tpl>',
'</tr>',
'</tpl>',
'</table>'
);
var jsTplHtml = jsTpl.apply(data.somedata.data);
var jsTplHtml2 = jsTpl2.apply(data);
・if
if文の記述の仕方は、
数字を比較する場合は
elseはありません。ifで反対の条件を指定して代用します。「&&、||」など基本的な比較演算子は使えます。詳しくはAPIドキュメントのXTemplateのXTemplateの項目を開くと載っています。
Ext.XTemplateでfor,ifをうまく使えば、テーブルの作成などにが楽になります。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
