?????????????????????????????????????????? 
?
导言：
???????? wegidit 部分是 Ext 最吸引人，也是最绚丽、最好看的部分。相当多的人就是冲 Ext 的这一点才开始学习使用 Ext 的（我也是）。
很多 js 库都曾尝试封装出自己的 UI 组件，毫无疑问， Ext 是封装得最好的一个。虽然，确实像大家一直抱怨的那样， Ext 可视组件的渲染效率方面还存在相当多的问题。
???????? UI 组件是 Ext 库里面最为庞大的部分，代码量很多。前面所有基础的封装在这里都要派上用场，与事件的绑定和处理、 CSS 的渲染、正则表达式过滤、 Ajax ，所有的要点都要在 UI 部分交汇，因此 UI 组件部分可以说是枝节丛生，纷繁复杂。
????????
?
我曾看过一本书，叫《密码传奇》，里面讲述了二战期间，德军与盟军的情报战。德军发明了一种叫 Enigma 的加密机器，虽然采用的算法并不高深，都是原始加密方法的改进、加强版。只是利用机械的力量，提高加密计算的次数。比如原始的加密，依靠人工计算，最多算几万次，那么现在让机器把相同的过程重复十万次。不要小看这种看似机械简单的重复，这种数量上的提升直接导致了加密水平上质的变化。直到战争结束，盟军都没有能够完全解开这种密码。
这里不是为了讲故事，而是为了着重提出书里面的一段话，大概意思是这样的：按照正向思维加密出来的密码，在破译者看来就是天书。如果加密的所要花费的时间是 1 天，那么解密需要的时间可能就是 1 个月、 1 年，甚至永远无法解开。
?
?
?
Ext 的代码库已经相当庞大，但是很可惜，我们不是代码库的开发人员，所以源码分析这个事情对于我们来说就类似一种解密的过程，是逆向思维。如果企图完全去领会 Ext 的开发者当时的思路，细扣每一行代码，实在不是一件容易的事情。因此，我想还是用演绎的方法来进行这部分内容的分析：先来分析一个典型的组件，然后可以推广到类似的组件。
这是我学习未知东西方法，把它也用在 Ext 的源码分析上来。虽然这种方法让我在学校的时候吃了不少亏，比如《高等数学》，学校希望的终极目的是你能解题目、能考试，而且能靠高分。但是我老是不明白：
像泰勒级数这种东西到底能用在什么地方？
泰勒当时是怎么想到怎么好的方法的？
他的思想当时处于一种什么样的状态？
这些东西它是怎么一步一步演变到如今这种状态的？
诸如此类 ……
这么追下去，整个的学期就完全费在了看“数学史”这类书上。至于考试，就只能勉强混个 70 分而已（耿耿于怀啊！）。
呵呵。
????????
????????
好了，扯远了，开始 Panel 的分析。
?
?
Ext.Panel ： DIV+CSS 的混合物
???????? 说到底，浏览器能识别和解析的是一些 Html 标签，因此无论 Ext 的 UI 组件封装得有多严实，最终肯定是要创建出原始的 DOM 元素出来。基于这一点，我们的分析就找到了可以下手的地方。
????????
先 new 一个最简单的 Ext.Panel 对象出来，利用 FireBug ，看一下脚本创建出来的 DOM 元素到底是什么样子。
Ext.onReady(function(){
???????? var p=new Ext.Panel({
?????????????????? title:' 标题文字 ',
?????????????????? width:400,
?????????????????? height:300,
?????????????????? renderTo:Ext.getBody()
???????? })
})
好，这是一个最简单不过的 Panel ，来看它显示出来的样子：
?
打开
FireBug
，查看元素：
?
OK
，不是很意外，由一堆的
DIV
和
CSS
组合出了这麽一个
Panel
对象。
?
为了验证一下，我们自己来写标签和
CSS
，看能不能直接生成出一个手工的
Panel
对象。好，我们不写脚本，直接的
Html
标签和
CSS
，外加一张小图片来合成
Panel
。
代码如下：
?
?
?
<html>
<head>
<title>Ext源码分析</title>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<style type="text/css">
.mydiv{
border-style:solid;
border-color:#99bbe8;
border-width:0;
}
.myheader{
overflow:hidden;
zoom:1;
color:#15428b;
font:bold 11px tahoma,arial,verdana,sans-serif;
padding:5px 3px 4px 5px;
border:1px solid #99bbe8;
line-height:15px;
background:transparent url(white-top-bottom.gif) repeat-x 0 -1px;
}
.mybody{
border:1px solid #99bbe8;
border-top:0 none;
overflow:hidden;
background:white;
position:relative;
}
</style>
</head>
<body>
<div class="mydiv" style="width:400px">
<div class="myheader">
<span>这里是标题</span>
</div>
<div>
<div class="mybody" style="width:398px;height:273px;">
这是完全手工模拟出来的一个Panel
</div>
</div>
</div>
</body>
</html>
?
（里面用到的一张小图片请到附件查找，或者找Ext资源包下的同名的那张。）
外观：
?
?
怎么样，一模一样吧？
?
?
?
?
效率问题从何而来？
为上面的 Panel 添加两个小按钮，看看生成出来的标签又是什么样子。
外观：
实际生成的标签：
总体：
?
?
?
Tabel 里面的细节：
?
?
??????? 可以看出，我们仅仅为这个
Panel
添加了两个
Button
，出来一长串的标签。这还是最简单的
Panel
，放到正常的
Ext
应用里面，可以想象，脚本实际生成出来的
Html
标签肯定是数以万计（甚至
10
万到百万）这个数量级。
???????? 虽然目前的浏览器对
Html
标签的解析速度是相当之快，但是对于这个数量级的
Html
标签加上图片、
CSS
、事件绑定、回调函数处理
……
这些杂七杂八的事情，其执行速度还有渲染的流畅程度必定会受到影响无疑。
????????
比较客观地说，这种效率问题并不是
Ext
本身的问题，也不是靠
Ext
做多大的改进和代码优化所能彻底解决的，只能期待
JavaScript
引擎在这方面能做出更多的努力（或许是一种编译型的
javascript
？）。
?
?
解析跟进
????????
以上解释了
Panel
和这一堆可视化的组件“是什么？”的问题。那么自然而然，接下来就得解释“为什么？”和“怎么办？”的问题。毕竟，明白道理不是最终目的，最终目的是能把这些道理为我所用，能多快好省地解决项目里面实实在在的问题才是终极彼岸。
??????
后面的分析还是针对
Panel
，这样可以避免一些重复劳动。
总结起来，后面的部分需要解决这些问题：
1、
?
Panel
里面的这一堆的
Div
是怎么创建出来的？
2、
?
CSS
是怎么与
Div
或者
Tabel
这些原生的标签绑定在一起的？
3、
?
怎么绑定、处理事件的？
4、
?
怎么来扩展自己的小组件，或者改动甚至优化原有组件的实现呢？
5、
?
使用组件、扩展组件过程中常见的问题甚至
Bug
有哪些？怎么解决？
?
（如果以上任何一个问题你恰好研究过，记得跟我联系，帮助一下。也省得我犯重复发明轮子的愚蠢错误。群
88403922
）
?
?
?
?
光是EXT插入一个按钮就生成海量的table系及其他附带元素，就很是个问题。
我对EXT的这部分一直是持完全保留的意见。
所以我也要步楼主的后尘，学习一下EXT的源码咯~
支持一下楼主~
早就应该开始分析源码了，翻译API没有啥意义。
