---
title: "Ext.container.Viewport"
description: "xtype 为 viewport 的 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.container.Viewport

源码定义：`ext-all-debug.js:72907`。分类：容器、面板与窗口。

## 创建示例

```javascript
var component = Ext.create("Ext.container.Viewport", {
  xtype: "viewport",
  ariaRole: 'application',
  isViewport: true,
  preserveElOnDestroy: true,
  viewportCls: Ext.baseCSSPrefix + 'viewport',
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `ariaRole` | `String` | `'application'` | 组件在辅助技术中的 ARIA 角色。 | `ariaRole: 'application'` |
| `isViewport` | `Boolean` | `true` | 控制是否启用 `isViewport` 行为。 | `isViewport: true` |
| `preserveElOnDestroy` | `Boolean` | `true` | 控制是否启用 `preserveElOnDestroy` 行为。 | `preserveElOnDestroy: true` |
| `viewportCls` | `Mixed` | `Ext.baseCSSPrefix + 'viewport'` | 配置 `viewportCls` 对应的 CSS 类名。 | `viewportCls: Ext.baseCSSPrefix + 'viewport'` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `el`、`width` 状态。源码涉及 `callParent()`、`getOverflowStyle()`。 | `component.initComponent()` |
| `applyTargetCls` | `targetCls` | 应用 `targetCls`。 | `component.applyTargetCls(...)` |
| `onRender` | `` | 生成 `on` 的渲染结果。 执行时会保留父类默认行为、更新 `width`、`height` 状态。源码涉及 `callParent()`。 | `component.onRender()` |
| `afterFirstLayout` | `` | 在 `firstLayout` 后执行后处理。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.afterFirstLayout()` |
| `fireResize` | `width, height` | 触发 `resize`。源码涉及 `setSize()`。 | `component.fireResize(...)` |
| `initHierarchyState` | `hierarchyState` | 初始化 `hierarchyState`。 执行时会保留父类默认行为、更新 `hierarchyState` 状态。源码涉及 `callParent()`。 | `component.initHierarchyState(...)` |
| `beforeDestroy` | `` | 在 `destroy` 前执行预处理。 执行时会保留父类默认行为。源码涉及 `removeUIFromElement()`、`callParent()`。 | `component.beforeDestroy()` |

## 事件

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

Source: https://ag.879818327.xyz/ext/layout/container-viewport/index.mdx