使用 insertBefore 和insertAfter，在指定位置追加與刪除元素

來自於《sencha touch 權威指南》

-----------------------------------

除 append 和 overwrite 外，還可以使用 insertBefore 方法與 insertAfter 方法在目標元素之前或之後追加元素。app.js程式碼如下：

Ext.require(['Ext.form.Panel','Ext.Toolbar']);
Ext.application({
    name: 'MyApp',
    icon: 'images/icon.png',
    glossOnIcon: false,
    phoneStartupScreen: 'images/phone_startup.png',
    tabletStartupScreen: 'images/tablet_startup.png',
    
    launch: function(){
        var bcnt = 0;
        var acnt = 0;
        var bias = 3;
        var bchar = 'M';
        var achar = 'W';

        var before = function(){
            Ext.DomHelper.insertBefore('insert-target',{
                cls: 'add',
                html: Ext.util.Format.leftPad(bchar,bcnt*bias,bchar)
            });
            bcnt++;
        };

        var after = function(){
            Ext.DomHelper.insertAfter('insert-target',{
                cls: 'add',
                html: Ext.util.Format.leftPad(achar,acnt*bias,achar)
            });
            acnt++;
        };

        var remove = function(){
            var elems = Ext.DomQuery.select('.add');
            Ext.each(elems,function(item,index,array){
                Ext.removeNode(item);
            });
            bcnt = acnt = 0;
        };

        var myToolbar = Ext.create('Ext.Toolbar',{
            docked: 'top',
            items: [{
                xtype: 'button',
                text: '追加(before)',
                handler:before
            },{
                xtype: 'button',
                text: '追加(after)',
                handler: after
            },{
                xtype: 'button',
                text: '刪除',
                handler: remove
            }]
        });

        var html = "<div class='body' style='padding:15px;'>";
        html += "<h1>在指定的元素前後追加元素</h1>";
        html += "<div id='insert-target'>";
        html += "<hr />";
        html += "</div>";
        html += "</div>";

        var myPanel = Ext.create('Ext.Panel',{
            id: 'myPanel',
            title: '通過DomHelper元件追加元素',
            html: html,
            items: [myToolbar]
        });

        Ext.Viewport.add(myPanel);
    }
});