ExtJS入門11 Ext.XtemplateでJS内のテンプレートを使う
前回はExt.XTemplateクラスのfromメソッドでHTML内のファイルをテンプレートに使いましたが、今回はJavascriptのファイル内にテンプレートを書く方法を紹介します。
前回の記事
ExtJS入門10 Ext.XTemplateを使う
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の使い方(Javascript内のテンプレート)</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="xtemplate-new.js"></script>
</head>
<body>
<h1 style="background-color:#BDD3EF;">JS内のテンプレートを使ったXTempalte</h1>
<div id="tpl-target">
</div>
</body>
</html>
・Javascript
Ext.onReady(function(){
var data = {
name:'株式会社sus4',
url:'http://www.sus4.co.jp',
};
/**
* テンプレート
* 中括弧でdataオブジェクトのプロパティ名を指定する。
* js内の文字列でテンプレートを指定する場合は,
* new Ext.XTemplate(テンプレート文字列)とする。newしないとエラーになります。
* カンマで区切ることで複数行に渡ってテンプレート文字列を書くことができます。
* 最後にカンマがつくとエラーになります。
*/
var tpl = new Ext.XTemplate(
'<h2>リンクを作る</h2>',
'<a href="{url}">{name}</a>',
'<h2>テーブルを作る</h2>',
'<table>',
'<tr>',
'<th style="padding:3px;">{name}:</th><td>{url}</td>',
'</tr>',
'</table>'
);
//htmlファイルに作った要素のIDを指定
var tplHtml = tpl.apply(data);
var panel = new Ext.Panel({
renderTo:'tpl-target',
title:'テンプレートを使ったパネル',
bodyStyle:'padding:20px',
html:tplHtml
});
});
・実行結果
Ext.XTemplateでJS内にテンプレートを書く
Ext.XTemplateのテンプレートはJavascript内に記述しています。
var tpl = new Ext.XTemplate(
'<h2>リンクを作る</h2>',
'<a href="{url}">{name}</a>',
'<h2>テーブルを作る</h2>',
'<table>',
'<tr>',
'<th style="padding:3px;">{name}:</th><td>{url}</td>',
'</tr>',
'</table>'
);
文字列でテンプレートとなるHTMLを記述しています。テンプレート文字列が長くなって改行する場合は一旦文字列を区切って「,」(カンマ)で新しい文字列を連結して書いていきます。
例：
new Ext.XTemplate( '文字列', ’文字列’ );
文字列を区切らずそのまま改行するとエラーになります。連結した最後の文字列のあとにカンマがついてもダメです。
データの設定する箇所は「{}」(中括弧)でデータオブジェクトのプロパティ名を指定します。
HTMLファイルにテンプレートを記述する、Ext.XTemplate.from()ではnewしていませんでしたが、JSファイル内に文字列としてテンプレートを記述して使う場合はnewしなければいけません。Ext.XTemaplate.from()メソッドを使うとHTMLに描いた文字列からテンプレートオブジェクトを生成して返しているためnewしなくても良かったのですが、今回は自分できちんとnewして文字列からテンプレートオブジェクトを生成します。
あとはExt.XTemplate.fromと同じようにapplyでデータの設定して、パネルの要素に設定しています。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
