ExtJs6学习(三)【DOM操作】

2017-11-08 19:13:47来源:CSDN作者:WuLex人点击

分享

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 >',          '<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='.'即是在数组根节点循环。

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台