EXTJS API 3.3 中文版开发者指南

黄浴

于 2024-09-12 15:19:15 发布

阅读量1.1k

点赞数 27

本文链接：https://blog.csdn.net/weixin_33506815/article/details/142219072

版权

本文还有配套的精品资源，点击获取

简介：EXTJS API 3.3中文版提供了详细的开发者指导，适用于使用EXTJS 3.3框架的JavaScript程序员。该文档涵盖了EXTJS所有函数、类、方法、属性和事件的详细信息，详细介绍了丰富的用户界面组件如表格、网格和表单等。中文版的API文档让中文开发者能更方便地学习和应用EXTJS库，包括核心类和功能、编程接口的定义以及类的结构、方法、属性、事件和配置选项等。通过该文档，开发者可以学习布局管理、数据绑定、数据模型、AJAX、拖放、动画等知识，并通过自定义组件和插件扩展框架功能，从而构建高效且响应式的Web应用。 extjs api3.3 _中文版

1. EXTJS框架概述

EXTJS是一个成熟且功能强大的JavaScript框架，它允许开发者使用丰富的界面组件快速构建交互式的Web应用程序。EXTJS的特色在于其优雅的UI组件集合和灵活的前端架构，它基于JavaScript和CSS，设计出响应式布局，支持多种浏览器和操作系统。

1.1 EXTJS的起源与发展

EXTJS起源于2006年，由Jack Slocum创建，最初用于简化YUI组件库的使用。随后，它逐步发展成为一个独立的框架，并且被收购整合到了Sencha产品线中。如今，EXTJS被广泛应用于企业级应用开发，支持复杂的桌面应用。

1.2 EXTJS的核心特性

EXTJS的核心特性包括： - 丰富的组件库 ：提供各种用户界面组件，如按钮、表格、面板等。 - 数据管理 ：强大的数据绑定和管理功能，支持多种数据源。 - 高度可定制 ：几乎所有的组件都可以通过配置进行定制，以满足不同项目的需求。 - 兼容性 ：优化支持主流浏览器，包括老旧浏览器。 - 主题与定制 ：支持多种预定义主题和完全自定义的主题。

EXTJS的这些特性使得它成为IT行业中的一个首选框架，不仅适用于初学者快速入门，也能满足资深开发者构建复杂应用的需求。接下来的章节将逐步深入解析EXTJS的API文档和架构细节。

2. EXTJS API文档解析

2.1 API文档的组成要素

2.1.1 类与组件的分类

EXTJS框架中的类与组件是构成整个应用的基础。每一个组件都继承自基础的 ***ponent 类。EXTJS将组件按照功能和用途进行了分类，例如，界面组件、布局组件、数据处理组件等。类与组件的分类可以帮助开发者快速定位和选择合适的组件来完成特定任务。

在API文档中，类和组件按照它们继承的层级结构进行组织。顶层的类通常是框架中最为通用和基础的类，比如 Ext.Class 和 Ext.Base ，而从顶层类派生的子类则提供了更为专业的功能，例如 Ext.Container 用于布局管理， Ext.grid.Panel 用于展示和编辑数据表。

graph TD;
    Ext.Base-->Ext.Class;
    Ext.Class-->***ponent;
    ***ponent-->Ext.Panel;
    ***ponent-->Ext.grid.Panel;
    Ext.Panel-->Ext.form.Panel;
    Ext.grid.Panel-->Ext.grid.Panel;

2.1.2 方法与属性的索引

EXTJS的API文档为每个类提供了方法和属性的索引。这些索引非常关键，因为它们定义了类或组件可以进行的操作以及可配置的选项。方法通常包括了实例方法和静态方法，其中实例方法用于改变类的实例状态或获取实例信息，而静态方法则通常用于执行不依赖于实例的操作。

属性索引不仅包括了实例属性（可以被实例读写的属性），还包括了配置属性（初始化时设置的属性），以及只读属性（不能被修改的属性）。掌握这些属性和方法的索引，是学习和使用EXTJS不可或缺的一部分。

### ***ponent

#### Methods
- `initComponent()`: Initialize the component's layout and internal structure
- `destroy()`: Destroys the component, removing it from the DOM

#### Properties
- `id`: The unique id of this component (read-only)
- `title`: The title to show in the component's header
- `hidden`: Whether or not the component is hidden

