组件

Ext JS 应用程序的 UI 由一个或多个称为 组件 的小部件组成。所有组件都是 Ext.Component 类的子类，这使它们能够参与自动生命周期管理，包括实例化、渲染、大小和位置以及销毁。Ext JS 提供了各种有用的组件，任何组件都可以轻松扩展以创建自定义组件。

组件层次结构

一个 容器 是一种特殊的组件类型，它可以包含其他组件。一个典型的应用程序由许多嵌套的组件组成，它们形成一个树状结构，称为组件层次结构。容器负责管理其子组件的生命周期，包括创建、渲染、大小和位置以及销毁。一个典型的应用程序的组件层次结构从顶部的 Viewport 开始，其中嵌套了其他容器和/或组件

子组件使用容器的 items 配置属性添加到容器中。此示例使用 Ext.create() 实例化两个 Panel，然后将这些 Panel 作为子组件添加到 Viewport 中

var childPanel1 = Ext.create('Ext.panel.Panel', {
    title: 'Child Panel 1',
    html: 'A Panel'
});

var childPanel2 = Ext.create('Ext.panel.Panel', {
    title: 'Child Panel 2',
    html: 'Another Panel'
});

Ext.create('Ext.container.Viewport', {
    items: [ childPanel1, childPanel2 ]
});

容器使用 布局管理器 来调整其子组件的大小和位置。有关布局和容器的更多信息，请参阅 布局和容器指南。

XTypes 和延迟实例化

每个组件都有一个称为xtype的符号名称。例如，Ext.panel.Panel的xtype为“panel”。上面的示例展示了如何将已实例化的Component添加到Container中。然而，在大型应用程序中，这并非理想之选，因为并非所有组件都需要立即实例化，并且某些组件可能永远不会被实例化，具体取决于应用程序的使用方式。例如，使用Tab Panel的应用程序仅在用户单击每个选项卡时才需要渲染每个选项卡的内容。这就是xtype发挥作用的地方，它允许在前面配置容器的子级，但直到容器确定需要时才实例化它们。

以下示例代码演示了使用 Tab Panel 对容器子组件进行延迟实例化和渲染。每个选项卡都有一个事件监听器，在选项卡渲染时显示一个警报。

Ext.create('Ext.tab.Panel', {
    renderTo: Ext.getBody(),
    height: 100,
    width: 200,
    items: [
        {
            // Explicitly define the xtype of this Component configuration.
            // This tells the Container (the tab panel in this case)
            // to instantiate a Ext.panel.Panel when it deems necessary
            xtype: 'panel',
            title: 'Tab One',
            html: 'The first tab',
            listeners: {
                render: function() {
                    Ext.MessageBox.alert('Rendered One', 'Tab One was rendered.');
                }
            }
        },
        {
            // xtype for all Component configurations in a Container
            title: 'Tab Two',
            html: 'The second tab',
            listeners: {
                render: function() {
                    Ext.MessageBox.alert('Rendered One', 'Tab Two was rendered.');
                }
            }
        }
    ]
});

运行此代码会导致第一个选项卡立即显示警报。这是因为它默认是活动选项卡，因此它的容器 Tab Panel 会立即实例化并渲染它。

第二个选项卡的警报直到单击该选项卡才会显示。这表明该选项卡直到需要时才被渲染，因为render事件直到选项卡被激活才触发。

显示和隐藏

所有Component都内置了show和hide方法。用于隐藏组件的默认 CSS 方法是“display: none”，但这可以通过hideMode配置进行更改。

    var panel = Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        title: 'Test',
        html: 'Test Panel',
        hideMode: 'visibility' // use the CSS visibility property to show and hide this
component
    });

panel.hide(); // hide the component

    panel.show(); // show the component

浮动组件

浮动Component使用 CSS 绝对定位放置在文档流之外，并且不参与其容器的布局。某些组件（例如Window）默认情况下是浮动的，但任何组件都可以使用floating配置设置为浮动。

var panel = Ext.create('Ext.panel.Panel', {
    width: 200,
    height: 100,
    floating: true, // make this panel an absolutely-positioned floating component
    title: 'Test',
    html: 'Test Panel'
});

上面的代码实例化了一个Panel，但没有渲染它。通常，组件要么具有指定的renderTo配置，要么作为Container的子组件添加，但在浮动组件的情况下，这两者都不需要。浮动组件在第一次调用其show方法时会自动渲染到文档主体。

panel.show(); // render and show the floating panel

