ExtJS入門10 Ext.XTemplateを使う
ExtJSでパネル内にHTMLを作成したいときに便利なのがExt.TemplateとExt.XTemplateです。
今回はExt.XTemplateのExt.XTemplat.fromとoverwriteを使って、テンプレートで作ったエレメントをパネル内に配置するサンプルを紹介します。
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の使い方(from,overwriteを使う)</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>
<script type="text/javascript" src="xtemplate.js"></script>
</head>
<body>
<div class="body">
</div>
<div style="display: none;">
<div id="sampleTpl">
<table>
<tr>
<td>{a_value}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
・Javascript
Ext.onReady(function(){
var data = {
a_value:'テンプレートの初期値を設定します。'
};
//htmlファイルに作った要素のIDを指定
var panelTpl = Ext.XTemplate.from('sampleTpl');
var panelHtml = panelTpl.apply(data);
var panel = new Ext.Panel({
renderTo:Ext.getBody(),
title:'テンプレートを使ったパネル',
bodyStyle:'padding:20px',
html:panelHtml,
tbar:[
{
text:'テンプレート書き換え',
handler:function(){
//アップデートした時間をつける
var dt = new Date();
var newData = {
a_value:dt.format('A g:i s秒に上書きしました')
};
//テンプレートの上書き
panelTpl.overwrite(panel.body,newData);
}
}
]
});
});
・実行結果
Ext.XTemplateを使う
テンプレートを使ってエレメントを生成
Ext.XTemplateを使うとHTMLファイルに記述した要素をテンプレートとして読み込むことができます。Ext.XTemplate.from(’要素のID’)という形で指定することでテンプレートとして読み込まれます。
ここでは簡単なテーブルをテンプレートとなる要素にしています。
<div style="display: none;">
<div id="sampleTpl">
<table>
<tr>
<td>{a_value}</td>
</tr>
</table>
</div>
</div>
テンプレートを記述した部分全体を表示しないように”display:none”のdivで囲っておきます。HTMLに記述したテンプレートをfromで使う場合、HTMLに書かれた部分が書き換わるのではなく、テンプレートとして読み込まれているだけなので画面の最背面に描画されてたままです。非表示にしておかないとパネルの下にテンプレートが見えてしまいます。
要素の書き換え箇所を「{,}」(中括弧)で設定します。ここでは{a_value}としています。Javascript側では、テンプレートにセットするデータを用意してapplyメソッドでセットしています。データはオブジェクトの形で渡します。
テンプレートの上書き
テンプレートの上書きにはoverwriteメソッドを使います。新しいデータを用意して、overwirteで指定した要素を書き換えます。panel.bodyとしてパネルのbody要素を書き換えています。
ここでは書き換えたときの時間を表示するためにDateクラスを使っています。Dateクラスのインスタンスにformatメソッドを渡して、日付のフォーマットを指定します。この指定の方法はPHPのdate関数と同じような書式を渡します。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
[...] [...]
ExtJS
4 12 月 09 at 12:06 PM
[...] [...]
ExtJS
7 12 月 09 at 11:42 AM
[...] ・ExtJS入門10 Ext.XTemplateを使う http://extjs.blog.sus4.co.jp/2009/12/03/extjs-tutorial10/ [...]
第5回ExtJS勉強会＠名古屋 2/25 パネル内のエレメントを作成する | ExtJSで楽しくRIA業務アプリ開発
25 2 月 10 at 3:58 PM