ExtJSで楽しくRIA業務アプリ開発 » Ext.XTeplate http://extjs.blog.sus4.co.jp 株式会社sus4 開発チーム Wed, 01 Jun 2011 09:32:58 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 ExtJS入門　Ext.XTemplateの補足 http://extjs.blog.sus4.co.jp/2010/02/26/491/ http://extjs.blog.sus4.co.jp/2010/02/26/491/#comments Fri, 26 Feb 2010 02:10:36 +0000 佐竹 裕行 http://extjs.blog.sus4.co.jp/?p=491 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\' &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
    });

});

・実行結果

XTemplate for/if

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 &amp;&amp; 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を書き換えるような処理はテンプレートで行うとスマートです。

Share/Bookmark]]> http://extjs.blog.sus4.co.jp/2010/02/26/491/feed/ 0