DOM操作
这篇文章是来自于《ExtJS in Action》的总结。
用ExtJs启动代码
过去初始化JavaScript代码是为加载的HTML页面的body标签添加onLoad()方法,虽然这种调用JavaScript的方法可行,但是对于启用Ajax的web2.0网站和应用来说并不理想,因为onLoad()在不同浏览器上触发的时间不一样。
ExtJs采用 Ext.onReady
来解决触发问题,并作为启用代码的基础。ExtJs通过侦测代码在哪种浏览器上执行,以及管理对DOM就绪状态的侦测,来实现跨浏览器兼容在恰当的时间执行代码。
Ext.onReady
是Ext.EventManager.onDocumentReady的一个引用,并接受三个参数:调用的方法、从中调用方法的作用域、以及传给该方法的任何选项。
下面是一个触发警告框的实例:
Ext.onReady(function () {
Ext.Msg.alert('Hello', 'The DOM is Ready!');
});
在上述实例中,把一个所谓匿名函数传递给Ext.onReady作为唯一的参数,当DOM做好准备时执行。
用Ext.Element管理DOM元素
几种常见用法
1. 获取DOM元素
Ext.get('elmentId');
2. 改变元素样式
// 将element高度设置为200px
element.setHeight(200);
// 改变element大小为宽300px,高350px
element.setSize(300, 350, {duration: 1s, easing: 'bounceOut'});
setSize()第三个参数为改变动画,duration指动画时间,easing是动画转换效果,具体信息可以查询API。
3.操作节点
- 创建一个文本节点
myDiv.createChild('child');
- 创建一个div
myDiv.createChild('<div>child</div>');
myDiv.createChild({
tag: 'div',
html: 'child'
});
- 嵌套创建子节点
myDiv.createChild({
tag : 'div',
id : 'nestedDiv',
style : 'border: 1px dashed; padding: 5px;',
children : {
tag : 'div',
html : '...a nested div',
style : 'color: #EE0000; border: 1px solid'
}
});
- 在顶端插入子节点
myDiv.insertFirst({
tag : 'div',
html : 'Child inserted as node 0'
});
- 将节点插入特定的索引
myDiv.createChild({
tag : 'div',
id : 'removeMeLater',
html : 'Child inserted as node 2 of myDiv1'
}, myDiv.dom.childNodes[3]);
- 删除子节点
element.remove()
使用模板和XTemplate
使用模板
var myTpl = new Ext.Template("<div>Hello {0}.</div>");
myTpl.append(document.body, ['Marjan']);
myTpl.append(document.body, ['Michael']);
myTpl.append(document.body, ['Sebastian']);
这段代码的执行结果是在body里面插入三个div元素,DOM结构如下:
<body>
<div>Hello, Marjan.</div>
<div>Hello, Michael.</div>
<div>Hello, Sebastian.</div>
</body>
可以看到,append操作时,每一个[]里的参数都替换了定义模板{}中的内容。所以,只需要设置一次模板,就可以使用不同的值插入DOM。
使用XTemplate执行循环操作
Ext.onReady(function() {
var tplData = [{
color : "#FFE9E9",
name : 'Naomi White',
age : 25,
dob : '03/17/84',
cars : ['Jetta', 'Pilot', 'S2000']
},{
color : "#E9E9FF",
name : 'John Smith',
age : 20,
dob : '10/20/89',
cars : ['Civic', 'Accord', 'Pilot']
}];
var myTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="background-color: {color}; margin: 10px;">',
'<b> Name :</b> {name}<br />',
'<b> Age :</b> {age}<br />',
'<b> DOB :</b> {dob}<br />',
'</div>',
'</tpl>'
);
myTpl.compile();
myTpl.append(document.body, tplData);
});
XTemplate即是解决了传入的数据是数组的问题。
tpl可以有for和if属性,样例中的for='.'
即是在数组根节点循环。