ExtJS类成员-类相关功能

更新记录
2022年7月3日 发布。
2022年7月2日 从笔记迁移到博客。

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

Ext.Base类

Ext.Base类是所有Ext类的基类，不论是预定义类还是自定义类
所有使用Ext.define()方法定义的类都继承自Ext.Base

Ext.Class类

Ext.Class类是底部的工厂(low-level factory)类，用于管理创建类(Ext.ClassManager)
不应在代码中直接使用，应使用Ext.define方法

Ext.ClassManager类

说明

Ext.ClassManager类在ExtJS内部管理所有类
包括类定义(Define)、别名(Alias)、可选名称(Alternate Names)
并处理 从字符串类名 到 实际类型 的映射
通常不直接使用Ext.ClassManager类，而是使用以下类：

1. Ext.define()
   用于创建新类(new class)、扩展类(extend a class)、覆写类(override(s) in a class)

2. Ext.create()
   用于创建类实例(类名或别名)

3. Ext.widget()
   用于创建组件的实例，使用xtype (alias)属性

实例

实例：使用Ext.ClassManager.instantiateByAlias方法通过别名定义类实例

Ext.ClassManager.instantiateByAlias("widget.panel",{
    title: 'Panda Title',
    renderTo: Ext.getBody()
});

实例：Ext.createByAlias方法通过别名定义类实例
注意：Ext.createByAlias 是Ext.ClassManager. instantiateByAlias的快捷方法

Ext.createByAlias("widget.panel",{
    title: 'Panda Title',
    renderTo: Ext.getBody()
});

定义类型

用于定义类型（或者覆写(override)类）

Ext.define ( className, data, [createdFn] ) : Ext.Base 

实例：定义类型

Ext.define('Car', {
    name: null,
    constructor: function(name) {
        if (name) {
        this.name = name;
        }
    },
    start: function() {
        console.log('started');
    }
});

实例：扩展（继承）一个类

Ext.define('ElectricCar', {
    extend: 'Car',
    start: function() {
        console.log("Electric car started");
    }
});

实例：创建类型后调用回调函数

Ext.define('PandaApp.PandaClass',{
    //code
},function(){
    console.log('callback is trigger');
});

创建类实例

Ext.create ( [name], [args] ) : Object 

实例：

var myCar = Ext.create('ElectricCar',{
    name: 'MyElectricCar'
});

创建类实例（使用别名）

Ext.createByAlias ( alias, args ) : Object 

实例：

var window = Ext.createByAlias('widget.window', { width: 600,height: 800 });

创建类实例（使用xtype）

Ext.widget ( [name], [config] ) : Object 

使用别名(xtype属性)创建类实例
例如：Ext.panel.panel的别名为widget.panel
xtype常用于自动实例化容器的子组件，而不必在容器定义子组件时手动创建实例
Ext.widget是按xtype创建小部件的简写

实例：使用Ext.widget方法代替Ext.create方法

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    title: 'Panel'
});

//创建panel使用 - 使用widget方法代替
Ext.widget('panel', {
    renderTo: Ext.getBody(),
    title: 'Panel'
});

Ext.Loader

说明

Ext.Loader用于实现：
按需加载类（Loading classes on demand）
动态依赖加载（dynamic dependency loading）

当开发大型应用时使用按需加载，可以实现只加载需要的代码以提高加载速度
当类未被加载时，ExtJS使用Ext.Loader实现自动加载类文件
Ext.Loader使用AJAX动态加载类型

注意：
通常使用Ext.require方法代替Ext.Loader，而不是直接使用Ext.Loader
建议在开发环境开启动态加载，可以便于调试，不建议在产品环境使用动态加载
使用Ext.create方法定义类实例时，如果没有加载类，会自动加载(sync)类文件
动态加载会影响性能，最好先在Ext.require方法中定义要加载的类
如果不使用Ext.require定义需要的类，但在代码中使用了未提前加载的类
会导致同步(synchronously)加载，这会引起性能问题

