文档章节

ExtJS 4.2 系列教程(3):关于Ext.onReady()

hanfeng
 hanfeng
发布于 2014/06/10 16:50
字数 746
阅读 2736
收藏 3

在ext-all.js文件可以找到Ext.onReady的定义:

 Ext.onReady = function(fn, scope, options) {
        Loader.onReady(fn, scope, true, options);
    };

在这里调用了Loader对象的onReady方法,

  onReady: function(fn, scope, withDomReady, options) {
            var oldFn;

            if (withDomReady !== false && Ext.onDocumentReady) {
                oldFn = fn;

                fn = function() {
                    Ext.onDocumentReady(oldFn, scope, options);
                };
            }

            if (!Loader.isLoading) {
                fn.call(scope);
            }
            else {
                readyListeners.push({
                    fn: fn,
                    scope: scope,
                    priority: (options && options.priority) || 0
                });
            }
        },

在上面的代码中,因为调用时withDomReady为true,所以只需判断Ext.onDocumentReady是否存在,如果存在,就建立一个匿名函数fn,准备执行Ext.onDocumentReady方法。最后是调用函数fn,执行Ext.onDocumentReady。

在EventManger.js中可找到Ext.onDocumentReady的定义:

  onDocumentReady: function(fn, scope, options) {
            options = options || {};
            // force single, only ever fire it once
            options.single = true;
            readyEvent.addListener(fn, scope, options);

            // If we're in the middle of firing, or we have a deferred timer
            // pending, drop out since the event will be fired  later
            if (!(EventManager.isFiring || EventManager.hasDocReadyTimer)) {
                if (Ext.isReady) {
                    EventManager.fireReadyEvent();
                } else {
                    EventManager.bindReadyEvent();
                }
            }
        },

在上面的代码中,readyEvent是Ext.util.Event的实例,options.single的作用是规定ready-Event事件只执行一次。接着将函数添加到Event实例内的监听事件列表中,最后判断DOM模型是否已加载完成。如果已加载完成,则调用fire方法依次执行监听事件列表中的函数。这样做的目的是:当存在多个onReady方法时,能保证所有的函数都能执行。如果还没有加载完成,而document对象的readyState属性为“complete”,表示文档其实已经加载完成了,但是没有设置isReady属性为true,那么可调用fireDocReady方法,其代码如下:

 fireReadyEvent: function() {

            // Unset the timer flag here since other onReady events may be
            // added during the fire() call and we don't want to block them
            EventManager.hasDocReadyTimer = false;
            EventManager.isFiring = true;

            // Ready events are all single: true, if we get to the end
            // & there are more listeners, it means they were added
            // inside some other ready event
            while (readyEvent.listeners.length && !EventManager.isReadyPaused()) {
                readyEvent.fire();
            }
            EventManager.isFiring = false;
            EventManager.hasFiredReady = true;
            Ext.EventManager.idleEvent.fire();
        },

在上面的代码中,如果isReady不是true,则将其设置为true,然后移除文档的监听事件。首先调用Ext.supports的init方法检测当前运行环境的信息;然后调用onWindowUnload方法为文档绑定unload事件,触发后会删除页面的所有元素;最后再调用readyEvent的fire方法,开始执行我们定义的代码。


如果文档还没有加载完成,则执行bindReadyEvent方法,其代码如下:

 bindReadyEvent: function() {
            if (EventManager.hasBoundOnReady) {
                return;
            }

            // Test scenario where Core is dynamically loaded AFTER window.load
            if ( doc.readyState == 'complete'  ) {  // Firefox4+ got support for this state, others already do.
                EventManager.onReadyEvent({
                    type: doc.readyState || 'body'
                });
            } else {
                doc.addEventListener('DOMContentLoaded', EventManager.onReadyEvent, false);
                win.addEventListener('load', EventManager.onReadyEvent, false);
                EventManager.hasBoundOnReady = true;
            }
        },

