applyTo、renderTo 区别

最新推荐文章于 2017-03-21 16:47:20 发布

sric08

最新推荐文章于 2017-03-21 16:47:20 发布

阅读量230

点赞数

applyTo、renderTo两个属性的作用都是指定控件渲染到那个dom，他们之间到底有啥区别呢（区别肯定有的，要不不可能共存的）

我们先假设我们渲染的 dom模型为 domP为父节点，它下边有两个子节点(domc1、domc2)可能有的朋友看了不是很明白，转成DIV可能直观些

<div id="domp">
     <div id="domc1"></div>
     <div id="domc2"></div>
</div>

大概就是这个意思了，要你还没看明白，哥也没法子了，不知道怎么讲能更直白些....

假如我们定义了个 panel

applyTo:'domp'：将 panel渲染到domp,domp的某些信息可能会被改写,注意，哥说的是可能，不是肯定，为什么这样说呢。假如在 domp 中定义了宽度width的信息，在 panel中也定义了，此时domp的宽度信息将被改写；如果domp 中定义了高度 height 的信息，而panel中没定义，这时，domp的信息就不会被改写了的；上边说的是domp的信息部分；再接着说添加顺序的问题。

panel这东西，分头head,跟体body两部分。渲染的规则，头将做为 domp 的第一个子节点被添加上，而体则做为最后个结点被添加上，渲染后， domp的dom模型就变成下边这样子了

<div id="domp">
      <head>...</head>   --头部代码添加在此
      <div id="domc1"></div>
      <div id="domc2"></div>
      <body>...</body>  --体部代码添加在此
</div>

renderTo:'domp'：将domp做为父节点，整个panel(一个容器DIV+head+body)作为其最后个子节点被添加上,这样的话，domp 的任何信息都不会被改变这是其一，添加顺序也简单多了

<div id="domp">
       <div id="domc1"></div>
      <div id="domc2"></div>
      <div  ...>  --新创建的panel DIV...中包括什么ID，样式的信息
         <head>...</head>   --panel的头部码
         <body>...</body>  --panel的体部代码
    </div>
</div>

其他的控件可能只有 body 这部分，添加顺序更简单了，你应该懂得！哥就不说了

也可能除了 head、body、还有什么别的部分，自己试下就知道了，不知道你看到这里看明白哥想说的意思了没(哥的表达很有问题，真的！)