ExtJS入門14 DomHelperの使い方2
DOMヘルパーを使って、DOMのテンプレートを作ることができます。
イメージとしてはDomHelperでXTemplateを作る感じですね。
Ext.XTemplateについてはこちらを
- ExtJSで楽しくRIA業務アプリ開発 ExtJS入門10 Ext.XTemplateを使う
- ExtJSで楽しくRIA業務アプリ開発 ExtJS入門11 Ext.XtemplateでJS内のテンプレートを使う
- ExtJSで楽しくRIA業務アプリ開発 ExtJS入門12 Ext.XTemplateでfor,ifを使う
サンプルコード2 テンプレート化して使う。
・html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS名古屋勉強会 DOMHelper テンプレートの使い方</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="domhelper-sample2-template.js"></script>
</head>
<body>
<div class="body">
</div>
</body>
</html>
・javascript
Ext.onReady(function(){
var appendDom = function() {
//まずulを作成する。
var list = Ext.DomHelper.append('my-div', {tag: 'ul', cls: 'my-list'});
//li要素をテンプレートから作成する
//1.DOMエレメントオブジェクトを使う場合
var tpl = Ext.DomHelper.createTemplate({tag: 'li', id: 'item{0}', html: 'テンプレート１ リストの要素： {0} オブジェクトで指定'});
//2.HTMLを直接書く場合
//var tpl = Ext.DomHelper.createTemplate('<li id="{0}">List Item {0} 文字列で指定</li>');
for(var i = 0; i < 5; i++){
tpl.append(list, [i,'文字列']);
}
//{0},{1}の数字で指定した場合。
var tpl = Ext.DomHelper.createTemplate('<li id="{number}">テンプレート２ リストの要素： {number} プロパティ名で置き換え項目を指定{text} </li>');
//テンプレートに渡すオブジェクトを作成。
for(var i = 0; i < 5; i++){
tpl.append(list, {
number:i,
text:"文字列"
});
}
}
//パネルを構築 bodyにパネル構築する。
var panel = new Ext.Panel({
renderTo:Ext.getBody(),
id:'myPanel',
title:'DOMHelperテンプレートでDOMを構築する ',
//パネルの内容
html: '<div id="my-div">',
listeners:{
afterrender:appendDom
}
});
});
・実行結果
DomHelperを使ったテンプレートの作成方法は、オブジェクトもしくはhtmlの文字列をDomHelperのcreateTemplateに渡します。
テンプレートの置き換え箇所は「｛｝」で設定します。テンプレートを作るやり方が違うだけでXTemplateと同じです。
まとめると
要素の指定は
var tpl = dh.createTemplate({tag: 'li', id: 'item{number}', html: 'List Item {number}'});
または
var tpl = Ext.DomHelper.createTemplate('<li id="{number}">List Item {number}</li>');
使うときは
tpl.append(list, {
number:i,
text:"文字列"
});
数字で指定する場合は
var tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {1}'});
と数字で指定して、
tpl.append(list, [i,"文字列"]);
テンプレート化してしまえばあとはExt.XTemplateとほとんど同じように使えます。DOMヘルパーとオブジェクトで指定できるので、JSファイル中だけで効率良くテンプレート作成するのに向いていると思います。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
[...] ・ExtJS入門14 DomHelperの使い方2 http://extjs.blog.sus4.co.jp/2010/01/14/extjs-tutorial14-domhelper2/ [...]
第5回ExtJS勉強会＠名古屋 2/25 パネル内のエレメントを作成する | ExtJSで楽しくRIA業務アプリ開発
25 2 月 10 at 3:58 PM