以下是一些与浮动组件相关的其他配置和方法，请注意。

• draggable - 启用在屏幕上拖动浮动组件。
• shadow - 自定义浮动组件阴影的外观。
• alignTo() - 将浮动组件与特定元素对齐。
• center() - 将浮动组件在其容器中居中。

创建自定义组件

组合或扩展

在创建新的 UI 类时，必须决定该类是否应该拥有Component的实例，或者扩展该组件。

建议扩展最接近所需功能的基类。这是因为 Ext JS 提供了自动生命周期管理，包括在需要时自动渲染、在适当的布局管理器管理时自动调整组件的大小和位置，以及在从Container中移除时自动销毁。

编写一个新的类，它是一个组件，可以取代组件层次结构中的位置，这比编写一个新的类，该类具有一个 Ext JS 组件，然后必须从外部渲染和管理它更容易。

子类化

Class System 使扩展 Ext JS 框架的任何部分变得容易。

Ext.Base 是所有 Ext JS 类的构建块，此类的原型和静态成员被所有其他类继承。

虽然您当然可以通过 Ext.Base 在尽可能低的级别开始添加功能，但在许多情况下，开发人员希望在继承链中更高的地方开始。

以下示例创建了 Ext.Component 的子类。

Ext.define('My.custom.Component', {
    extend: 'Ext.Component',

    newMethod : function() {
       //...
    }
});

此示例创建了一个新类 My.custom.Component，它继承了 Ext.Component 的所有功能（方法、属性等），以及定义的任何新方法或属性。

模板方法

Ext JS 使用 模板方法模式 将行为委托给子类，该行为仅特定于该子类。

这意味着继承链中的每个类都可以在组件生命周期的某些阶段“贡献”额外的逻辑。每个类都实现了它自己的特殊行为，同时允许继承链中的其他类继续贡献自己的逻辑。

一个例子是 render 函数。render 是在 Component 中定义的方法。它负责启动组件生命周期的渲染阶段。render 不得被覆盖，但它在处理过程中调用 onRender，以允许子类实现者添加 onRender 方法来执行特定于类的处理。每个 onRender 方法都必须在“贡献”其额外逻辑之前调用其超类的 onRender 方法。

下图说明了 onRender 模板方法的功能。

render 方法被调用（这是由容器的布局管理器完成的）。此方法不能被覆盖，并且由 Ext 基类实现。它调用 this.onRender，这是当前子类中的实现（如果已实现）。这将调用超类版本，该版本将调用其超类版本，依此类推。最终，每个类都贡献了其功能，并且控制权返回到 render 函数。

以下是一个实现 onRender 方法的组件子类的示例

Ext.define('My.custom.Component', {
    extend: 'Ext.Component',
    onRender: function() {
        this.callParent(arguments); // call the superclass onRender method

        // perform additional rendering tasks here.
    }
});

重要的是要注意，许多模板方法也有相应的事件。例如，render 事件在组件渲染后触发。但是，在子类化时，必须使用模板方法在生命周期的重要阶段执行类逻辑，而不是事件。事件可以以编程方式暂停，或者可以被处理程序停止。

以下是组件子类可以实现的模板方法

• initComponent 此方法由构造函数调用。它用于初始化数据、设置配置和附加事件处理程序。
• beforeShow 此方法在组件显示之前调用。
• onShow 允许在显示操作中添加行为。在调用超类的 onShow 后，组件将可见。
• afterShow 此方法在组件显示后调用。
• onShowComplete 此方法在 afterShow 方法完成后调用
• onHide 允许在隐藏操作中添加行为。在调用超类的 onHide 后，组件将被隐藏。
• afterHide 此方法在组件隐藏后调用
• onRender 允许在渲染阶段添加行为。
• afterRender 允许在渲染完成后添加行为。在此阶段，组件的元素将根据配置进行样式设置，将添加任何配置的 CSS 类名，并且将处于配置的可见性和配置的启用状态。
• onEnable 允许在启用操作中添加行为。在调用超类的 onEnable 后，组件将被启用。
• onDisable 允许在禁用操作中添加行为。在调用超类的 onDisable 后，组件将被禁用。
• onAdded 允许在将组件添加到容器时添加行为。在此阶段，组件位于父容器的子项集合中。在调用超类的 onAdded 后，ownerCt 引用将存在，如果配置了 ref，则 refOwner 将被设置。
• onRemoved 允许在从其父容器中移除组件时添加行为。在此阶段，组件已从其父容器的子项集合中移除，但尚未销毁（如果父容器的 autoDestroy 为 true，或者如果移除调用传递了真值第二个参数，它将被销毁）。在调用超类的 onRemoved 后，ownerCt 和 refOwner 将不存在。
• onResize 允许在调整大小操作中添加行为。
• onPosition 允许在定位操作中添加行为。
• onDestroy 允许在销毁操作中添加行为。在调用超类的 onDestroy 后，组件将被销毁。
• beforeDestroy 此方法在组件被销毁之前调用。
• afterSetPosition 此方法在组件位置设置后调用。
• afterComponentLayout 此方法在组件布局后调用。
• beforeComponentLayout 此方法在组件布局之前调用。

