HTML 5モバイルWebアプリケーション開発——Sencha Touch編(7)

Sencha TouchのExt.DomHelperコンポーネントは、要素の追加や書き換えを容易に行うことができます.
例:

launch:function(){
function appendDom(){
Ext.DomHelper.append(‘my-div’,{
id:’url-list’,
tag:’ul’,    //         
cn:[// children，               
{
tag:’li’,,
cn:[{
tag:’a’,
html:’google’,
href:’http://www.google.com’
}]
},
{
tag:’li’,
cn:[{
tag:’a’,
//...    
}]
}
]
});
}
var myToolbar = Ext.create(‘Ext.Toolbar’,{
docked:’top’,
items:[{
xtype:’button’,
text:’    ’,
handler:function(){
appendDom();
}
}]
});
var myPanel = Ext.create(‘Ext.Panel’,{
id:’myPanel’,
html:’<div id=”my-div”></div>’,
items:[myToolbar]
});
Ext.Viewport.add(myPanel);
}

appendを除いてoverwrite関数を使用して要素の内容を書き換えることができます.道理は同じです.
指定した場所に要素を追加および削除するには、次の方法があります.
innsertAfter:ターゲット要素の後に要素を追加
innsertBefore:ターゲット要素の前に要素を追加する
Ext.DomQuery:要素を探し、cssのセレクタを使用して選択できます.
Ext.DomQuery.select('[class*="d")/classをdとする要素を選択
Ext.each:追加されたすべての要素を巡回
Ext.removeNode:指定した要素を削除
例:
var elems = Ext.DomQuery.select(‘.add’);
Ext.each(elems,function(item,index,array){//functionのパラメータ:現在の処理要素、現在の処理要素の下付き、処理集合;elemsは処理する集合である
Ext.removeNode(item);
})
以上のコードの意味は、追加したclass名addの要素をすべて削除することです.