文档章节

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

hanfeng
 hanfeng
发布于 2014/06/10 16:50
字数 746
阅读 2689
收藏 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
extjs2.0/3.4 入门教程以及一些例子

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

itwriter
2014/02/25
0
5
ExtJS中get、getDom、getCmp、getBody、getDoc的使用

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

Junn
2012/11/22
0
0
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 4.2 系列教程(1):Hello ExtJS4

1、下载ExtJS http://www.sencha.com/ 我下载的版本是 ext-4.2.1.883 2、使用Eclipse创建Dynamic Web Project ,不懂的自行google(今天下午彻底挂了)or 百度 3、引入ExtJS库 复制ext目录下...

hanfeng
2014/06/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Univalsal_ImageLoader源码结构与创建者模式 初步小结

最近在回归看Univalsal_ImageLoader源码,本想自己也实现试试写一个,看源码是为了学习看能否使用,助于自己可以写出有自己逻辑结构的代码。 首先我们初始化ImageLoader的配置初始化的时候,...

DannyCoder
26分钟前
0
0
计算卷积神经网络浮点数运算量

前言 本文主要是介绍了,给定一个卷积神经网络的配置之后,如何大概估算它的浮点数运算量。 相关代码:CalFlops,基于MXNet框架的 Scala 接口实现的一个计算MXNet网络模型运算量的demo。 正文...

Ldpe2G
今天
1
0
Sql语言与MySql数据库

1. 数据库简介 1. 数据库,就是存储数据的仓库,只能通过sql语言来访问,数据库也是一个文件系统。通常,MySQL、Oracle等数据库,也被称为关系型数据库,其保存的不仅仅只是数据,还包括数据...

江左煤郎
今天
1
0
IDEA 取消自动import .*

打开设置 > Editor > Code Style > Java > Scheme Default > Imports ① 将 Class count to use import with "*" 改为 99 (导入同一个包的类超过这个数值自动变为 * ) ② 将 Names count ......

乔老哥
今天
3
0
PostGIS学习笔记(开篇)

PostGIS事实上算是笔者开始写博客的第一篇内容。而事实上那篇博文的内容并不丰富,笔者对PostGIS的了解仍然不多,然而17年在OSGeo课程学习时对PostGIS又有了进一步了解,并逐步发现它的强大。...

胖胖雕
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部