HTML5开发移动web应用——Sencha Touch篇

Posted fareise

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML5开发移动web应用——Sencha Touch篇相关的知识,希望对你有一定的参考价值。

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”]’)//选取classd的元素

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篇的主要内容,如果未能解决你的问题,请参考以下文章

HTML5开发移动web应用——Sencha Touch篇(12)

HTML5开发移动web应用——Sencha Touch篇(10)

HTML5开发实战——Sencha Touch篇

Sencha Touch实战OA系统开发|Sencha Touch项目教程

Sencha Architect怎么样

浅谈移动应用的跨平台开发工具(Xamarin和React Native)