文档章节

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

hanfeng
 hanfeng
发布于 2014/06/10 16:50
字数 746
阅读 2621
收藏 3
点赞 0
评论 0

在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
博文 44
码字总数 36874
作品 0
福州
高级程序员
ZooKeeper 可视化工具 - ZooHelper

ZooHelper 一款基于 PHP + ExtJS 开发的 ZooKeeper 可视化工具 工具特性 树形展示znode节点 支持znode节点CURD操作 下载地址 https://github.com/yoonper/ZooHelper 环境要求 Linux PHP >= 5...

YoonPer ⋅ 05/28 ⋅ 0

ExtJS对类型为xtype:button的按钮进行不可用置灰的设置

在项目中会根据业务需要对页面中的组件进行各种操作,比如隐藏、改变组件显示名称、可用不可用等。今天介绍下如何使用ExtJS对xtype:button的按钮进行可用和不可用的设置。 页面中xtype:butto...

laowang2915 ⋅ 05/31 ⋅ 0

HTTP请求状态及jQuery AJAX请求异常处理

上一周调优一个项目的Js部分,其中一个严重的问题就是在页面初始化数据时,没有对异常进行处理, 导致Loading一直在等待中,无提示无处理。在用户体验上很不好,即使网络条件无法保证,在出错...

临江仙卜算子 ⋅ 前天 ⋅ 0

物联网和前端技术,两者相辅相成并且互相促进 —— 阿里云 MVP 黄强专访

黄强,江苏智慧新吴信息科技有限公司 ,前端架构师。 一直从事前端开发,从 jQuery,ExtJs,Backbone、Angular 到 React 一路走来,深入实践不同业务领域的前端平台架构,致力于前端工程化和...

花肉酱 ⋅ 04/20 ⋅ 0

JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒 ⋅ 05/10 ⋅ 0

创业还差一个程序员?也许你只是没找对方法 —— 南京云栖大会 Tech Insight 创业公司的窘境和解法

你也许经常听到一些人说:”我有一个创业的点子,就差一个程序员了“,也许隔三差五就有人向你打听,哪里能挖到最合适的程序员? 创业是一个永恒的话题,技术人才紧缺也是一个永恒的话题。面...

花肉酱 ⋅ 04/23 ⋅ 0

ExtJS Getting Started

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

豆仔 ⋅ 2012/11/09 ⋅ 1

extjs2.0/3.4 入门教程以及一些例子

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

itwriter ⋅ 2014/02/25 ⋅ 5

ExtJS中get、getDom、getCmp、getBody、getDoc的使用

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

Junn ⋅ 2012/11/22 ⋅ 0

Maven的本地仓库、中心仓库、私服(NEW)

本地仓库 设置本地仓库到指定目录,而不使用Maven默认的配置(默认放在C:/user/m2.目录下) 打开Maven的解压目录E:softapache-maven-3.1.0conf,修改settings.xml 配置localRepository即可完...

SuShine ⋅ 05/23 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

解决yum安装报错Protected multilib versions

使用yum安装报错Protected multilib versions原因是因为多个库不能共存,不过更新的话也并不行,但是可以在安装命令后面加上如下一段命令: --setopt=protected_multilib=false 案例: 比如需...

北岩 ⋅ 28分钟前 ⋅ 0

为什么要学习Typescript???

简单来说 目前的typescript就是未来的javascript 为什么?? 这要从ECMA-262标准的第4版说起 对了 我们说的ES5 其实是ECMAScript3.1这个替代性建议被扶正了而已... 那么 第4版标准是什么? 看看...

hang1989 ⋅ 32分钟前 ⋅ 0

linux安装ipfs

一、下载ipfs # cd /usr/local/ipfs/ # wget https://dist.ipfs.io/go-ipfs/v0.4.15/go-ipfs_v0.4.15_linux-amd64.tar.gz # tar -zxvf go-ipfs_v0.4.15_linux-amd64.tar.gz 二、安装ipfs # ......

八戒八戒八戒 ⋅ 38分钟前 ⋅ 0

jvm程序执行慢诊断手册

生产环境最多的几种事故之一就是程序执行慢,如果是web服务的话,表现就是响应时间长。本文分享,从业多年形成的排查守则。 诊断步骤 系统资源查看 首先是系统资源查看,而且必须是在第一步。...

xpbob ⋅ 39分钟前 ⋅ 0

YII2 advanced 高级版本项目搭建-添加API应用以及多应用

一、YII安裝 安裝yii可以用composer安裝,也可以在yii中文社区下载归档文件安装 composer安装就不介绍了,因为要安装composer,比较麻烦,当然安装了composer是最好的,以后安装yii的插件要用...

botkenni ⋅ 39分钟前 ⋅ 0

在jdk1.8的环境下模拟永久代内存溢出

相信不少小伙伴在看深入理解Java虚拟机的时候,作者给我们举例一个demo来发生PermGen space 1、通过List不断添加String.intern(); 2、通过设置对应的-XX:PermSize与-XX:MaxPermSize(更快看到...

虾几把写 ⋅ 今天 ⋅ 0

开发OpenDaylight组件的完整流程

在前面介绍学习了OpenDaylight的几个重要模块后,这里再来介绍下完整开发一个模块的过程。 OSGI的bundles提供被其他OSGI组件调用的服务。这个教程中展示的是Data Packet Service去解析数据包...

wangxuwei ⋅ 今天 ⋅ 0

Java序列化和反序列化

1、什么是序列化和反序列化 序列化:把对象转换为字节序列的过程。 反序列化:把字节序列恢复成对象的过程。 2、被序列化的类需要实现serializable接口,只是为了标注该对象是可以被序列化的...

IT-Mamba ⋅ 今天 ⋅ 0

流式构建原理

流式构建需要达到分钟级的数据更新频率,Kylin采用类似于Spark Streaming的做法,每隔数分钟进行一次微构建。这边的构建需要考虑到一个延迟因素,分布式网络存在延迟等因素,该时间段的数据有...

无精疯 ⋅ 今天 ⋅ 0

在maven项目工程编写solr代码,需要的依赖

solrJ <dependency> <groupId>org.apache.solr</groupId> <artifactId>solr-solrj</artifactId> <version>6.6.2</version> </dependency> <dependency> <groupId>org.apache.httpcomponents<......

爱运动的小乌龟 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部