Ext.ProgressBar | WebBuilder 文档

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

创建示例

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 () {} }`