2.1.3 事件监听机制

事件监听机制是EXTJS的核心组成部分，它允许开发者对用户交互和组件状态变化做出响应。在API文档中，每个组件的事件都会列出其名称和触发条件，例如 click 事件、 resize 事件等。开发者可以通过 on 方法或 listeners 配置项来添加事件监听器。

文档中的事件描述会提供事件触发时传入的参数信息，这有助于开发者编写相应的事件处理函数。此外，了解事件冒泡和默认事件处理机制，对于合理使用事件监听器和优化性能至关重要。

// Example of adding an event listener
component.on('click', function() {
    alert('Component was clicked!');
});

2.2 API的结构与阅读方法

2.2.1 文档结构的逻辑层次

EXTJS API文档采用了清晰的逻辑层次结构，通常从概述开始，然后详细介绍各个类和组件。文档中使用标题和子标题来区分不同的部分，例如“类方法”、“实例属性”、“配置选项”等。这样的结构有助于开发者快速浏览和定位到自己需要的信息。

在阅读过程中，应该首先阅读类或组件的概述，了解其主要功能和用途；然后，详细查看方法、属性、事件等各项指标，理解它们的用法和配置方式；最后，关注示例代码和使用场景，帮助自己更好地理解和应用。

2.2.2 寻找特定功能的API

在EXTJS API文档中，寻找特定功能的API可以通过多种方式。首先，可以使用文档的搜索功能，输入关键词快速定位到相关类或方法。其次，可以利用文档提供的导航结构，如类继承树或组件分类，逐步缩小搜索范围。还有一种有效的方式是查看组件或类的使用示例，通常示例代码会展示最常用的API调用方法。

// 示例代码：创建一个Ext.grid.Panel并为其添加列
var grid = Ext.create('Ext.grid.Panel', {
    title: 'My Grid',
    store: store,
    columns: [
        { header: 'ID',  dataIndex: 'id', width: 50 },
        { header: 'Name', dataIndex: 'name', flex: 1 }
    ],
    height: 200,
    width: 400
});

2.2.3 利用API文档解决开发问题

API文档是解决开发问题的宝典。在开发过程中，遇到问题时首先应查看文档中对应的类或组件，理解其基本用法。对于复杂的问题，可以查看文档中提供的“常见问题”或“技巧与陷阱”，这些部分常包含针对特定问题的解决方案或注意事项。

此外，EXTJS社区和论坛也是寻找问题解决方案的好去处。许多问题可能已有其他开发者遇到并分享了解决方法。在这些情况下，文档与社区的结合使用，可以大大提高解决问题的效率和质量。

## 常见问题
- 如何在Ext.grid.Panel中实现列的拖放排序？
    使用`columnDrag`配置项并为其添加`dragdrop`事件监听器来实现。

以上内容作为第二章的核心部分，每一小节都针对EXTJS API文档进行了详细的解析和操作指导。希望本章节能帮助开发者更好地理解和运用EXTJS框架，解决实际开发中遇到的问题。在后续的章节中，我们将深入探讨EXTJS的类、方法、属性和事件系统，以及如何创建和配置组件等更多主题。

3. EXTJS的类、方法、属性及事件

3.1 类的继承与方法

3.1.1 类的继承机制

在JavaScript的世界里，Ext JS的类继承机制与其他面向对象编程语言有所不同。Ext JS使用了其独特的类系统，其核心是 Ext.Base 类，其他所有类都继承自此基类。

在Ext JS中，类是通过 Ext.define 方法来定义的。 Ext.define 的第一个参数是类名，第二个参数是一个对象字面量，包含了这个类的属性和方法。类的继承是通过 extend 属性来指定父类实现的。例如：

Ext.define('ParentClass', {
    constructor: function() {
        this.callParent(arguments);
    }
});

Ext.define('ChildClass', {
    extend: 'ParentClass',
    constructor: function() {
        this.callParent(arguments);
    }
});

在上面的代码中， ChildClass 继承了 ParentClass 。 this.callParent(arguments) 是一个关键调用，它确保父类的构造函数或方法被适当地调用。这是Ext JS推荐的继承方式，保证了代码的复用性和扩展性。

继承机制允许子类访问父类的所有属性和方法，并且可以覆盖父类中的方法或添加新的方法和属性。这种机制使得代码结构清晰，便于维护和扩展。

