使用 insertBefore 和insertAfter,在指定位置追加与删除元素

使用 insertBefore 和insertAfter,在指定位置追加与删除元素,第1张

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/588848.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-12
下一篇 2022-04-12

发表评论

登录后才能评论

评论列表(0条)

保存