ExtJS入門13 Ext.DomHelperの使い方
ExtJSでDOMを操作するときはExt.DomHelperを使うと便利です。
Ext.DomHelper – Ext 3.0 – API Documentation 日本語版
http://extdocs.xenophy.com/?class=Ext.DomHelper
詳しい解説はAPIドキュメントを見ていただくとして、ここでは使い方に重点をまとめてみます。
注意点としてはExt.DomHelperクラスはシングルトンであることです。
そのため直接インスタンスを生成してはいけません。newせずに直接メソッドを呼んであげます。
では実際の使い方です。
使い方
DomHelperクラスを起動して、メソッドを指定します。
構築するDOMのオブジェクトを渡す。
サンプルコード１
・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のサンプル1</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-sample1.js"></script>
</head>
<body>
<div class="body">
</div>
</body>
</html>
・javascript
Ext.onReady(function(){
var appendDom = function() {
console.debug('dom');
Ext.DomHelper.append('my-div',{
id:'url-list',
tag:'ul',
cn:[
{
tag:'li',
cn:[{
tag:'a',
html:'google',
href:'http://www.google.com'
}]
},{
//targetが追加されているa要素
tag:'li',
cn:[{
tag:'a',
html:'yahoo',
href:'http://www.yahoo.com',
target:'_blank'
}]
}
]
});
}
new Ext.Panel({
renderTo:Ext.getBody(),
id:'myPanel',
title:'DOMHelperで要素を追加する',
//パネルの内容
bodyStyle:{
padding:'15px',
'text-align':'center'
},
html: '<div id="my-div">',//このdivをターゲットにする。
//ボタン設定
buttonAlign:'center',
buttons:[
{
text:'要素を追加',
handler:function(){
appendDom();
}
}
]
});
});
・実行結果
DomHelperのサンプル
パネルのhtmlに設定されているdivが構築されると、listenersに設定されているappendDom関数でDOMHelperによるDOMの追加が行われています。Ext.DomHelperはシングルトンなのでnewせずに、そのままメソッドを呼びます。
appendメソッドはターゲットとなる要素にDOMを追加します。ターゲットとなる要素は要素のidで指定します。ここでは’my-div’という名前のdivが指定しています。
追加する要素はオブジェクトで設定します。
DomHelperに渡すオブジェクトの形式は以下用になっています
DomHelperエレメントオブジェクトの仕様
DomHelperエレメントオブジェクトは、エレメントを作成するときに使用します。 このオブジェクトは、次の4つの属性から成り立ちます。
tag :
タグ名
children : または cn
配列形式で、好きなだけ作成するエレメントを指定できます。 また、入れ子にすることで多階層のエレメントを構築することもできます。
cls :
class属性を指定します。
html :
エレメントに追加するinnerHTML形式の文字列を指定します。
APIドキュメントより
基本的には属性:設定値という指定方法です。html属性がinnerHTMLにあたります。
childrenまたはcnとして、その要素の子要素を設定します。
aタグのhref属性など、タグ別の属性値は href:url のように設定します。ここでは’yahoo’の方にだけtarget属性を設定しています。
tagの設定を省略するとdivとして生成されます。
サンプルのオブジェクトは以下のようになっています。
{
id:'url-list',
tag:'ul',
cn:[
{
tag:'li',
cn:[{
tag:'a',
html:'google',
href:'http://www.google.com'
}]
},{
//targetが追加されているa要素
tag:'li',
cn:[{
tag:'a',
html:'yahoo',
href:'http://www.yahoo.com',
target:'_blank'
}]
}
]
}
XTemplateはパネルの内容を一気に変更するのに向いており、DomHelperはパネル内の一部の要素を書き換えるのに向いています。
この二つのクラスをうまく使い分けることで、効率良くエレメントの操作が行えます。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
[...] ・ExtJS入門13 Ext.DomHelperの使い方 http://extjs.blog.sus4.co.jp/2010/01/14/extjs-tutorial13-domhelper1/ [...]
第5回ExtJS勉強会＠名古屋 2/25 パネル内のエレメントを作成する | ExtJSで楽しくRIA業務アプリ開発
25 2 月 10 at 3:18 PM