3.1.2 方法的定义与使用

在Ext JS中定义方法也很简单，只需要在类的定义对象中直接声明方法名和对应的函数即可。例如：

Ext.define('HelloWorld', {
    sayHello: function() {
        alert('Hello, World!');
    }
});

使用此类时，我们可以创建一个实例并调用 sayHello 方法：

var helloWorld = Ext.create('HelloWorld');
helloWorld.sayHello(); // 弹出"Hello, World!"的提示框

方法可以包含参数，并在内部逻辑中使用这些参数。我们还可以通过重写父类的方法来实现特定的行为：

Ext.define('DerivedHelloWorld', {
    extend: 'HelloWorld',
    sayHello: function(name) {
        if (name) {
            alert('Hello, ' + name + '!');
        } else {
            this.callParent();
        }
    }
});

var derivedHello = Ext.create('DerivedHelloWorld');
derivedHello.sayHello('Reader'); // 弹出"Hello, Reader!"的提示框

在这个例子中， DerivedHelloWorld 重写了 sayHello 方法，让它可以接受一个参数来个性化问候语。如果调用时不传递参数，它将回退到父类的行为。

通过类的继承与方法的定义使用，Ext JS开发者可以构建一个层次分明、功能丰富的应用架构。

3.2 属性与事件系统

3.2.1 属性的获取与设置

在Ext JS中，类的属性可以通过 cfg （configuration）选项或者直接的getter和setter方法来获取和设置。例如：

Ext.define('User', {
    config: {
        name: null
    },
    constructor: function(config) {
        this.initConfig(config);
    },
    getName: function() {
        return this.name;
    },
    setName: function(name) {
        this.name = name;
    }
});

在上述示例中， name 属性通过 config 定义， initConfig 方法用于初始化和验证配置属性。我们可以通过 setName 和 getName 方法来设置和获取 name 属性。

Ext JS的getter和setter方法提供了数据封装的功能，保证了属性值的正确性和数据的不可变性。这种方法在处理组件的状态时特别有用。

3.2.2 事件的监听与触发

Ext JS的事件处理系统非常强大，支持事件监听与触发机制。使用 on 方法可以为一个或多个事件绑定处理器，而 fireEvent 方法则用来触发事件。

Ext.define('Button', {
    constructor: function() {
        this.on('click', this.onClick, this);
    },
    onClick: function() {
        alert('Button clicked!');
    }
});

在上面的代码中，我们为一个假想的 Button 类绑定了一个点击事件处理器 onClick 。当按钮被点击时，会执行 onClick 方法并弹出提示。

事件系统是Ext JS中组件交互的核心机制。它允许开发者响应用户交互或者内部事件。Ext JS中的组件通常有一套丰富的事件集，开发者可以通过这些事件来扩展组件的行为或执行特定的业务逻辑。

事件的监听与触发机制，使得Ext JS应用能够响应各种用户操作和系统事件，是构建动态交互式界面不可或缺的一环。

4. EXTJS组件的创建与配置

EXTJS框架的强大之处在于其丰富的组件库，这些组件不仅有着一致的外观，而且拥有统一的配置和事件机制，使得构建复杂的Web界面变得简单快捷。在本章节中，我们将深入了解EXTJS组件的创建流程，包括组件的生命周期、初始化、配置等基础概念，并探讨如何进行有效的组件配置，从而达到最佳实践。

4.1 组件创建的流程

4.1.1 理解组件的生命周期

在EXTJS中，每个组件从创建到销毁都遵循一定的生命周期。理解这一过程对于控制组件的创建和销毁行为至关重要。

初始化阶段 ：当组件被创建时，会首先调用其构造函数，随后执行initComponent()方法。在这个方法中，开发者可以设置组件的初始配置。
渲染阶段 ：组件配置完成后，EXTJS会调用onRender()方法来渲染组件，该方法中通常包含将组件插入到DOM中的代码。
配置阶段 ：渲染后，组件会经历applyState()方法来应用之前保存的配置状态，此时可以进一步调整组件。
激活阶段 ：当组件真正进入DOM并且可用时，会触发afterRender()方法。
销毁阶段 ：最后，当不再需要组件时，EXTJS会调用onDestroy()方法，以执行清理操作并从DOM中移除组件。