开启自动加载

使用Ext.Loader.setConfig方法
在app/application.js中添加自动加载类代码：

Ext.Loader.setConfig({
    enabled: true
});

加载类文件

说明

异步加载类文件

Ext.require ( expressions, [fn], [scope] ) 

同步加载类文件

Ext.syncRequire ( expressions, [fn], [scope] ) 

说明：第一个参数是String/String[]类型，表示要加载的类

开启自动加载：

Ext.Loader.setConfig({
    enabled: true
});

默认类文件加载路径（Loader paths）

默认情况下，顶层的命名空间对应app文件夹
意味着，次命名空间对应着app文件夹下的文件夹
以此类推，直到招到类文件
注意：要保持类名称和类的路径一致，比如：

MyApp.view.About类型			对应 	app/view/About.js文件
PandaApp.util.PandaUtil类型	对应	app/util/PandaaUtil.js文件

提前加载类文件语法：

Ext.require(
    [
        '类名称',
			...
    ]
);

通常在 项目文件夹/app.js文件 中会自动加载项目下所有的类文件

Ext.application({
    extend: 'PandaApp.Application',

    name: 'PandaApp',
    
    requires: [
        // This will automatically load all classes in the PandaApp namespace
        // so that application classes do not need to require each other.
        'PandaApp.*'
    ],
    
    // The name of the initial view to create.
    mainView: 'PandaApp.view.main.Main'
});

自定义加载规则

如果要自定义加载路径的规则，需要使用Ext.Loader.setConfig方法
默认在application.js中定义的加载规则如下：

Ext.Loader.setConfig({
    paths: {
        Ext : '../ext/src',
        PandaApp : 'app'
    }
});

可以修改为：

Ext.Loader.setConfig({
    paths: {
        Ext : '../ext/src',
        BizDash : 'app',
        'Custom.path' : '..CustomClasses/path'
    }
});

实例

在 项目文件夹/app.js文件中 添加
实例：加载指定的类

Ext.require([
'widget.window', 
'layout.border',
'Ext.data.Connection'
]);

实例：加载指定命名空间下的所有组件

Ext.application({
    extend: 'PandaApp.Application',
    name: 'PandaApp',
    requires: [
        // This will automatically load all classes in the PandaApp namespace
        // so that application classes do not need to require each other.
        'PandaApp.*'
    ],
    
    // The name of the initial view to create.
    mainView: 'PandaApp.view.main.Main'
});

排除不加载的类文件

Ext.exclude ( excludes ) : Object 

实例：

Ext.exclude('Ext.data.*').require('*');
Ext.exclude('widget.button*').require('widget.*');

获得类（的构造函数）

Ext.getClass ( object ) : Ext.Class

获得使用Ext.define定义的类实例的所属于类（的构造函数）

实例：获得Ext.Button的构造函数

var button = new Ext.Button();
var classConstructor = Ext.getClass(button);
console.log(className);  //function .......
console.log(Ext.typeOf(className)); //function

获得类名称

Ext.getClassName ( object ) : String 

获得使用Ext.define定义的类实例的所属于的类名称
提示：可以支持类型 和 类型的实例 作为参数

实例：

//直接通过类型获得类名称
var btn = Ext.create({
    xtype:'button'
});
var className = Ext.getClassName(btn);
console.log(className); //Ext.button.Button

获得类名称的命名空间

Ext.getNamespace ( className ) : String 

注意：如果命名空间在应用中不存在，则会返回undefined
实例：

console.log(Ext.getNamespace('Ext.PandaModule.PandaClass'));   //Ext
console.log(Ext.getNamespace('Panda.PandaModule.PandaClass')); //undefined

检测类调试是否开启

Ext.isDebugEnabled ( className ) : Boolean 

实例：

var result = Ext.isDebugEnabled('Ext.button.Button');
console.log(result); //true