深入理解ExtJS类的别名机制

ExtJS 中类的别名 - alias

当我们在查看 ExtJS API 文档时，左侧的类列表中经常会看到一个红色方框圈出的部分，这部分内容就是该类的别名。别名通常比完整的类名更简洁、易记。

例如，Ext.window.Window 的别名可能是 window 或 widget.window。通过使用别名，我们可以简化代码，提高可读性和编写效率。

下面是一个具体的例子，展示如何使用别名替代完整类名：

var win = Ext.create('widget.window', { title: '示例窗口', width: 300, height: 200 });
win.show();

在这个例子中，我们使用了 widget.window 这个别名来代替 Ext.window.Window，从而简化了类的实例化过程。

为了更好地演示别名的使用，我们对自定义类 Person 进行修改，添加命名空间并定义别名：

Ext.define('MyApp.Person', {
    config: {
        Name: '',
        Age: 0
    },
    alias: 'model.person',
    Say: function(msg) {
        Ext.Msg.alert(this.Name + ' Says:', msg);
    },
    constructor: function(config) {
        this.initConfig(config);
    }
});

此时，如果我们尝试用旧的方式创建 Person 对象：

var Tom = Ext.create('Person', { Name: 'Tom', Age: 26 });
Tom.Say('Hello');

会遇到两个错误：首先是动态加载问题，系统找不到 Person.js 文件；其次是未定义的 Person 类导致的类型错误。

为了解决这些问题，我们需要正确地使用带有命名空间的类名或定义别名。通过添加别名 model.person，我们可以继续使用简短的名称 Person 来实例化对象：

Ext.define('MyApp.Person', {
    config: {
        Name: '',
        Age: 0
    },
    alias: 'model.person',
    Say: function(msg) {
        Ext.Msg.alert(this.Name + ' Says:', msg);
    },
    constructor: function(config) {
        this.initConfig(config);
    }
});

重新运行代码后，一切正常工作，我们得到了预期的结果。