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‘,
                      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>

时间: 2024-12-28 20:36:52

ext js Ext.onReady()的用法的相关文章

Ext JS学习第九天 Ext基础之 扩展原生的javascript对象

此文来记录学习笔记: •Ext对于原生的javascript对象进行了一系列的扩展,我们把他们掌握好,更能深刻的体会Ext的架构,从而对我们的web开发更好的服务, 源码位置,我们可以从开发包的这个位置找到这几个扩展的js源码: •extjs-4.1.1\src\core\src\lang\ •ExtJS扩展原生Javascript –Ext.Object –Ext.Number –Ext.String –Ext.Array –Ext.Function –Ext.Date –Ext.Error

Ext JS 6学习文档–第1章–ExtJS入门指南

Ext JS 入门指南 前言 本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学习资料还很少.google 搜索资料时找到了一本国外牛人写的关于 ExtJS 6 的电子书 [Ext JS 6 By Example].这份资料在 PACKT 上卖 35.99 刀的,当然了万能的 google 还是帮我下载到了 PDF 文档.大概看了一下,讲的很详细,例子也比较简单,容易理解,现我准备利用工作之余翻译这份文档,为自己学习加深理解,也希望能帮助更多的人学习.

Extjs Ext.onReady的用法

最近在学习Extjs,当然首先学习的肯定是从官网下载下来的example. 从学习上而言对于Extjs,我个人认同的是李林峰老师所言先从视图开始,搞一些所见即所得的东西. 废话有点多,对于Extjs而言个人认为最初需要弄明白的函数就是 Ext.onReady函数. onReady方法在页面完毕(onload方法被调用之前以及图片被装载之前)调用初始化函数. 在API中是如此定义onReady方法: onReady( Function fn, Object scope, Boolean withD

谈谈Ext JS的组件——布局的用法续一

盒子布局 盒子布局主要作用是以水平(Ext.layout.container.HBox)或垂直方式(Ext.layout.container.VBox)来划分容器区域.这也是比較常有的布局方式. 使用盒子布局,除了要在容器定义layout配置项外,还须要在子组件指定子组件的宽度(HBox)或高度(VBox).指定宽度或高度有两种方式.一是直接使用width或height来定义,一是使用flex配置项,依据比例来划分.以下通过一些演示样例来了解一下盒子布局的使用,这里仅仅使用水平盒子作为演示样例,

Ext.js入门:常用组件与综合案例(七)

一:datefield简单示例 二:timefield简单示例 三:numberfield简单示例 四:FormPanel提交 datefield简单示例: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="Ext/resources/css/ext-all.css&

谈谈Ext JS的组件——容器与布局

概述 在页面中,比較棘手的地方就是布局.而要实现布局.就得有能维护布局的容器. 能够说,在我试过和使用过的Javascript框架中,Ext JS的布局是做得最优秀的一个,而这得益于它强大的容器类和丰富的布局类.在本文将介绍Ext JS的容器组合和布局类. 容器:Ext.container.Container 容器的主要功能是管理其内部的组件.因而在继承Ext.Component的所有功能的基础上.加入了相应的用来处理内部组件的方法add.insert.remove和removeAll. 在配置

EXT.JS以下两种写法在初始载入时是一样的效果

/* Ext.application({ name: 'MyfirstApplication', launch: function () { Ext.Msg.alert("Hello", "My first App!"); } }); */ Ext.onReady(function () { //alert("This is my first Extjs app !"); //Ext.Msg.alert("Alert", &q

Ext JS学习第五天 Ext_window组件(一)

此文来记录学习笔记 •第一个组件:Ext.window.Window.对于组件,也就是Ext最吸引开发者的地方,那么我们要真正的使用Ext的组件,首先必须学会阅读API文档. –xtype:组件的别名 –Hierarchy 层次结构 –Inherited mixins 混入的类 –Requires 该组件需要使用的类 –configs:组件的配置信息 –properties:组件的属性 –methods:组件的方法 –events:组件的事件 •window组件常用属性和方法讲解: •confi

Ext JS学习第八天 Ext基础之 认识Ext.js 和Ext-more.js

此文来记录学习笔记: •认识Ext.js 和Ext-more.js •首先,我们要知道这2个js文件的作用,这俩个文件包含了Ext的一些基础定义.基本的属性和方法,我们要重点学习和深入底层代码进行研究. •如果所示:API位置 . •Ext.js方法详解: –Ext.apply&Ext.applyIf –Ext.extend –typeOf –isEmpty.isIterable.isFunction.isArray... –Iterate 下面从栗子中看看这些方法是实际使用方法,请看栗子代码吧