ExtJS初学笔记---Ext.Msg.alert无效果

最近开始学ExtJS，书上的第一个例子是：

1 2 3

Ext.onReady( function (){      Ext.Msg.alert( 'Hello.' , 'Hello' ); });

这个是ExtJS最简单的一个例子了，就是在页面上显示一个对话框，可是我运行却什么都没有显示。。。

在浏览器开发者工具的控制台中有如下错误信息：

（Cannot call method 'alert' of undefined）

 

这让我很是无语，因为可以确定已经正确引入ExtJS所需的js文件了，可是为什么说alert函数没有定义呢？

我想可能是因为书本比较旧（书中用的版本是3.0，我用的是4.0）缘故吧，于是查看Ext的文档，发现了几点信息：

 

一，Ext.Msg是Ext.window.MessageBox.的别名

二， 在extjs4中引入的新的类定义的方式：

1	Ext.define(className, members, onClassCreated);

有如下范例：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Ext.define( 'My.sample.Person' , {      name: 'Unknown' ,        constructor: function (name) {          if (name) {              this .name = name;          }      },        eat: function (foodType) {          alert( this .name + " is eating: " + foodType);      } });   var aaron = Ext.create( 'My.sample.Person' , 'Aaron' ); aaron.eat( "Salad" ); // alert("Aaron is eating: Salad");

可以得知Ext中类的定义用define方法，实例化类用create方法。

 

知道怎么实例化类后，我们就可以试着实例化E xt.window.MessageBox ，测试如下代码：

1 2 3 4

Ext.onReady( function (){      var msg=Ext.create( 'Ext.window.MessageBox' );      msg.alert( 'Hello.' , 'Hello' ); });

运行成功！

 

但是Ext.Msg应该是个全局的单例，我们这种用法终究感觉有些别扭，来看看Ext的源码，瞧瞧 Ext.Msg到底在哪里会被初始化：

1 2 3 4 5

Ext.define( 'Ext.window.MessageBox' , {      ..... }, function () {      Ext.MessageBox = Ext.Msg = new this (); });

在define函数的第三个参数中Ext.Msg被定义，那这个函数何时会被调用呢？

 

请看define方法的第三个参数onClassCreated的描述：

Callback to execute after the class is created, the execution scope of which (this) will be the newly created class itself.

即这个函数会在类被实例化时调用，在这个函数中new this()就是new这个类本身。

 

可知估计是Ext4之后像Ext.Msg这样的全局单例并不会在程序开始的时候就会定义，而是需要你实例化该类一次之后才会被定义。

于是有如下代码：

1 2 3 4

Ext.onReady( function (){      Ext.create( 'Ext.window.MessageBox' );    //全局只要调用一次即可      Ext.Msg.alert( 'Hello.' , 'Hello' ); });

Ext中其他的全局单例也是一个道理吧。

转载于:https://www.cnblogs.com/mushan/p/3383409.html