当前位置:编程学习 > JS >>

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

最近开始学ExtJS,书上的第一个例子是:
 
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);
有如下范例:
 
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方法。
 
知道怎么实例化类后,我们就可以试着实例化Ext.window.MessageBox,测试如下代码:
 
Ext.onReady(function(){
    var msg=Ext.create('Ext.window.MessageBox');
    msg.alert('Hello.', 'Hello'); 
});
运行成功!
 
但是Ext.Msg应该是个全局的单例,我们这种用法终究感觉有些别扭,来看看Ext的源码,瞧瞧Ext.Msg到底在哪里会被初始化:
 
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这样的全局单例并不会在程序开始的时候就会定义,而是需要你实例化该类一次之后才会被定义。
于是有如下代码:
 
Ext.onReady(function(){
    Ext.create('Ext.window.MessageBox');    //全局只要调用一次即可
    Ext.Msg.alert('Hello.', 'Hello'); 
});
Ext中其他的全局单例也是一个道理吧。
补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,