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

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

## 创建示例

```javascript
var component = Ext.create("Ext.container.ButtonGroup", {
  xtype: "buttongroup",
  ariaRole: 'group',
  baseCls: Ext.baseCSSPrefix + 'btn-group',
  defaultType: 'button',
  frame: false,
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `ariaRole` | `String` | `'group'` | 组件在辅助技术中的 ARIA 角色。 | `ariaRole: 'group'` |
| `baseCls` | `Mixed` | `Ext.baseCSSPrefix + 'btn-group'` | 配置 `baseCls` 对应的 CSS 类名。 | `baseCls: Ext.baseCSSPrefix + 'btn-group'` |
| `defaultType` | `String` | `'button'` | 配置组件的 `defaultType` 选项。 | `defaultType: 'button'` |
| `frame` | `Boolean` | `false` | 控制是否启用 `frame` 行为。 | `frame: false` |
| `frameHeader` | `Boolean` | `false` | 控制是否启用 `frameHeader` 行为。 | `frameHeader: false` |
| `layout` | `Object` | `{` | 容器对子组件进行排布的布局配置。 | `layout: {` |
| `noTitleCls` | `String` | `'notitle'` | 配置 `noTitleCls` 对应的 CSS 类名。 | `noTitleCls: 'notitle'` |
| `titleAlign` | `String` | `'center'` | 配置组件的 `titleAlign` 选项。 | `titleAlign: 'center'` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `layout` 状态。源码涉及 `addClsWithUI()`、`callParent()`。 | `component.initComponent()` |
| `onBeforeAdd` | `component` | 处理 `beforeAdd` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.onBeforeAdd(...)` |
| `applyDefaults` | `c` | 应用 `defaults`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.applyDefaults(...)` |

## 事件

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

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