下面是一个简单的EXTJS组件生命周期示例代码：

Ext.define('MyApp.view.MyComponent', {
    extend: '***ponent',
    alias: 'widget.mycomponent',

    initComponent: function() {
        // 配置组件
        this.callParent(arguments);
    },

    onRender: function() {
        // 渲染组件
        this.callParent(arguments);
    },

    applyState: function(state) {
        // 应用配置状态
        return this.callParent(arguments);
    },

    afterRender: function() {
        // 组件激活
        this.callParent(arguments);
    },

    onDestroy: function() {
        // 销毁组件
        this.callParent(arguments);
    }
});

4.1.2 组件的初始化与配置

组件初始化与配置是EXTJS组件开发的核心步骤之一。每个组件都有其默认配置项，例如title、width、height等。开发者可以通过自定义配置项来实现特定的功能或外观。

配置项的继承 ：EXTJS组件的配置项通常是从其父类组件继承而来，因此理解继承链中各项配置的作用是十分必要的。
配置项的覆盖 ：在子类组件中，开发者可以通过覆盖父类的配置项来改变组件的行为。
配置项的应用 ：配置项可以在组件实例化时直接指定，也可以在组件创建后通过set方法动态设置。

这里提供一个如何初始化与配置EXTJS组件的代码示例：

Ext.application({
    name: 'MyApp',
    launch: function() {
        Ext.create('Ext.Container', {
            fullscreen: true,
            items: [
                {
                    xtype: 'panel',
                    title: 'My Panel',
                    html: 'Hello EXTJS Component!',
                    width: 300,
                    height: 200
                }
            ]
        });
    }
});

在此代码中，我们创建了一个名为 panel 的容器组件，为它设置了一系列的配置项，如 title 、 html 、 width 和 height 。这些配置项定义了面板的外观和初始状态。

4.2 组件配置的最佳实践

4.2.1 配置项的详细解析

在EXTJS中，组件配置的灵活性和强大功能是其一大亮点。针对不同的组件类型，有许多通用的配置项以及特定于该组件的独有配置项。了解这些配置项以及它们如何相互作用是开发高效、可维护的EXTJS应用的关键。

布局配置 ：组件的布局管理是通过配置项 layout 来完成的，它决定了子组件如何被排列和管理。
样式配置 ：样式类可以通过 cls 配置项指定，也可以使用 style 来直接嵌入内联样式。
事件监听器 ：在配置项中可以直接定义事件监听器，如 listeners 配置项，它可以让组件在特定事件发生时执行回调函数。
数据绑定 ：对于数据敏感的组件，可以使用 binding 配置项来实现数据的双向绑定。

4.2.2 配置项的应用场景

了解了组件配置项的详细信息之后，我们还需要关注如何在实际场景中有效应用这些配置项。这不仅涉及到单个组件的配置，还包括多个组件间的配置协同以及在不同环境中的适应性调整。

响应式布局 ：在响应式设计中，组件的布局和样式配置需要根据不同的设备屏幕尺寸进行调整。
组件重用 ：在多个视图或控制器中重用组件时，配置项需要能够适应不同的上下文环境。
性能优化 ：合理配置组件的生命周期事件和资源管理可以避免不必要的性能开销。

下面展示了一个EXTJS组件配置项应用的示例：

Ext.define('MyApp.view.MainPanel', {
    extend: 'Ext.Panel',
    requires: [
        'Ext.plugin.Pullrefresh'
    ],
    config: {
        title: 'Main Panel',
        scrollable: true,
        html: 'This is a scrollable panel with pull-to-refresh',
        plugins: [
            {
                type: 'pullrefresh',
                pullRefreshText: 'Pull to refresh!'
            }
        ]
    }
});

在此示例中，我们创建了一个名为 MainPanel 的面板组件，并对其进行了多项配置。其中， plugins 配置项用于添加一个下拉刷新插件，而 scrollable 配置项则赋予了面板滚动能力。这个简单的配置使得面板不仅适用于常规的显示任务，还能响应用户的交互操作。

以上内容围绕EXTJS组件的创建与配置，深入探讨了组件生命周期的各个阶段，组件初始化与配置的基本规则，并提供了最佳实践的详细解析。通过这些详细的分析和实例，开发者可以更好地掌握EXTJS组件开发的核心技能。