【ExtJs学习笔记】4.DOM操作

来源：互联网发布：c 调用程序的编程编辑：程序博客网时间：2024/05/19 03:27

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高度设置为200pxelement.setHeight(200); // 改变element大小为宽300px，高350pxelement.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='.'即是在数组根节点循环。

文章在Github上也有同步更新~
Github地址：https://github.com/AQingC/extjs-notes

阅读全文

1 0