HTML5開發移動web應用——Sencha Touch篇(7)

標籤：handler   create   cal   asc   name   刪除   位置   nbsp   family   

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的元素

 

HTML5開發移動web應用——Sencha Touch篇(7)