使用 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);

    }

});

 显示效果：