el与contentEl区别

最新推荐文章于 2020-10-19 08:59:23 发布

原创最新推荐文章于 2020-10-19 08:59:23 发布 · 365 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #Java #HTML

extjs 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了在ExtJS框架中使用el和contentEl属性的不同之处，包括它们如何影响Ext元素panel的嵌入方式，并解释了el、contentEl及id属性的具体作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、把<div id="div_test"></div>嵌入到当前Ext元素panel内:


{    
      fieldLabel: "测试" ,    
           xtype: 'panel' ,    
      contentEl: 'div_test'    
}   
{
     fieldLabel: "上传图片",
          xtype: 'panel',
     contentEl: 'div_exam'
}

效果，Html代码：


< div class = "x-panel-body x-panel-body-noheader" id = "ext-gen155" style = "width: 500px;" >    
       < div id = " div_test " > </ div >    
</ div >    
<div class="x-panel-body x-panel-body-noheader" id="ext-gen155" style="width: 500px;">
      <div id="div_exam"></div>
</div>

2、.把当前Ext元素panel嵌入到<div id="div_test"></div>内


{    
       fieldLabel: "测试" ,    
       xtype: 'panel' ,   
       width: 200,    
       el: ' div_test '    
}

效果，Html代码：


< div id = "div_test" >    
       < div class = "x-panel-body x-panel-body-noheader" id = "ext-gen155" style = "width: 500px;" > .... </ div >    
</ div >

el和contentEl、id这些属性的区别:el是生成的id；如果用了el，它会解析一下html里的元素。contentEl是包含的内容；id是给这个组件设置的id；如果只用id，它还是创建组件，最后让这个组件的id等于你设置的id而已。el的步骤比id多一些，如果你没自己设置id，他就自动生成一个。