---
title: "Ext.ProgressBar"
description: "xtype 为 progressbar 的 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.ProgressBar

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

## 创建示例

```javascript
var component = Ext.create("Ext.ProgressBar", {
  xtype: "progressbar",
  animate: false,
  ariaRole: 'progressbar',
  baseCls: Ext.baseCSSPrefix + 'progress',
  childEls: [,
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `animate` | `Boolean` | `false` | 控制值或位置变化时是否使用动画。 | `animate: false` |
| `ariaRole` | `String` | `'progressbar'` | 组件在辅助技术中的 ARIA 角色。 | `ariaRole: 'progressbar'` |
| `baseCls` | `Mixed` | `Ext.baseCSSPrefix + 'progress'` | 配置 `baseCls` 对应的 CSS 类名。 | `baseCls: Ext.baseCSSPrefix + 'progress'` |
| `childEls` | `Array` | `[` | 组件创建后需要引用的子 DOM 元素集合。 | `childEls: [` |
| `componentLayout` | `String` | `'progressbar'` | 组件采用的内部布局策略。 | `componentLayout: 'progressbar'` |
| `renderTpl` | `Array` | `[` | 配置生成组件内容的 `renderTpl` 模板。 | `renderTpl: [` |
| `text` | `String` | `''` | 配置组件的 `text` 选项。 | `text: ''` |
| `waitTimer` | `Object/null` | `null` | 配置组件的 `waitTimer` 选项。 | `waitTimer: null` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为。源码涉及 `callParent()`、`addEvents()`。 | `component.initComponent()` |
| `initRenderData` | `` | 初始化 `renderData`。 执行时会保留父类默认行为。源码涉及 `callParent()`、`hasOwnProperty()`。 | `component.initRenderData()` |
| `onRender` | `` | 生成 `on` 的渲染结果。 执行时会保留父类默认行为、更新 `textEl` 状态。源码涉及 `callParent()`、`updateText()`。 | `component.onRender()` |
| `updateProgress` | `value, text, animate` | 更新 `progress`。 执行时会派发 `update` 事件、更新 `value` 状态。源码涉及 `updateText()`、`fireEvent()`。 | `component.updateProgress(...)` |
| `updateText` | `text` | 更新 `text`。 执行时会更新 `text` 状态。 | `component.updateText(...)` |
| `applyText` | `text` | 应用 `text`。源码涉及 `updateText()`。 | `component.applyText(...)` |
| `getText` | `` | 读取并返回 `text`。 | `component.getText()` |
| `wait` | `o` | 等待当前组件。 执行时会更新 `waitTimer` 状态。源码涉及 `updateText()`、`updateProgress()`、`reset()`。 | `component.wait(...)` |
| `isWaiting` | `` | 判断 `waiting` 状态。 | `component.isWaiting()` |
| `reset` | `hide` | 将组件恢复为初始状态。源码涉及 `updateProgress()`、`clearTimer()`、`hide()`。 | `component.reset(...)` |
| `clearTimer` | `` | 清空 `timer`。 执行时会更新 `waitTimer` 状态。 | `component.clearTimer()` |
| `onDestroy` | `` | 处理 `destroy` 回调。 执行时会保留父类默认行为。源码涉及 `clearTimer()`、`callParent()`。 | `component.onDestroy()` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `update` | 关联数据记录更新后触发。 源码在 `updateProgress()` 中通过 `fireEvent()` 触发。 | `listeners: { update: function () {} }` |

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