ExtJs6学习(三)【DOM操作】

最新推荐文章于 2019-02-26 10:11:00 发布

.NET跨平台

最新推荐文章于 2019-02-26 10:11:00 发布

阅读量909

点赞数

分类专栏： ExtJS框架文章标签： dom extjs ajax html javascript

ExtJS框架专栏收录该内容

7 篇文章 4 订阅

订阅专栏

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);
});