HTML5开发移动web应用——Sencha Touch篇(7)
2016-02-04 16:47
489 查看
Sencha Touch中的Ext.DomHelper组件可以方便的实现对元素的追加或重写操作
示例:
除了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的元素
示例:
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——SVG和Canvas的使用
- 移动开发
- 三天学会HTML5――SVG和Canvas的使用
- 三天学会HTML5——SVG和Canvas的使用
- 三天学会HTML5——SVG和Canvas的使用
- [html5]动态多边形flat-surface-shader
- html5 history.pushState
- html5学习心得【缓慢更新】
- HTML5_样式,链接和表格
- HTML5开发移动web应用——SAP UI5篇(1)
- html5 audio总结
- html5入门之psd图解剖
- 【HTML5入门教程二】HTML5 视频属性的技巧分享
- [html5]localStorage的原理和HTML5本地存储安全性
- HTML5初学者路线图
- HTML5外包
- 好看的H5登录界面 动态云
- 【HTML5入门教程二】HTML5 视频属性的技巧分享
- 小白Html5学习日记01
- HTML5(八)canvas转换之万花筒