首页 > 其他分享> 文章详细

ExtJS类成员-类相关功能

2022-07-03 07:31:45 阅读：232 来源： 互联网

标签：功能成员 widget Loader Ext 实例 PandaApp 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类，而是使用以下类：

Ext.define()
用于创建新类(new class)、扩展类(extend a class)、覆写类(override(s) in a class)
Ext.create()
用于创建类实例(类名或别名)
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

标签：功能,成员,widget,Loader,Ext,实例,PandaApp,ExtJS,加载
来源： https://www.cnblogs.com/cqpanda/p/16437835.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9