通过firefox下的工具 firebug 或者 View Source Chart 工具查看el和contentEl生成的html区别:
1、把<div id="div_test"></div>嵌入到当前Ext元素panel内:
- {
- fieldLabel: "测试" ,
- xtype: 'panel' ,
- contentEl: 'div_test'
- }
效果:
- < 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 '
效果:
- < 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,他就自动生成一个。要想做到真正的理解就要看源码了。