Extjs Ext.onReady的用法

最近在学习Extjs,当然首先学习的肯定是从官网下载下来的example。

从学习上而言对于Extjs,我个人认同的是李林峰老师所言先从视图开始,搞一些所见即所得的东西。

废话有点多,对于Extjs而言个人认为最初需要弄明白的函数就是 Ext.onReady函数。

onReady方法在页面完毕(onload方法被调用之前以及图片被装载之前)调用初始化函数。

在API中是如此定义onReady方法:

onReadyFunction fn, Object scope, Boolean withDomReady )

添加新的侦听器执行时所需的所有脚本完全加载

Parameters

  • fn : Function

    要执行的回调函数

  • scope : Object

    (this)回调函数的执行范围

  • withDomReady : Boolean

    document dom就绪 无论如何要等待document dom就绪

onReady方法有三种:

第一种方法,最简单易懂,在API所定义的三个参数中只使用第一个参数,并且直接在function中定义其内容:

Ext.onReady(function(){
    Ext.MessageBox.alert("message","cool");
    });

第二种方法,通过onReady调用其他函数中的内置init函数来实现,eg中onReady通过调用example函数,init为example函数中的内置,作用是初始化

Ext.example = function(){
   return {
        init : function(){
                Ext.MessageBox.alert(‘init‘,‘OK‘);
        }
    };
}();
Ext.onReady(Ext.example.init, Ext.example);

第三种方法,第一种方法和第二种方法的混合方法,这种方式首先被调用的是处在下面段的,即显示cool这段

Ext.message=function(){
    return{
    init:function(){
        Ext.MessageBox.alert("message","cool-1");
    }
    };
}();
Ext.onReady(Ext.message.init,Ext.message);

Ext.onReady(function(){
    Ext.MessageBox.alert("message","cool");
}
});
时间: 2024-10-11 00:38:18

Extjs Ext.onReady的用法的相关文章

ext js Ext.onReady()的用法

问题:先自定义一个函数f(),在通过Ext.onReady(f())方式来调用. 看书上写的是: <script language="javascript">          function f(){   Ext.Msg.show({         title:'Hello',         msg:'Have you seen my heart?',         buttons:{                      yes:'true',       

extjs笔记(一) ext.onready()用法

定义:加载完ExtJs库之后,开始加载OnReady中指定的函数 参数:onReady( fn, scope, options ) fn回调函数 表示要执行的函数 scope表示函数的作用域 表示函数执行的一些其它特性,比如延迟多少毫秒执行等,大多数情况下只需要第一个参数即可. 事例探究一:加载方法的作用 a. function a(){ alert("every thing is OK!") } Ext.onReady(a); b. Ext.onReady(function(){ a

extJs学习基础4 Ext.each的用法

1 Ext.onReady(function(){ 2 //案例一 3 /* 4 var countries = ['Vietnam', 'Singapore', 'United States', 'Russia']; 5 Ext.Array.each(countries, function(name, index, countriesItSelf){ 6 console.log(name); 7 if(name == 'Vietnam'){ 8 return false; //停止循环 9 }

【Ext.Net学习笔记】02:Ext.Net用法概览、Ext.Net MessageBus用法、Ext.Net布局

Ext.Net用法概览 Ext.Net还是很强大,如果运用熟练可以极大的提高编程效率.如果你也要学习Ext.Net,原文博主推荐书籍:<Ext.Net Web 应用程序开发教程>,是英文的,有基础的可以看下,可以百度到PDF文档的. Ext.Net与ExtJS代码比较 上一篇中我们创建了一个使用Ext.Net创建了一个window窗口,代码非常简单: <ext:Window runat="server" ID="win" Title="示

ExtJS中TreeGrid的用法

如果您是第一次使用ExtJS的TreeGrid的话,我相信总会有一些小麻烦的,下面就来说一说ExtJS中TreeGrid的使用. 本人使用的ExtJS版本为4.0.7,并且使用了MVC模式,如果不了解ExtJS的MVC模式的话我个觉得还是有必要去学学的, 学完后你肯定会喜欢上的. 其实在ExtJS中并没有TreeGrid这么一个类,这个说法是从EasyUI中借用过来的,ExtJS中的TreeGrid功能已经合在了Ext.tree.Panel中. TreeGrid显示出来大概是这个样子: 下面是这

【Ext.Net学习笔记】04:Ext.Net中使用数据、Ext.Net Store的用法、Ext.Net ComboBox用法

之前的几篇文章都是介绍Ext.Net较为基础的东西,今天的这一篇将介绍数据的一些用法,包括XTemplate绑定数据.Store(Modal.Proxy).ComboBox的用法等. XTemplate绑定数据 XTemplate是个模板,当我们为一个XTemplate绑定数据之后,将会按照模板的预定格式进行显示. <ext:Window runat="server" ID="win1" Title="XTemplates用法" Width

Ext.Net学习笔记03:Ext.Net MessageBus用法

发布和订阅消息 Ext.Net MessageBus 的本质是一个消息订阅机制,ExtJS中没有这种机制,所以MessageBus的Ext.Net实现的,但并不是原创,这种功能在dojo中早就实现了,可以参见我的博客:Dojo入门:dojo中的事件处理 下面的代码将演示如何使用 MessageBus 发布和订阅消息: <ext:Button runat="server" ID="btn2" Text="发布消息" Handler="

ExtJS4 Ext.onReady、Ext.define、Ext.create的区别与联系 http://blog.sina.com.cn/s/blog_48d7f92901011cfn.html

1.Ext.onReady 说明:onReady内的语句块会在页面上下文加载后再执行. 2.Ext.define 说明:创建类,可以继承其他类,也可以被继承. 例子1: <script type="text/javascript"> Ext.onReady(function () { //创建一个类,类名:TextClass,具有两个属性:A.B Ext.define('TextClass', { A: 'a', B: 'b' }); //实例化类 var textClas

ExtJS4教程—-Ext.onReady、Ext.define、Ext.create基础方法(转)

Ext.onReady 说明:onReady内的语句块会在页面上下文加载后再执行 例子: <html> <head> <title>Index</title> <link href="http://www.cnblogs.com/Scripts/ext-4.0.7-gpl/ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="te