ExtJS入門 DomHelperの使い方3 位置指定の追加と削除
DomHelperで要素を追加するの追加項目です。
DomHelperで要素の追加を行うときappendでは対象の要素の子の要素として要素を追加しましたが、insertBefore,insertAfterでは対象の要素の前後に要素を追加します。
今回はあえてパネルを使わずにやってみます。
DomHelperについてはこちらにサンプルがあります。
サンプルコード3 DomHelperを使った位置指定の追加とDomQueryを使った削除
・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の使い方 DOMの追加と削除</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-sample4.js"></script>
</head>
<body>
<div class="body" style="padding:15px;">
<h1>位置を指定して追加する</h1>
<div id="beforeBtn" style="float:left;"></div>
<div id="afterBtn" style="float:left;"></div>
<div id="bothBtn" style="float:left;"></div>
<div id="removeBtn" style="float:left;"></div>
<div style="clear:both;"></div>
<div id="insert-target">
<hr/>
</div>
</div>
</body>
</html>
・javascript
Ext.onReady(function(){
//初期値の設定
var bcnt = 0;
var acnt = 0;
var bias = 3;
var bchar = 'M';
var achar = "W";
var before = function(target) {
Ext.DomHelper.insertBefore('insert-target',{
cls:'add',
html:String.leftPad(bchar,bcnt * bias,bchar)
});
bcnt++;
};
var after = function(target) {
Ext.DomHelper.insertAfter('insert-target',{
cls:'add',
html:String.leftPad(achar,acnt * bias,achar)
});
acnt++;
};
var remove = function(target) {
//任意のDOMを見つけるにはDomQueryを使う。ここではCSSクラスがaddのもの全て。
var elems = Ext.DomQuery.select('.add');
Ext.each(elems,function(o,cnt,array){
Ext.removeNode(o);
});
bcnt = acnt = 0;
};
//ボタンを作成
new Ext.Button({
renderTo:'beforeBtn',
text:"追加(Before)",
handler:before
});
new Ext.Button({
renderTo:'afterBtn',
text:"追加(After)",
handler:after
});
new Ext.Button({
renderTo:'bothBtn',
text:"前後に追加",
handler:function() {
before();
after();
}
});
new Ext.Button({
renderTo:'removeBtn',
text:"追加したDOMを削除",
handler:remove
});
});
・実行結果
DomHelper DOMの追加と削除
ボタンを4つ作って各ボタンに、直前に追加、直後に追加、両方に追加、削除を割り当てています。ボタンが押されると、罫線の前後の所定の位置に要素を追加します。
またこのサンプルではDomQueryクラスを使って追加要素を探して、削除する処理も追加しています。DomHelperはDOMの生成や追加を行いますが、DomQueryはDOMツリーから任意の要素を探すことができます。今回はDomQueryの使い方について詳しく解説しませんが、追加した要素をCSSのクラスから探し出す処理を行っています。
グリッドパネルやツリーパネルの構築はブロックを組み立てるようなイメージですが、Ext.Panelは真っ白のキャンバスに絵を描いていく感覚に近いと気がします。パネルの中のDOMを自由に操れると、ExtJSの派手なUIの裏にある奥深いDOMの世界を体感できるようになります。ExtJSでDOMをいじって初めてExtJSをいじったことになると何処かで聞いたことがありますね。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
