来自于《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); } });
显示效果: