Ext JS 4官方文档之三 — 类体系概述与实践

Ext JS 4 是一个功能强大的前端Web应用程序框架，官方文档提供了完整的API文档、类继承体系和组件开发指南。本文将重点讲解「Ext JS 4官方文档之三 -- 类体系概述与实践」，该文档深入解析了 Ext JS 4 的类体系结构和类的创建方式，对于开发人员了解和掌握 Ext JS 4 开发流程非常有帮助。

一、类体系概述

1.类体系结构

在 Ext JS 4 中，所有组件都是由类构建的。类体系结构由 Ext.Base 类继承体系和 Ext.Class 类创建体系共同构成。Ext.Base 是所有对象都具备的共同行为，而 Ext.Class 则是为了快速创建和组合类对象。Ext.Class 类可以从其它类派生新的类，支持多继承和混合模式，并可以在运行时动态修改类对象，十分灵活。

2.类命名空间

在 Ext JS 4 中，类名遵循一定的命名空间规则。通常情况下，类名空间是一个包含前缀字符的单一字符串，类名和命名空间之间用句号（.）分隔。例如：Ext.data.Store 表示 Ext JS 4 数据类库中的数据存储组件。

3.创建类

要创建一个类，首先要用 Ext.define() 方法创建该类的定义。在类定义中指定类名、命名空间和继承关系。同时，还可以指定配置属性、类方法和事件处理程序。例如，以下示例代码创建一个名为 "My.Person" 的新类。

Ext.define('My.Person', {
    extend: 'Ext.util.Observable',
    config: {
        name: '未命名',
        age: 0
    },
    constructor: function(config) {
        this.initConfig(config);
    },
    sayHello: function() {
        console.log('你好，我是' + this.getName());
    }
});

二、实践

下面我们通过创建一个简单的组件来了解类的创建和使用。

1.组件定义

在这里，创建一个名为 "My.Button" 的新类，并继承自 Ext.Button 类。这个类包含一个自定义的属性 text2，值为 "按钮2"。

Ext.define('My.Button', {
   extend: 'Ext.Button',
   xtype: 'mybutton',
   text2: '按钮2'
});

2.组件使用

通过以下代码可以使用 "My.Button" 组件。

{
   xtype: 'mybutton',
   text: '按钮1'
}

以上代码创建了一个新的 "My.Button" 组件，并且赋予它一个 "按钮1" 的文本。同时这个组件也使用了继承自 Ext.Button 的方法。

3.自定义方法

可以在组件中创建自定义方法，并访问父组件的方法。例如：

Ext.define('My.Button', {
    extend: 'Ext.Button',
    xtype: 'mybutton',
    text2: '按钮2',
    myMethod: function() {
        this.setText(this.text2);
    }
});

以上代码定义了一个名为 "myMethod" 的自定义方法，用于在按钮上设置一个新的文本。当按钮被单击时，可以调用该自定义方法。

{
   xtype: 'mybutton',
   text: '按钮1',
   listeners:{
       click: function(){
           this.up().myMethod();
       }
   }
}

以上代码会将 "My.Button" 组件添加到该视图中，并在单击按钮时调用 "myMethod" 方法。由于 "myMethod" 方法继承自 Ext.Button，它包含一个 "setText" 方法，可以将按钮的文本设置为 "按钮2"。