HTML5开发移动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的元素
HTML5开发移动web应用——Sencha Touch篇(7)的更多相关文章
- HTML5开发移动web应用——Sencha Touch篇(8)
DataView是Sencha Touch中最重要的组件,用于数据的可视化.数据可视化的重要性不言而喻,能够讲不论什么数据以形象的方式展示给用户. 眼下,怎样更好地可视化是很多公司或框架都在追求的. ...
- HTML5开发移动web应用——Sencha Touch篇(10)
我们把数据可视化出来,为的就是进行一些针对数据的操作. 这里介绍一下DataView的排序功能和搜索功能. 掌握这两个技能,能够让写出的数据界面内的数据能够依据要求进行排序,能够进行数据的搜索显示灯功 ...
- HTML5开发移动web应用——SAP UI5篇(6)
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...
- HTML5开发移动web应用——SAP UI5篇(8)
本次对之前学习的SAP UI5框架知识进行简单小结.以及重点部分知识的梳理. 1.在UI5使用过程中,命名空间的概念非常重要. 2.一般的sap组件引用格式例如以下: sap.ui.define([ ...
- HTML5开发移动web应用——SAP UI5篇(7)
SAPUI5中支持利用Component对组件进行封装.想封装一个组件,Component的基本代码例如以下: sap.ui.define([ "sap/ui/core/UIComponen ...
- HTML5开发移动web应用——SAP UI5篇(9)
之前我们对于app的构建都是基于显示的.如今我们来格式化一下,引入很多其它的SAP UI5组件概念.这使得APP的一个界面更有层次性.更像是一个手机应用的界面,而且更好地使用SAP UI5中提供的功能 ...
- HTML5开发实战——Sencha Touch篇(1)
学习了很多主要的Sencha Touch内容,已经了解了Sencha Touch的开发模式.接下来一段时间我们将利用Sencha Touch来进行自己的web应用构建. 先要解决的是前端的问题.从最简 ...
- html5外包—长年承接html5外包业务:《Sencha Touch权威指南》下载
<Sencha Touch权威指南>内容简介:如何才能全面而透彻地理解和掌握移动应用开发框架Sencha Touch并开发出令人心动的移动应用?<Sencha Touch权威指南&g ...
- HTML5开发移动web应用—JQuery Mobile(1)
JQuery Mobile是一个简单易用的web移动app开发框架.使用它就像使用jQuery一样,引入必要的文件就可以. 最基础的jQuery Mobile文件的结构代码例如以下: <body ...
随机推荐
- POJ 1656 Counting Black
Counting Black Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 9772 Accepted: 6307 De ...
- iOS学习笔记34-加速计和陀螺仪
一.CoreMotion框架介绍 我们知道有一些iOS的应用,会有一些特殊的要求,比如: 电子罗盘指南针之类的应用:让我们知道方向. 运动类型软件:让我们知道我们跑步多少公里. 社交软件中的摇一摇功能 ...
- Multiset ------ 多重集合
Multiset的中文名是多重集合,其实就是集合的扩展版.唯一的不同是集合中一个值只能出现一次,而多重集合中一个值可以出现多次. 粗略看了看MSDN,在STL中,multiset和set的成员函数声明 ...
- BZOJ4514 [Sdoi2016]数字配对 【费用流】
题目 有 n 种数字,第 i 种数字是 ai.有 bi 个,权值是 ci. 若两个数字 ai.aj 满足,ai 是 aj 的倍数,且 ai/aj 是一个质数, 那么这两个数字可以配对,并获得 ci×c ...
- BZOJ3160 万径人踪灭 【fft + manacher】
题解 此题略神QAQ orz po神牛 由题我们知道我们要求出: 回文子序列数 - 连续回文子串数 我们记为ans1和ans2 ans2可以用马拉车轻松解出,这里就不赘述了 问题是ans1 我们设\( ...
- UVA12230 Crossing Rivers (数学期望)
题目链接 题意翻译 一个人每天需要从家去往公司,然后家与公司的道路是条直线,长度为 \(D\). 同时路上有 \(N\) 条河,给出起点和宽度\(W_i\) , 过河需要乘坐速度为\(V_i\) 的渡 ...
- 完全平方数(bzoj 2440)
Description 小 X 自幼就很喜欢数.但奇怪的是,他十分讨厌完全平方数.他觉得这些数看起来很令人难受.由此,他也讨厌所有是完全平方数的正整数倍的数.然而这丝毫不影响他对其他数的热爱. 这天是 ...
- poj 6243 Dogs and Cages
Dogs and Cages Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)To ...
- 【BZOJ1059】矩阵游戏(二分图最大匹配)
题意:矩阵游戏在一个N*N黑白方阵进行.每次可以对该矩阵进行两种操作: 行交换操作:选择矩阵的任意两行,交换这两行(即交换对应格子的颜色) 列交换操作:选择矩阵的任意行列,交换这两列(即交换对应格子的 ...
- Oracle Dual 表详解
1.DUAL表的用途Dual 是 Oracle中的一个实际存在的表,任何用户均可读取,常用在没有目标表的Select语句块中--查看当前连接用户SQL> select user from dua ...