---
title: "Ext.resizer.Splitter"
description: "xtype 为 splitter 的 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.resizer.Splitter

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

## 创建示例

```javascript
var component = Ext.create("Ext.resizer.Splitter", {
  xtype: "splitter",
  ariaRole: 'separator',
  baseCls: Ext.baseCSSPrefix + 'splitter',
  canResize: true,
  childEls: [,
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `ariaRole` | `String` | `'separator'` | 组件在辅助技术中的 ARIA 角色。 | `ariaRole: 'separator'` |
| `baseCls` | `Mixed` | `Ext.baseCSSPrefix + 'splitter'` | 配置 `baseCls` 对应的 CSS 类名。 | `baseCls: Ext.baseCSSPrefix + 'splitter'` |
| `canResize` | `Boolean` | `true` | 控制是否启用 `canResize` 行为。 | `canResize: true` |
| `childEls` | `Array` | `[` | 组件创建后需要引用的子 DOM 元素集合。 | `childEls: [` |
| `collapsedClsInternal` | `Mixed` | `Ext.baseCSSPrefix + 'splitter-collapsed'` | 配置组件的 `collapsedClsInternal` 选项。 | `collapsedClsInternal: Ext.baseCSSPrefix + 'splitter-collapsed'` |
| `collapseDirProps` | `Object` | `{` | 配置组件的 `collapseDirProps` 选项。 | `collapseDirProps: {` |
| `collapseOnDblClick` | `Boolean` | `true` | 控制是否启用 `collapseOnDblClick` 行为。 | `collapseOnDblClick: true` |
| `collapseTarget` | `String` | `'next'` | 配置组件的 `collapseTarget` 选项。 | `collapseTarget: 'next'` |
| `collapsible` | `Boolean` | `false` | 控制面板是否允许展开和收起。 | `collapsible: false` |
| `defaultSplitMax` | `Number` | `1000` | 配置组件的 `defaultSplitMax` 选项。 | `defaultSplitMax: 1000` |
| `defaultSplitMin` | `Number` | `40` | 配置组件的 `defaultSplitMin` 选项。 | `defaultSplitMin: 40` |
| `horizontal` | `Boolean` | `false` | 控制是否启用 `horizontal` 行为。 | `horizontal: false` |
| `orientationProps` | `Object` | `{` | 配置组件的 `orientationProps` 选项。 | `orientationProps: {` |
| `renderTpl` | `Array` | `[` | 配置生成组件内容的 `renderTpl` 模板。 | `renderTpl: [` |
| `size` | `Number` | `5` | 配置组件的 `size` 选项。 | `size: 5` |
| `tracker` | `Object/null` | `null` | 配置组件的 `tracker` 选项。 | `tracker: null` |
| `vertical` | `Boolean` | `false` | 控制组件是否以垂直方向显示。 | `vertical: false` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `getTrackerConfig` | `` | 读取并返回 `trackerConfig`。 | `component.getTrackerConfig()` |
| `beforeRender` | `` | 生成 `before` 的渲染结果。 执行时会保留父类默认行为。源码涉及 `getCollapseTarget()`、`callParent()`、`addCls()`、`getCollapseDirection()`。 | `component.beforeRender()` |
| `onRender` | `` | 生成 `on` 的渲染结果。 执行时会保留父类默认行为、更新 `tracker` 状态。源码涉及 `callParent()`、`mon()`、`getCollapseTarget()`、`getTrackerConfig()`。 | `component.onRender()` |
| `getCollapseDirection` | `` | 读取并返回 `collapseDirection`。 执行时会更新 `collapseDirection` 状态。源码涉及 `setOrientation()`。 | `component.getCollapseDirection()` |
| `getCollapseTarget` | `` | 读取并返回 `collapseTarget`。源码涉及 `previousSibling()`、`nextSibling()`。 | `component.getCollapseTarget()` |
| `setCollapseEl` | `display` | 设置 `collapseEl`。 | `component.setCollapseEl(...)` |
| `onBeforeTargetExpand` | `target` | 处理 `beforeTargetExpand` 回调。源码涉及 `setCollapseEl()`。 | `component.onBeforeTargetExpand(...)` |
| `onBeforeTargetCollapse` | `` | 处理 `beforeTargetCollapse` 回调。源码涉及 `setCollapseEl()`。 | `component.onBeforeTargetCollapse()` |
| `onTargetCollapse` | `target` | 处理 `targetCollapse` 回调。源码涉及 `setCollapseEl()`。 | `component.onTargetCollapse(...)` |
| `onTargetExpand` | `target` | 处理 `targetExpand` 回调。源码涉及 `setCollapseEl()`。 | `component.onTargetExpand(...)` |
| `applyCollapseDirection` | `` | 应用 `collapseDirection`。 | `component.applyCollapseDirection()` |
| `applyOrientation` | `` | 应用 `orientation`。源码涉及 `hasOwnProperty()`、`removeCls()`、`addCls()`。 | `component.applyOrientation()` |
| `setOrientation` | `orientation` | 设置 `orientation`。 执行时会更新 `orientation` 状态。源码涉及 `applyOrientation()`。 | `component.setOrientation(...)` |
| `updateOrientation` | `` | 更新 `orientation`。源码涉及 `getCollapseDirection()`、`applyCollapseDirection()`。 | `component.updateOrientation()` |
| `toggleTargetCmp` | `e, t` | 切换 `targetCmp`。源码涉及 `getCollapseTarget()`。 | `component.toggleTargetCmp(...)` |
| `setSize` | `` | 设置 `size`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.setSize()` |
| `beforeDestroy` | `` | 在 `destroy` 前执行预处理。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.beforeDestroy()` |

## 事件

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

Source: https://ag.879818327.xyz/ext/basic/resizer-splitter/index.mdx