`

关于Extjs--- Ext.onReady()的用法

 
阅读更多

引自:http://blog.csdn.net/wwww1988600/article/details/7297072

问题:先自定义一个函数f(),在通过Ext.onReady(f())方式来调用。

 

看书上写的是:

 

<script language="javascript">
        
  function f(){
   Ext.Msg.show({
         title:'Hello',
         msg:'Have you seen my heart?',
         buttons:{
                      yes:'true',
                      no:true,
                     cancel:true,
                    }

 

                     });

 

   }
   Ext.onReady(f());
    </script>

 

但运行后没显示

 

上网查了一下Ext.onReady()的用法,大概分为三种:

 

  • 方式一:

          <script>

           Ext.onReady(function(){

           alert('onready');

 

       });

    </script>     

              最简单了,最平常的调用,不用多说

 

  • 方式二:

    <script>

       Ext.color=function(){

           return{

              init:function(){

                  alert("init")

              }

           }

       }();

       Ext.onReady(Ext.color.init,Ext.color);

    </script>                

  通过onReady调用color函数,init为color中的内置,作用是初始化.这种写法比较实用

 

  • 方式三:

 

    <script>

       Ext.onReady(function(){

      

           alert('onready');

 

       });

       Ext.color=function(){

           return{

              init:function(){

                  alert("init")

              }

           }

       }();

       Ext.onReady(Ext.color.init,Ext.color);

    </script>

       这种是混合型写法,两个onReady都会被调用,调用顺序是看谁在前面.

 

根据第2个方法,可将问题的解法写成如下:

 

<script>
  Ext.f=function(){ 
           return{

 

              init:function(){
         Ext.Msg.show({
         title:'Hello',
         msg:'Have you seen my heart?',
         buttons:{
          yes:true,
          no:true,
          cancel:true,
          },

 

          icon:'milton-icon',
          fn:function(btn){
          Ext.Msg.alert('You clicked',btn);

 

          }
         });

 

              }

 

           }

 

       }();

 

       Ext.onReady(Ext.f.init,Ext.f);

 

    </script>

 

 

 

分享到:
评论

相关推荐

    3------通过实例学习------Ext.js------.docx

    当我们需要在页面中使用Ext.js时,例如创建弹窗提示,会用到`Ext.Msg.show`方法。下面的代码展示了如何创建一个带有输入框的提示框,并在用户点击OK后将输入的内容显示到指定的`div`中: ```html &lt;!DOCTYPE html&gt; ...

    ExtJS-3.4.0系列 — ExtJS下载使用

    - **docs**:存放EXT的文档,帮助开发者理解API和使用方法。 - **examples**:官方提供的演示示例,用于展示EXT的各种组件和功能的实际应用。 - **pkgs**:包含EXT的压缩代码,这些文件体积更小,加载速度更快,...

    extjs培训2011-12-17

    1. **adapter**:该目录包含了用于将其他底层库映射到ExtJS内部使用的文件,包括Ext自带的底层库。 2. **docs**:API帮助文档,这对于理解和学习ExtJS提供的各种方法和属性至关重要。 3. **examples**:提供了许多...

    ext表格布局小例子

    ### ExtJS 表格布局小例子详解 #### 一、简介 本文档旨在解析一个具体的 ExtJS 表格布局小例子,重点介绍其中涉及的数据存储、数据删除与添加...希望本文档能够帮助开发者更好地理解和掌握 ExtJS 表格组件的使用方法。

    Ext-JS框架中文文档

    通过这份中文文档,开发者能够更深入地理解ExtJS的各种特性和用法,从而提高开发效率。 #### 三、ExtJS的基础概念与实践 1. **ExtOOP基础** - **JavaScript类的定义**: 在ExtJS中,可以通过特定的方法来定义类,...

    Extjs4.0学习指南(中文).docx

    接下来,我们将编写一个简单的程序来熟悉Extjs的基本用法。 1. **创建`helloWorld.js`** ```javascript Ext.onReady(function(){ new Ext.Panel({ title: 'Hello Ext', html: 'Hello! Welcome to ExtJS.', ...

    Ext学习资料适合入门

    【标签】"Ext学习资料适合入门"强调了这些资料是为初学者准备的,可能包括教程、文档、示例代码等,旨在帮助新手快速理解和掌握ExtJS的基本概念和使用方法。 【部分内容】中,我们看到了一个简单的入门步骤,以及...

    ExtJS-4.2.6扩展ux插件89个

    - 在Ext JS应用中,开发者首先需要引入ux插件的JavaScript文件,然后通过`Ext.require`或`Ext.onReady`方法加载。 - 配置相应的组件时,指定使用哪个ux插件,通常通过设置组件的`xtype`属性来实现。 - 调整插件的...

    ext使用--Panel和iframe联合使用时页面高度的解决方法

    Ext.onReady(function() { var iframe = Ext.create('Ext.ux.IFrame', { src: 'http://example.com', plugins: ['miframe'] // 使用miframe插件 }); var panel = Ext.create('Ext.Panel', { items: [iframe]...

    Ext JS下载及配置

    ### Ext JS下载及配置知识点详解 #### 一、Ext JS简介 Ext JS 是一款基于 JavaScript 的前端框架,专为构建企业级 Web 应用而设计。...希望本文能帮助大家更好地理解和掌握 Ext JS 的基本使用方法。

    轻松搞定Extjs 带目录

    在Extjs中推荐使用`Ext.onReady`事件来确保页面的DOM完全加载后再执行脚本,这样可以保证脚本执行的正确性。 #### 6. 元素操作与模板 - **DomHelper类**: 提供了一种简洁的方法来创建和操作DOM元素。 - **...

    Extjs常用函数和事件.pdf

    1. `Ext.onReady(Function fn, Object scope, boolean override)`:这是ExtJS中的一个关键函数,用于在页面DOM完全加载后执行指定的函数。通常,这是初始化应用程序或创建组件的起点。 2. `Ext.get(Mixed el)`:这...

    Extjs实用教程

    ### Extjs实用教程知识点解析 #### 一、EXTJS框架简介与下载 - **框架概述**:ExtJS是一个用于构建企业级Web应用的JavaScript库,它提供了丰富的UI组件...希望这份指南能够帮助大家更好地理解和掌握ExtJS的使用方法。

    Extjs4的demo

    在ExtJS中,`Ext.onReady`和`Ext.application`是两个非常重要的方法。`Ext.onReady`会在DOM完全加载后自动执行,确保所有元素都可被脚本引用。你可以尝试在`Ext.onReady`函数内添加代码,例如弹出一个对话框,以观察...

    extjs4-教程

    - **Ext.application**:这是ExtJS4中的一个初始化应用的方法,它会自动调用Ext.onReady,确保应用的初始化代码在DOM加载完毕后执行。这个方法是学习ExtJS时经常首先接触到的。 #### 4. 获取页面元素 ExtJS4提供了...

    Extjs4.2入门详细文档以及表格初级制作

    - **doc**:包含Extjs的API文档,对于开发者来说是非常重要的参考资料,通过API文档可以了解每个组件、方法和属性的具体用法。 - **examples**:提供了大量的官方演示示例,这些示例覆盖了Extjs的主要功能,是学习和...

Global site tag (gtag.js) - Google Analytics