看懂以上代码就应该很清楚整个执行过程了。在代码中,如果没有在页面中绑定监听事件,则绑定事件,非IE浏览器是绑定“DOMContentLoaded”事件,IE是绑定onload事件。对于旧版本的IE,会调用checkReadyState方法检查页面是否准备好,因为旧版本IE只能使用替代办法检查DOMContentLoaded事件。事件触发后执行fireDocReady方法。

© 著作权归作者所有

共有 人打赏支持
hanfeng
粉丝 19
博文 48
码字总数 36874
作品 0
福州
高级程序员
私信 提问
ExtJS Getting Started

公司的IM用的ExtJS,我自己写的用的jQuery,所以又得学习了,当然,相似之处肯定是有的,比如Ext.onReady()和$(document).ready()感觉就是差不多的东西,还有都得熟悉一下选择器...还是先入门...

豆仔
2012/11/09
0
1
ExtJS中get、getDom、getCmp、getBody、getDoc的使用

Ext中包含了几个以get开头的方法,这些方法可以用来得到文档中DOM、得到当前文档中的组件、得到Ext元素等,在使用中要注意区别使用。 1、get方法 get方法用来得到一个Ext元素,也就是类型为E...

Junn
2012/11/22
0
0
extjs2.0/3.4 入门教程以及一些例子

前言 有本资料叫extjs简易实用教程,讲得很棒,是初学者的福音——比起官方普遍较复杂的examples,这个教程更靠谱。而且虽说是2.x的教程,但同样适用于3.x——4.x就不知道了。 只是,有些问题...

itwriter
2014/02/25
0
5
eclipse+spket+Extjs4.2.1开发环境搭建

一、开发工具配置 1、http://www.eclipse.org/downloads/下载Eclipse,解压。 2、http://spket.com/download.html下载Plugin,解压后覆盖到Eclipse的目录。 3、启动Eclipse,选择window→pro...

南風
2014/08/20
0
0
ExtJS HelloWord

最近学ajax,接触到了Extjs这个强大的框架。我想通过我的学习笔记,最后可以让大家上手在项目中使用Ext。首先我会写一些基本的用于入门Ext的文章,打好基础是很重要的。在了解基础后,可能会...

郏高阳
2012/05/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

方之熙博士被任命为RISC-V基金会中国顾问委员会主席,加速RISC-V ISA在中国的应用

中国顾问委员会将就RISC-V基金会的教育和应用推广战略提供指导 今天在中国乌镇举行的世界互联网大会(World Internet Conference)上,RISC-V基金会(RISC-V Foundation)宣布,半导体行业资深人...

whoisliang
7分钟前
0
0
为了用户体验,不要做浏览器兼容

读者看到文章标题也许会感到奇怪,按照通常的经验来说,为了用户体验应该做浏览器兼容,以便让不同的浏览器用户都能有好的体验,从而增加网站的流量,但是我认为做浏览器兼容属于同样的工作重...

Bob2100
8分钟前
0
0
分布式定时任务架构 (二) xxl-job二次开发实践

4个月前,公司有任务调度的需求,需要一周内完成,时间非常紧。 需求有三点: web界面编辑cron表达式,启动,停止任务 接入公司的rpc成本较低,公司有自研的rpc,研发人员希望共用同一套注解 ...

勇哥和你一起学技术
24分钟前
0
0
React和Redux的连接react-redux

通过Redux文档来了解react-redux,在一段时间的实践后准备翻一翻源代码,顺便做些相关的总结。我看的代码的npm版本为v4.0.0,也就是说使用的React版本是0.14.x。 react-redux提供两个关键模块...

前端攻城老湿
46分钟前
1
0
1、Mybatis连接池配置 和 Context.xml的配置

注意: (1)mybatis 3.2 之前 通过 set get 方法 获取相关属性。之后通过属性姓名获取相关关联。 (2)mybatis 映射 优先为 sql 语句中的别名与实体类的属性进行映射。 (3)jndi Java用于调...

KingFightingAn
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部