Ext.onReady 这个函数我想是最常用的函数了吧,毕竟没有 ready 前什么也不可以做的。
onReady的参数是一个函数 。
其实真正的调用是
Ext.onReady = Ext.EventManager.onDocumentReady;
而 Ext.EventManager 则是一个管理事件的对象,而且是单例的,为啥不做成静态呢,应该是为了不暴露里面的 private 函数喽,这也是对
传统语言private函数的一个实现
。
Ext.EventManager = funtion() {
//private or privileged
function xx(){
};
var pub ={
//可以调用xx
};
//.....
return pub;
}();
而 onDocumentReady 则是将他的参数加入到一个自定义事件的 listener 列表中去了,关于自定义事件以及事件监听器如何排队,如何触发监听器暂时不分析了。可这个 event 怎么来的呢,正是在 onDocumentReady 初始的
onDocumentReady:function(f){
//页面加载好就直接触犯事件处理函数返回
//..
//页面没有加载好且自定义事件没有初始化,就初始化自定义事件
if(!docReadyEvent){
initDocReady();
}
//自定义事件有了,把事件处理函数添加到自定义事件的 listeners 列表,等待事件触发后批处理
}
在初始这个事件过程中,终于看到了我们熟悉的 onload
var initDocReady = function(){
//自定义事件,建立监听器队列
docReadyEvent = new Ext.util.Event();
//gecko内核,和opera利用那个DOMContentLoaded事件
if(Ext.isGecko || Ext.isOpera) {
document.addEventListener("DOMContentLoaded", fireDocReady, false);
}
//ie利用script的defer属性
else if(Ext.isIE){
document.write("<s"+'cript id="ie-deferred-loader" defer="defer" src="/'+'/:"></s'+"cript>");
var defer = document.getElementById("ie-deferred-loader");
defer.onreadystatechange = function(){
if(this.readyState == "complete"){
fireDocReady();
}
};
}
//safari没有办法?只能定时判断document,dom树的状态
else if(Ext.isSafari){
docReadyProcId = setInterval(function(){
var rs = document.readyState;
if(rs == "complete") {
fireDocReady();
}
}, 10);
}
//最坏情况,新浏览器??load 比上述事件先触发??
//fireDocReady 会判断如果已经触发过一次就不再处理了。
// no matter what, make sure it fires on load
E.on(window, "load", fireDocReady);
};
这样的话就实现了多个操作附加到了ext ready上面.
( 09年再读:ie 利用script defer属性 ,firefox监控domready事件,dom树加载完毕比window load事件要早得多,image标签加载需要时间的
)
页面加载判断与onload 研究
Defer And IE
javascript : defer execution
这样ext 屏蔽了浏览器差异 ,关键是ext使用了它的通用事件模型,从而整合到了一个统一的框架中
。
分享到:
相关推荐
代码如下: Ext.onReady(function() { Ext.Msg.alert(‘提示’, ‘逗号分隔参数列表’); //这种方式非常常见的 }); 效果图: 代码如下: Ext.onReady(function() { //定义 JSON(配置对象) var config = { ...
其中对于IE的检测很有意思。 以上代码,整理自Extjs的脚本,完全可以代替 Ext.onReady使用。
ext可编辑表格Ext.onReady(function() { Ext.QuickTips.init(); //格式化日期 function formatDate(value) { return value ? value.dateFormat('Y年m月d日') : ''; } // 别名 var fm = Ext.form; //...
案例如下: 代码如下: Ext.onReady(function(){ Ext.MessageBox.alert(“提示”,”请单击我,确定”,callBack); function callBack(id){ alert(“单击的按钮ID是:”+id); } Ext.MessageBox....
Ext.onReady(function() { /** * 1.创建一个window窗体 */ Ext.define('MyApp.MyWindow', { extend : 'Ext.Window', title : 'welcome!', initComponent : function() { this.items = [{ xtype : 'textfield', name ...
2.4 关于ext.onready / 38 2.5 关于ext.blank_image_url / 40 2.6 关于字体 / 42 2.7 ext js 4语法 / 42 2.8 本地化 / 60 2.9 为本书示例准备一个模板 / 60 2.10 本章小结 / 61 第3章 调试工具及技巧 / 62 ...
6.2.1 Ext.onReady() 6.2.2 Ext.get() 6.2.3 Ext.select() 6.2.4 Ext.query() 6.2.5 Ext.getCmp() 6.2.6 Ext.getDom() 6.2.7 Ext.isEmpty() 6.2.8 Ext.namespace() 6.2.9 Ext.each() ...
Ext.onReady(function(){ // shorthand var Tree = Ext.tree; var tree = new Tree.TreePanel({ el:'tree-div', useArrows:true, autoScroll:true, animate:true, enableDD:true, containerScroll: true,...
Ext.onReady 可能是你接触的第一个方法。这个方法是指当前 DOM 加载完毕后,保证页面内的所有 元素能被 Script 引用(reference)。你可删除 alert()那行,加入一些实际用途的代码试试: Ext.onReady(function() { ...
Backbone.Events.onReady 将onReady和triggerReady方法添加到Backbone.Events 。 行为: 准备好之前- 注册回调。 准备就绪时,运行所有挂起的回调,从triggerReady传入任何数据。 准备就绪后- 立即运行回调,传入...
Ext.onReady(function(){ var win; var button = Ext.get('show-btn'); button.on('click', function(){ // create the window on the first click and reuse on subsequent clicks if(!win){ win = new Ext....
[removed] 2,应用到Ext中的树控件事件处理 tree_03.js 代码如下:Ext.onReady(function(){ var root = new Ext.tree.TreeNode({ //tree,这里没有function,使用json格式 id:1, text:”linjq” }); var c1 = new Ext....
}Ext.onReady(function(){ Ext.get(“btnAlert”).addListener(“click”,a);//这里监听 //或者使用 Ext.get(“btnAlert”).on(“click”,a);//效果相同 });[removed] <input id=”btnAlert” type=”button”...
[removed] function testPanel(){ var p=new Ext.Panel({ title:'测试面板', collapsible:true, renderTo:'base',//被渲染的对象,渲染的对象必须是ID ... Ext.onReady(testPanel); [removed]
AngularJS-Scope.onReady 这是一个帮助文件,用于为angularJS应用程序中的$ scope.onReady和$ scope。$ whenReady命令提供支持。关于访问视图时,AngularJS将同时执行模板HTML和控制器。 这意味着,如果必须在控制器...
Ext.onReady(function(){ var cm = new Ext.grid.ColumnModel([ {header:'Id',dataIndex:'id'}, {header:'Name',dataIndex:'name'},
问题一个页面有两个面板,都...代码示例 代码如下:/// ”Ext/ext-all-debug-w-comments.js”> Ext.onReady(function () { var viewport = Ext.create(‘Ext.container.Viewport’, { layout: { type: ‘vbox’, al
Ext.onReady(function(){ var store=new Ext.data.Store({ url:'GridData.xml', reader:new Ext.data.XmlReader( {record:'Item'}, ["ASIN","Author","Manufacturer","ProductGroup","Title"]) }...
11.1.1 onReady函数..........................256 11.1.2 get函数....................................257 11.1.3 query函数和select函数.....260 11.1.4 encode函数和decode函数...263 11.1.5 extend函数...........