使用 append 方法追加元素

來自於《sencha touch 權威指南》

學習使用 Ext.DomHelper 元件在頁面中追加元素。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(){
        function appendDom(){
            Ext.DomHelper.append('my-div',{
                id: 'url-list',
                tag: 'ul',
                cn:[{
                    tag: 'li',
                    cn: [{
                        tag: 'a',
                        html: 'google',
                        href: 'http://www.baidu.com/'
                    }]
                },{
                    tag: 'li',
                    cn: [{
                        tag: 'a',
                        html: 'sina',
                        href: 'http://www.sina.com.cn/'
                    }]
                }]
            });
        }

        var myToolbar = Ext.create('Ext.Toolbar',{
            docked: 'top',
            items: [{
                xtype: 'button',
                text: '追加元素',
                handler: function(){
                    appendDom();
                }
            }]
        });

        var MyPanel = Ext.create('Ext.Panel',{
            id: 'MyPanel',
            title: '通過DomHelper元件追加元素',
            html: '<div id="my-div"></div>',
            items: [myToolbar]
        });

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

 顯示效果：