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)的更多相关文章

  1. HTML5开发移动web应用——Sencha Touch篇(8)

    DataView是Sencha Touch中最重要的组件,用于数据的可视化.数据可视化的重要性不言而喻,能够讲不论什么数据以形象的方式展示给用户. 眼下,怎样更好地可视化是很多公司或框架都在追求的. ...

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

    我们把数据可视化出来,为的就是进行一些针对数据的操作. 这里介绍一下DataView的排序功能和搜索功能. 掌握这两个技能,能够让写出的数据界面内的数据能够依据要求进行排序,能够进行数据的搜索显示灯功 ...

  3. HTML5开发移动web应用——SAP UI5篇(6)

    <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...

  4. HTML5开发移动web应用——SAP UI5篇(8)

    本次对之前学习的SAP UI5框架知识进行简单小结.以及重点部分知识的梳理. 1.在UI5使用过程中,命名空间的概念非常重要. 2.一般的sap组件引用格式例如以下: sap.ui.define([ ...

  5. HTML5开发移动web应用——SAP UI5篇(7)

    SAPUI5中支持利用Component对组件进行封装.想封装一个组件,Component的基本代码例如以下: sap.ui.define([ "sap/ui/core/UIComponen ...

  6. HTML5开发移动web应用——SAP UI5篇(9)

    之前我们对于app的构建都是基于显示的.如今我们来格式化一下,引入很多其它的SAP UI5组件概念.这使得APP的一个界面更有层次性.更像是一个手机应用的界面,而且更好地使用SAP UI5中提供的功能 ...

  7. HTML5开发实战——Sencha Touch篇(1)

    学习了很多主要的Sencha Touch内容,已经了解了Sencha Touch的开发模式.接下来一段时间我们将利用Sencha Touch来进行自己的web应用构建. 先要解决的是前端的问题.从最简 ...

  8. html5外包—长年承接html5外包业务:《Sencha Touch权威指南》下载

    <Sencha Touch权威指南>内容简介:如何才能全面而透彻地理解和掌握移动应用开发框架Sencha Touch并开发出令人心动的移动应用?<Sencha Touch权威指南&g ...

  9. HTML5开发移动web应用—JQuery Mobile(1)

    JQuery Mobile是一个简单易用的web移动app开发框架.使用它就像使用jQuery一样,引入必要的文件就可以. 最基础的jQuery Mobile文件的结构代码例如以下: <body ...

随机推荐

  1. 文件拷贝后无法编辑,用chown修改所有者和分组

    文件拷贝后无法编辑,chmod查看权限,发现当前用户不在文件里的所有者或所有组你,需用chwon修改拥有者和分组. 实例1:改变拥有者和群组 chown mail:mail log2012.log - ...

  2. malloc&&free的系统运行机制及其源代码的理解

    一.malloc()和free()的基本概念以及基本用法: 1.函数原型及说明: void *malloc(long NumBytes):该函数分配了NumBytes个字节,并返回了指向这块内存的指针 ...

  3. HDU-3718 Similarity

    题目只有26个字母,所以我们新建一个二分图,v[i][j]表示字母i对应字母j时能成功匹配的个数,给这个边矩阵v求个最大匹配就是答案. #include <cstdlib> #includ ...

  4. centos中简易安装docker

    centos中简易安装docker准备环境要求:请确保自己的centos的内核版本大于3.10,使用如下linux命令: uname -r1显示如下类似信息: 3.10.0-862.3.3.el7.x ...

  5. 严格次小生成树[BJWC2010] (树链剖分,倍增,最小生成树)

    题目链接 Solution 有几点关键,首先,可以证明次小生成树一定是由最小生成树改变一条边而转化来. 所以需要枚举所有非最小生成树的边\((u,v)\).并且找到 \(u\) 到 \(v\) 的边中 ...

  6. Idea连接服务器docker并部署代码到docker实现一键启动

    好记性不如烂笔头,写笔记是为了回头看的. 谁要是不小心搜了看了,如有不足之处敬请谅解. 一.准备工作 虚拟机centos7.X,docker1.3.X,Win10 Idea2018.1 默认Idea已 ...

  7. 【NOIP2015】信息传递(强连通分量)

    题意:找一张图中的最小环 O(n) 思路:强连通分量tarjan即可 注意环中节点数>1 ..]of longint; n,i,ans,tot,id,top,time,x:longint; pr ...

  8. Javascript 开启浏览器全屏模式

    作者:伯乐在线/前端空城师 通常在某些情况下,我们需要让浏览器开启全屏模式,以便获得更好的视觉体验,先看下全屏模式简单的几个API. 浏览器默认绑定 非全屏模式下, document的F11按键绑定开 ...

  9. 2019南昌邀请赛 C. Angry FFF Party 大数矩阵快速幂+分类讨论

    题目链接 https://nanti.jisuanke.com/t/38222 题意: 定义函数: $$F(n)=\left\{\begin{aligned}1, \quad n=1,2 \\F(n- ...

  10. 洛谷—— P1875 佳佳的魔法药水

    https://www.luogu.org/problemnew/show/1875 题目背景 发完了 k 张照片,佳佳却得到了一个坏消息:他的 MM 得病了!佳佳和大家一样焦急 万分!治好 MM 的 ...