扩展哪个类

选择最佳扩展类主要取决于效率以及基类必须提供的功能。一直以来，当任何一组 UI 组件需要渲染和管理时，都倾向于扩展 Ext.panel.Panel。

Panel 类具有许多功能

• 边框
• 标题
• 标题工具
• 页脚
• 页脚按钮
• 顶部工具栏
• 底部工具栏
• 包含和管理子组件

如果不需要这些功能，那么使用 Panel 就会浪费资源。

组件

如果所需的 UI 组件不需要包含任何其他组件，也就是说，它只是为了封装某种执行需求的 HTML，那么扩展 Ext.Component 是合适的。例如，以下类是一个包装 HTML 图像元素的组件，并允许设置和获取图像的 src 属性。它还在图像加载时触发 load 事件

Ext.define('Ext.ux.Image', {
    extend: 'Ext.Component', // subclass Ext.Component
    alias: 'widget.managedimage', // this component will have an xtype of 'managedimage'

    autoEl: {
        tag: 'img',
        src: Ext.BLANK_IMAGE_URL,
        cls: 'my-managed-image'
    },

    // Add custom processing to the onRender phase.
    // Add a 'load' listener to the element.
    onRender: function() {
        this.autoEl = Ext.apply({}, this.initialConfig, this.autoEl);
        this.callParent(arguments);
        this.el.on('load', this.onLoad, this);
    },

    onLoad: function() {
        this.fireEvent('load', this);
    },

    setSrc: function(src) {
        if (this.rendered) {
            this.el.dom.src = src;
        } else {
            this.src = src;
        }
    },

    getSrc: function(src) {
        return this.el.dom.src || this.src;
    }
});

用法

var image = Ext.create('Ext.ux.Image');
Ext.create('Ext.panel.Panel', {
    title: 'Image Panel',
    height: 200,
    renderTo: Ext.getBody(),
    items: [ image ]
});

image.on('load', function() {
    console.log('image loaded: ', image.getSrc());
});
image.setSrc('http://www.sencha.com/img/sencha-large.png');

此示例仅用于演示目的 - 在实际应用中应使用 Ext.Img 类来管理图像。

容器

如果所需的 UI 组件要包含其他组件，但不需要 Panel 的任何上述附加功能，那么 Ext.container.Container 是合适的扩展类。在容器级别，重要的是要记住要使用哪个 Ext.layout.container.Container 来渲染和管理子组件。

容器具有以下附加模板方法

• onBeforeAdd 此方法在添加新的子组件之前调用。它传递了新的组件，并且可以用来修改组件或以某种方式准备容器。返回 false 将中止添加操作。
• onAdd 此方法在添加新组件后调用。它传递了已添加的组件。此方法可用于更新可能取决于子项状态的任何内部结构。
• onRemove 此方法在删除新组件后调用。它传递了已删除的组件。此方法可用于更新可能取决于子项状态的任何内部结构。
• beforeLayout 此方法在容器布局（并在必要时渲染）其子组件之前调用。
• afterLayout 此方法在容器布局（并在必要时渲染）其子组件之后调用。

面板

如果所需的 UI 组件必须具有标题、页脚或工具栏，那么 Ext.panel.Panel 是合适的扩展类。

重要：面板是一个容器。重要的是要记住要使用哪个 布局 来渲染和管理子组件。

扩展 Ext.panel.Panel 的类通常高度特定于应用程序，通常用于在配置的布局中聚合其他 UI 组件（通常是容器或表单字段），并提供通过 tbar 和 bbar 中的控件来操作包含的组件的方法。

面板具有以下附加模板方法

• afterCollapse 此方法在面板折叠后调用。
• afterExpand 此方法在面板展开后调用
• onDockedAdd 此方法在将停靠项添加到面板后调用
• onDockedRemove 此方法在从面板中删除停靠项后调用