ExtJs:el与contentEl区别

 

ExtJs:el与contentEl区别

标签： extjsdivhtmlclassfirebugfirefox

2010-06-23 09:44  2862人阅读  评论(0)  收藏  举报

  分类：

Web Tech（22） 

版权声明：本文为博主原创文章，未经博主允许不得转载。

通过firefox下的工具 firebug 或者 View Source Chart 工具查看el和contentEl生成的html区别：

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

Js代码

1. {   
2.       fieldLabel: "测试" ,   
3.            xtype: 'panel' ,   
4.       contentEl: 'div_test'   
5. }  

[js]  view plain  copy

1. {  
2.      fieldLabel: "上传图片",  
3.           xtype: 'panel',  
4.      contentEl: 'div_exam'  
5. }  

效果:

Html代码

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

[html]  view plain  copy

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

 

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

Js代码

1. {   
2.        fieldLabel: "测试" ,   
3.                xtype: 'panel' ,  
4.                width: 200,   
5.                      el: ' div_test '   

[js]  view plain  copy

1. }  

效果:

Html代码

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

转：

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