2.4 关于Ext.onReady 代码为什么写在Ext.onReady中，而不是在body中添加一个onload事件并在onload事件中运行呢？主要原因是Ext.onReady在DOM模型加载完毕后即可进行操作，而无需像onload事件那样，等待页面的所有资源都加载完毕后才进行操作，尤其是在页面有大图片这类资源的时候。下面我们来看看Ext.onReady是如何做到这点的。在Loader.js文件可以找到Ext.onReady的定义：
Ext.onReady = function(fn, scope, options) { Loader.onReady(fn, scope, true, options); }; 在这里调用了Loader对象的onReady方法，在Loader.js中可找到如下定义： onReady: function(fn, scope, withDomReady, options) { var oldFn; if (withDomReady !== false && Ext.onDocumentReady) { oldFn = fn; fn = function() { Ext.onDocumentReady(oldFn, scope, options); }; } fn.call(scope); },在上面的代码中，因为调用时withDomReady为true，所以只需判断Ext.onDocumentReady是否存在，如果存在，就建立一个匿名函数fn，准备执行Ext.onDocumentReady方法。最后是调用函数fn，执行Ext.onDocumentReady。在EventManger.js中可找到Ext.onDocumentReady的定义：
onDocumentReady: function(fn, scope, options){ options = options || {}; var me = Ext.EventManager, readyEvent = me.readyEvent; options.single = true; readyEvent.addListener(fn, scope, options); if (Ext.isReady) { readyEvent.fire(); } else if (document.readyState == 'complete') { me.fireDocReady(); } else { me.bindReadyEvent(); } },在上面的代码中，readyEvent是Ext.util.Event的实例，options.single的作用是规定ready-Event事件只执行一次。接着将函数添加到Event实例内的监听事件列表中，最后判断DOM模型是否已加载完成。如果已加载完成，则调用fire方法依次执行监听事件列表中的函数。这样做的目的是：当存在多个onReady方法时，能保证所有的函数都能执行。如果还没有加载完成，而document对象的readyState属性为“complete”，表示文档其实已经加载完成了，但是没有设置isReady属性为true，那么可调用fireDocReady方法，其代码如下：
fireDocReady: function(){ var me = Ext.EventManager; if (!Ext.isReady) { Ext.isReady = true; if (document.addEventListener) { document.removeEventListener('DOMContentLoaded', me.fireDocReady, false); window.removeEventListener('load', me.fireDocReady, false); } else { if (me.readyTimeout !== null) { clearTimeout(me.readyTimeout); } if (me.hasOnReadyStateChange) { document.detachEvent('onreadystatechange', me.checkReadyState); } window.detachEvent('onload', me.fireDocReady); } Ext.supports.init(); me.onWindowUnload(); me.readyEvent.fire(); } },在上面的代码中，如果isReady不是true，则将其设置为true，然后移除文档的监听事件。首先调用Ext.supports的init方法检测当前运行环境的信息；然后调用onWindowUnload方法为文档绑定unload事件，触发后会删除页面的所有元素；最后再调用readyEvent的fire方法，开始执行我们定义的代码。如果文档还没有加载完成，则执行bindReadyEvent方法，其代码如下：
bindReadyEvent: function(){ var me = Ext.EventManager; if (me.hasBoundOnReady) { return; } if (document.addEventListener) { document.addEventListener('DOMContentLoaded', me.fireDocReady, false); window.addEventListener('load', me.fireDocReady, false); } else { if (!me.checkReadyState()) { document.attachEvent('onreadystatechange', me.checkReadyState); me.hasOnReadyStateChange = true; } window.attachEvent('onload', me.fireDocReady, false); } me.hasBoundOnReady = true; },看懂以上代码就应该很清楚整个执行过程了。在代码中，如果没有在页面中绑定监听事件，则绑定事件，非IE浏览器是绑定“DOMContentLoaded”事件，IE是绑定onload事件。对于旧版本的IE，会调用checkReadyState方法检查页面是否准备好，因为旧版本IE只能使用替代办法检查DOMContentLoaded事件。事件触发后执行fireDocReady方法。
相关资源：七夕情人节表白HTML源码(两款)