[Ext JS 4] contentEL,renderTo, applyTo 释义与区别

来源：互联网发布：鼠标宏设置软件编辑：程序博客网时间：2024/05/16 18:41

前言

经常使用contentEL,renderTo, applyTo 来增加HTML元素或是Ext JS 组件，这几个之间有什么关系，为什么Ext JS要提供这几种不同的方式？

官方解释

ContentEL

从Ext.AbstractComponent这个类开始有这个配置。

使用一个已存在的HTML元素，或者是这个元素的id 来作为某个组件的的内容。(是在组件渲染后加入)

需要注意的是：

在render事件触发的时候，在文档中还找不到这个元素。这个HTML元素不会参与组件使用的布局方案。

为了防止添加进面板时出现短期的闪烁，最好时添加 x-hidden或是x-hide-display 的CSS 类。

renderTo

从Ext.AbstractComponent这个类开始有这个配置。

指定某个组件要渲染的元素的id 或是DOM元素。

注意：

如果这个组件将会是一个容器的子项的话，不要使用这个配置选项。因为它负责了容器的布局管理器的渲染和管理子项的任务。

使用这个配置，不需要呼叫 render()

ContentEl VS renderTo

这两者的可比性不强，因为使用的目的完全不同。

contentEl是在Ext的组件中插入HTML的元素。而renderTo则是在HTML的元素中插入Ext 的组件。

所以，强制使用到这两个的配置的状况也是可以的，类似：

[html] view plaincopy
<!--Add by oscar999-->  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<HTML>  
<head>  
<title> New Document </title>  
<META NAME="Author" CONTENT="oscar999">  
<script type="text/javascript" src="extjs/ext-all.js"></script>  
<link href="extjs/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet" type="text/css" />  
  
<script>  
Ext.onReady(function(){  
      
    Ext.create('Ext.panel.Panel', {  
        title: 'Hello',  
        width: 200,  
        html: 'Hello World!',  
        contentEl: 'content',  
        renderTo: 'content-div'  
    });       
                                          
});  
</script>  
</head>  
<body>  
  
<div id="content">111111</div>  
<div id="content-div"></div>  
  
</body>  
</html>  

这里会把 id 为content 的内容移到 content-div 下面，所以注意这里有个移动的操作。

applyTo VS renderTo

其实在Ext JS4 中已经取消这个配置选项了，但是为了和以前版本兼容，还是可以使用的。使用的效果是完全一样的，都是把component 产生的内容插入到HTML的元素中。看例子：

[html] view plaincopy
<!--Add by oscar999-->  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<HTML>  
<head>  
<title> New Document </title>  
<META NAME="Author" CONTENT="oscar999">  
<script type="text/javascript" src="extjs/ext-all.js"></script>  
<link href="extjs/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet" type="text/css" />  
  
<script>  
Ext.onReady(function(){  
      
    Ext.create('Ext.Button', {  
        renderTo: 'render-div',  
        text    : 'Click me',  
        scale   : 'large'  
    });  
      
      
    Ext.create('Ext.Button', {  
        renderTo: 'apply-div',  
        text    : 'Click me',  
        scale   : 'large'  
    });   
                                          
});  
</script>  
</head>  
<body>  
<div id="render-div">render-div</div>  
<div id="apply-div">apply-div</div>  
</body>  
</html>  

网络上有说这两者使用的效果不同（component产生内容放置的位置不一样）

http://www.cnblogs.com/yinzixin/archive/2010/01/06/1640233.html

不过这篇文章使用的是Ext JS 3版本，不知道是否是在 Ext JS 4中统一了。

0 0