ExtJS入門　DomHelperの使い方3　位置指定の追加と削除

佐竹裕行 — Thu, 25 Feb 2010 06:47:22 +0000

DomHelperで要素を追加するの追加項目です。
DomHelperで要素の追加を行うときappendでは対象の要素の子の要素として要素を追加しましたが、insertBefore,insertAfterでは対象の要素の前後に要素を追加します。
今回はあえてパネルを使わずにやってみます。

DomHelperについてはこちらにサンプルがあります。

サンプルコード3 DomHelperを使った位置指定の追加とDomQueryを使った削除

・html





    
    ExtJS名古屋勉強会　DOMHelperの使い方 DOMの追加と削除

    
    
    
    
    
    



    位置を指定して追加する

・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をいじったことになると何処かで聞いたことがありますね。

ExtJSで楽しくRIA業務アプリ開発 » DOM

ExtJS入門 DomHelperの使い方3 位置指定の追加と削除

位置を指定して追加する

ExtJS入門　DomHelperの使い方3　位置指定の追加と削除