---
title: "Ext.Component"
description: "xtype 为 component 的 Ext JS 原生组件参考。"
---

> Documentation Index
> Fetch the complete documentation index at: https://ag.879818327.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# Ext.Component

源码定义：`ext-all-debug.js:35084`。分类：基础组件与提示。

## 创建示例

```javascript
var component = Ext.create("Ext.Component", {
  xtype: "component",
  alignTarget: null,
  beforeShow: Ext.emptyFn,
  bubbleEvents: [],
  defaultAlign: 'c-c',
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `alignTarget` | `Object/null` | `null` | 配置组件的 `alignTarget` 选项。 | `alignTarget: null` |
| `beforeShow` | `Mixed` | `Ext.emptyFn` | 配置组件的 `beforeShow` 选项。 | `beforeShow: Ext.emptyFn` |
| `bubbleEvents` | `Array` | `[]` | 配置组件的 `bubbleEvents` 选项。 | `bubbleEvents: []` |
| `defaultAlign` | `String` | `'c-c'` | 配置组件的 `defaultAlign` 选项。 | `defaultAlign: 'c-c'` |
| `defaultComponentLayoutType` | `String` | `'autocomponent'` | 配置组件的 `defaultComponentLayoutType` 选项。 | `defaultComponentLayoutType: 'autocomponent'` |
| `floating` | `Boolean` | `false` | 控制是否启用 `floating` 行为。 | `floating: false` |
| `hideMode` | `String` | `'display'` | 配置组件的 `hideMode` 选项。 | `hideMode: 'display'` |
| `offsetsCls` | `Mixed` | `Ext.baseCSSPrefix + 'hide-offsets'` | 配置 `offsetsCls` 对应的 CSS 类名。 | `offsetsCls: Ext.baseCSSPrefix + 'hide-offsets'` |
| `onShowVeto` | `Mixed` | `Ext.emptyFn` | 配置 `onShowVeto` 回调函数。 | `onShowVeto: Ext.emptyFn` |
| `popupMenu` | `Object/null` | `null` | 配置组件的 `popupMenu` 选项。 | `popupMenu: null` |
| `resizeHandles` | `String` | `'all'` | 配置组件的 `resizeHandles` 选项。 | `resizeHandles: 'all'` |
| `toFrontOnShow` | `Boolean` | `true` | 控制是否启用 `toFrontOnShow` 行为。 | `toFrontOnShow: true` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `listeners` 状态。源码涉及 `callParent()`、`on()`、`enableBubble()`。 | `component.initComponent()` |
| `afterRender` | `` | 生成 `after` 的渲染结果。 执行时会保留父类默认行为、更新 `popupMenu` 状态。源码涉及 `callParent()`、`setPagePosition()`、`mon()`、`updateObject()`。 | `component.afterRender()` |
| `updateObject` | `` | 更新 `object`。 执行时会更新 `htmlObjects` 状态。 | `component.updateObject()` |
| `setAutoScroll` | `scroll` | 设置 `autoScroll`。 执行时会刷新界面或布局、更新 `autoScroll` 状态。源码涉及 `getOverflowEl()`、`getOverflowStyle()`、`updateLayout()`。 | `component.setAutoScroll(...)` |
| `setOverflowXY` | `overflowX, overflowY` | 设置 `overflowXY`。 执行时会更新 `overflowX`、`overflowY` 状态。源码涉及 `getOverflowEl()`、`getOverflowStyle()`。 | `component.setOverflowXY(...)` |
| `beforeRender` | `` | 生成 `before` 的渲染结果。 执行时会保留父类默认行为。源码涉及 `addCls()`、`callParent()`。 | `component.beforeRender()` |
| `beforeLayout` | `` | 在 `layout` 前执行预处理。 执行时会保留父类默认行为。源码涉及 `callParent()`、`onBeforeFloatLayout()`。 | `component.beforeLayout()` |
| `afterComponentLayout` | `` | 在 `componentLayout` 后执行后处理。 执行时会保留父类默认行为。源码涉及 `callParent()`、`onAfterFloatLayout()`。 | `component.afterComponentLayout()` |
| `makeFloating` | `dom` | 处理 `makeFloating` 操作。 | `component.makeFloating(...)` |
| `wrapPrimaryEl` | `dom` | 包装 `primaryEl`。 执行时会保留父类默认行为。源码涉及 `makeFloating()`、`callParent()`。 | `component.wrapPrimaryEl(...)` |
| `initResizable` | `resizable` | 初始化 `resizable`。 执行时会更新 `resizer` 状态。 | `component.initResizable(...)` |
| `getDragEl` | `` | 读取并返回 `dragEl`。 | `component.getDragEl()` |
| `initDraggable` | `` | 初始化 `draggable`。 执行时会更新 `resizerComponent`、`dd` 状态。 | `component.initDraggable()` |
| `scrollBy` | `deltaX, deltaY, animate` | 滚动到 `by`。源码涉及 `getTargetEl()`。 | `component.scrollBy(...)` |
| `setLoading` | `load,  targetEl` | 设置 `loading`。 执行时会更新 `loadMask` 状态。 | `component.setLoading(...)` |
| `beforeSetPosition` | `` | 在 `setPosition` 前执行预处理。 执行时会保留父类默认行为。源码涉及 `callParent()`、`adjustPosition()`。 | `component.beforeSetPosition()` |
| `afterSetPosition` | `ax, ay` | 在 `setPosition` 后执行后处理。 执行时会派发 `move` 事件。源码涉及 `onPosition()`、`fireEvent()`。 | `component.afterSetPosition(...)` |
| `showAt` | `x, y, animate` | 显示 `at`。 执行时会更新 `x`、`y` 状态。源码涉及 `show()`、`setPosition()`、`setPagePosition()`。 | `component.showAt(...)` |
| `showBy` | `cmp, pos, off` | 显示 `by`。 执行时会更新 `alignTarget`、`defaultAlign` 状态。源码涉及 `show()`、`alignTo()`。 | `component.showBy(...)` |
| `setPagePosition` | `x, y, animate` | 设置 `pagePosition`。 执行时会更新 `pageX`、`pageY` 状态。源码涉及 `isContainedFloater()`、`setPosition()`。 | `component.setPagePosition(...)` |
| `isContainedFloater` | `` | 判断 `containedFloater` 状态。 | `component.isContainedFloater()` |
| `updateBox` | `box` | 更新 `box`。源码涉及 `setSize()`、`setPagePosition()`。 | `component.updateBox(...)` |
| `getOuterSize` | `` | 读取并返回 `outerSize`。 | `component.getOuterSize()` |
| `adjustPosition` | `x, y` | 调整 `position`。源码涉及 `isContainedFloater()`。 | `component.adjustPosition(...)` |
| `getPosition` | `local` | 读取并返回 `position`。源码涉及 `isContainedFloater()`、`getLocalX()`、`getLocalY()`、`getXY()`。 | `component.getPosition(...)` |
| `getId` | `` | 读取并返回 `id`。 执行时会更新 `id` 状态。源码涉及 `getXType()`、`getAutoId()`。 | `component.getId()` |
| `hideSupcanControl` | `` | 隐藏 `supcanControl`。 执行时会更新 `refSupcanControls` 状态。源码涉及 `getBox()`。 | `component.hideSupcanControl()` |
| `showSupcanControl` | `` | 显示 `supcanControl`。 | `component.showSupcanControl()` |
| `show` | `animateTarget, cb, scope` | 显示组件。 执行时会派发 `beforeshow` 事件、更新 `pendingShow`、`hidden` 状态。源码涉及 `isHierarchicallyHidden()`、`initHierarchyEvents()`、`isVisible()`、`onFloatShow()`。 | `component.show(...)` |
| `onShow` | `` | 处理 `show` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`、`fitContainer()`、`doConstrain()`。 | `component.onShow()` |
| `getAnimateTarget` | `target` | 读取并返回 `animateTarget`。 | `component.getAnimateTarget(...)` |
| `afterShow` | `animateTarget, cb, scope` | 在 `show` 后执行后处理。 执行时会更新 `ghostBox` 状态。源码涉及 `getAnimateTarget()`、`ghost()`、`unghost()`、`onShowComplete()`。 | `component.afterShow(...)` |
| `onShowComplete` | `cb, scope` | 处理 `showComplete` 回调。 执行时会派发 `show` 事件。源码涉及 `onFloatShow()`、`fireEvent()`、`hideSupcanControl()`。 | `component.onShowComplete(...)` |
| `hide` | `animateTarget, cb, scope` | 隐藏组件。 执行时会派发 `beforehide` 事件、更新 `hidden` 状态。源码涉及 `isVisible()`、`fireEvent()`、`getHierarchyState()`、`showSupcanControl()`。 | `component.hide(...)` |
| `onHide` | `animateTarget, cb, scope` | 处理 `hide` 回调。源码涉及 `getAnimateTarget()`、`ghost()`、`getSize()`、`afterHide()`。 | `component.onHide(...)` |
| `afterHide` | `cb, scope` | 在 `hide` 后执行后处理。 执行时会派发 `hide` 事件、更新 `hiddenByLayout` 状态。源码涉及 `fireEvent()`、`fireHierarchyEvent()`。 | `component.afterHide(...)` |
| `onDestroy` | `` | 处理 `destroy` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.onDestroy()` |
| `deleteMembers` | `` | 处理 `deleteMembers` 操作。 | `component.deleteMembers()` |
| `focus` | `selectText, delay, callback, scope` | 将焦点移动到组件。源码涉及 `getFocusTask()`、`isVisible()`、`getFocusEl()`、`toFront()`。 | `component.focus(...)` |
| `getFocusTask` | `` | 读取并返回 `focusTask`。 | `component.getFocusTask()` |
| `cancelFocus` | `` | 取消 `focus`。 | `component.cancelFocus()` |
| `blur` | `` | 处理 `blur` 操作。 执行时会更新 `blurring` 状态。源码涉及 `getFocusEl()`。 | `component.blur()` |
| `getEl` | `` | 读取并返回 `el`。 | `component.getEl()` |
| `getResizeEl` | `` | 读取并返回 `resizeEl`。 | `component.getResizeEl()` |
| `getPositionEl` | `` | 读取并返回 `positionEl`。 | `component.getPositionEl()` |
| `getActionEl` | `` | 读取并返回 `actionEl`。 | `component.getActionEl()` |
| `getVisibilityEl` | `` | 读取并返回 `visibilityEl`。 | `component.getVisibilityEl()` |
| `getRefOwner` | `` | 读取并返回 `refOwner`。 | `component.getRefOwner()` |
| `getBubbleTarget` | `` | 读取并返回 `bubbleTarget`。源码涉及 `getRefOwner()`。 | `component.getBubbleTarget()` |
| `getContentTarget` | `` | 读取并返回 `contentTarget`。 | `component.getContentTarget()` |
| `cloneConfig` | `overrides` | 处理 `cloneConfig` 操作。 | `component.cloneConfig(...)` |
| `getXType` | `` | 读取并返回 `xType`。 | `component.getXType()` |
| `findParentBy` | `fn` | 查找 `parentBy`。源码涉及 `getBubbleTarget()`。 | `component.findParentBy(...)` |
| `findParentByType` | `xtype` | 查找 `parentByType`。源码涉及 `findParentBy()`、`up()`。 | `component.findParentByType(...)` |
| `bubble` | `fn, scope, args` | 处理 `bubble` 操作。 | `component.bubble(...)` |
| `getProxy` | `` | 读取并返回 `proxy`。 执行时会更新 `proxy` 状态。 | `component.getProxy()` |
| `fireHierarchyEvent` | `ename` | 触发 `hierarchyEvent`。 | `component.fireHierarchyEvent(...)` |
| `onAdded` | `` | 处理 `added` 回调。 执行时会保留父类默认行为、更新 `hierarchyEventSource` 状态。源码涉及 `callParent()`、`fireHierarchyEvent()`。 | `component.onAdded()` |

## 事件

源码中未找到该组件自身注册的事件；可监听继承事件。

Source: https://ag.879818327.xyz/ext/basic/component/index.mdx