---
title: "Ext.tree.View"
description: "xtype 为 treeview 的 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.tree.View

源码定义：`ext-all-debug.js:127022`。分类：数据视图、表格与树。

## 创建示例

```javascript
var component = Ext.create("Ext.tree.View", {
  xtype: "treeview",
  ariaRole: 'tree',
  checkboxSelector: '.' + Ext.baseCSSPrefix + 'tree-checkbox',
  collapseDuration: 250,
  deferInitialRefresh: false,
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `ariaRole` | `String` | `'tree'` | 组件在辅助技术中的 ARIA 角色。 | `ariaRole: 'tree'` |
| `checkboxSelector` | `String` | `'.' + Ext.baseCSSPrefix + 'tree-checkbox'` | 配置组件的 `checkboxSelector` 选项。 | `checkboxSelector: '.' + Ext.baseCSSPrefix + 'tree-checkbox'` |
| `collapseDuration` | `Number` | `250` | 配置组件的 `collapseDuration` 选项。 | `collapseDuration: 250` |
| `deferInitialRefresh` | `Boolean` | `false` | 控制是否启用 `deferInitialRefresh` 行为。 | `deferInitialRefresh: false` |
| `expandDuration` | `Number` | `250` | 配置组件的 `expandDuration` 选项。 | `expandDuration: 250` |
| `expandedCls` | `Mixed` | `Ext.baseCSSPrefix + 'grid-tree-node-expanded'` | 配置 `expandedCls` 对应的 CSS 类名。 | `expandedCls: Ext.baseCSSPrefix + 'grid-tree-node-expanded'` |
| `expanderIconOverCls` | `Mixed` | `Ext.baseCSSPrefix + 'tree-expander-over'` | 配置 `expanderIconOverCls` 对应的 CSS 类名。 | `expanderIconOverCls: Ext.baseCSSPrefix + 'tree-expander-over'` |
| `expanderSelector` | `String` | `'.' + Ext.baseCSSPrefix + 'tree-expander'` | 配置组件的 `expanderSelector` 选项。 | `expanderSelector: '.' + Ext.baseCSSPrefix + 'tree-expander'` |
| `isTreeView` | `Boolean` | `true` | 控制是否启用 `isTreeView` 行为。 | `isTreeView: true` |
| `leafCls` | `Mixed` | `Ext.baseCSSPrefix + 'grid-tree-node-leaf'` | 配置 `leafCls` 对应的 CSS 类名。 | `leafCls: Ext.baseCSSPrefix + 'grid-tree-node-leaf'` |
| `loadingCls` | `Mixed` | `Ext.baseCSSPrefix + 'grid-tree-loading'` | 配置 `loadingCls` 对应的 CSS 类名。 | `loadingCls: Ext.baseCSSPrefix + 'grid-tree-loading'` |
| `loadMask` | `Boolean` | `false` | 控制是否启用 `loadMask` 行为。 | `loadMask: false` |
| `nodeAnimWrapCls` | `Mixed` | `Ext.baseCSSPrefix + 'tree-animator-wrap'` | 配置 `nodeAnimWrapCls` 对应的 CSS 类名。 | `nodeAnimWrapCls: Ext.baseCSSPrefix + 'tree-animator-wrap'` |
| `rootVisible` | `Boolean` | `true` | 控制是否启用 `rootVisible` 行为。 | `rootVisible: true` |
| `stripeRows` | `Boolean` | `false` | 控制是否启用 `stripeRows` 行为。 | `stripeRows: false` |
| `toggleOnDblClick` | `Boolean` | `true` | 控制是否启用 `toggleOnDblClick` 行为。 | `toggleOnDblClick: true` |
| `treeRowTpl` | `Array` | `[` | 配置生成组件内容的 `treeRowTpl` 模板。 | `treeRowTpl: [` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `animate`、`store` 状态。源码涉及 `setRootNode()`、`addEvents()`、`callParent()`、`addRowTpl()`。 | `component.initComponent()` |
| `onBeforeFill` | `treeStore, fillRoot` | 处理 `beforeFill` 回调。 | `component.onBeforeFill(...)` |
| `onFillComplete` | `treeStore, fillRoot, newNodes` | 处理 `fillComplete` 回调。源码涉及 `onAdd()`、`refreshPartner()`。 | `component.onFillComplete(...)` |
| `onBeforeSort` | `` | 处理 `beforeSort` 回调。 | `component.onBeforeSort()` |
| `onSort` | `o` | 处理 `sort` 回调。源码涉及 `refresh()`、`refreshPartner()`。 | `component.onSort(...)` |
| `refreshPartner` | `` | 刷新 `partner`。 | `component.refreshPartner()` |
| `getMaskStore` | `` | 读取并返回 `maskStore`。 | `component.getMaskStore()` |
| `afterRender` | `` | 生成 `after` 的渲染结果。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.afterRender()` |
| `afterComponentLayout` | `` | 在 `componentLayout` 后执行后处理。 执行时会保留父类默认行为。源码涉及 `callParent()`、`getWidth()`。 | `component.afterComponentLayout()` |
| `processUIEvent` | `e` | 处理 `uIEvent`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.processUIEvent(...)` |
| `onClear` | `` | 处理 `clear` 回调。 | `component.onClear()` |
| `setRootNode` | `node` | 设置 `rootNode`。 执行时会更新 `node` 状态。 | `component.setRootNode(...)` |
| `onCheckboxChange` | `e, t` | 处理 `checkboxChange` 回调。源码涉及 `getItemSelector()`、`getTargetEl()`、`onCheckChange()`、`getRecord()`。 | `component.onCheckboxChange(...)` |
| `onCheckChange` | `record` | 处理 `checkChange` 回调。 执行时会派发 `beforecheckchange`、`checkchange` 事件。源码涉及 `fireEvent()`。 | `component.onCheckChange(...)` |
| `getChecked` | `` | 读取并返回 `checked`。 | `component.getChecked()` |
| `isItemChecked` | `rec` | 判断 `itemChecked` 状态。 | `component.isItemChecked(...)` |
| `createAnimWrap` | `record, index` | 创建 `animWrap`。源码涉及 `getNode()`、`renderColumnSizer()`。 | `component.createAnimWrap(...)` |
| `getAnimWrap` | `parent, bubble` | 读取并返回 `animWrap`。 | `component.getAnimWrap(...)` |
| `doAdd` | `records, index` | 执行 `add` 操作。 执行时会保留父类默认行为。源码涉及 `bufferRender()`、`getAnimWrap()`、`callParent()`、`indexInStore()`。 | `component.doAdd(...)` |
| `onRemove` | `ds, records, indexes` | 处理 `remove` 回调。 执行时会派发 `itemremove` 事件。源码涉及 `refresh()`、`doRemove()`、`fireEvent()`。 | `component.onRemove(...)` |
| `doRemove` | `record, index` | 执行 `remove` 操作。 执行时会保留父类默认行为。源码涉及 `getAnimWrap()`、`callParent()`。 | `component.doRemove(...)` |
| `onBeforeExpand` | `parent, records, index` | 处理 `beforeExpand` 回调。源码涉及 `getNode()`、`getAnimWrap()`、`createAnimWrap()`。 | `component.onBeforeExpand(...)` |
| `onExpand` | `parent` | 处理 `expand` 回调。 执行时会派发 `afteritemexpand`、`afteritemexpand` 事件。源码涉及 `getNode()`、`indexOf()`、`ensureSingleExpand()`、`getAnimWrap()`。 | `component.onExpand(...)` |
| `onBeforeCollapse` | `parent, records, index, callback, scope` | 处理 `beforeCollapse` 回调。 执行时会更新 `onCollapseCallback`、`onCollapseScope` 状态。源码涉及 `getAnimWrap()`、`createAnimWrap()`、`onRowDeselect()`、`indexOf()`。 | `component.onBeforeCollapse(...)` |
| `onCollapse` | `parent` | 处理 `collapse` 回调。 执行时会派发 `afteritemcollapse`、`afteritemcollapse` 事件、更新 `onCollapseCallback`、`onCollapseScope` 状态。源码涉及 `getNode()`、`indexOf()`、`getAnimWrap()`、`refreshSelection()`。 | `component.onCollapse(...)` |
| `isAnimating` | `node` | 判断 `animating` 状态。 | `component.isAnimating(...)` |
| `expand` | `record, deep, callback, scope` | 展开组件。 | `component.expand(...)` |
| `collapse` | `record, deep, callback, scope` | 收起组件。 | `component.collapse(...)` |
| `toggle` | `record, deep, callback, scope` | 切换当前组件。源码涉及 `collapse()`、`expand()`。 | `component.toggle(...)` |
| `onItemDblClick` | `record, item, index` | 处理 `itemDblClick` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`、`toggle()`。 | `component.onItemDblClick(...)` |
| `onBeforeItemMouseDown` | `record, item, index, e` | 处理 `beforeItemMouseDown` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.onBeforeItemMouseDown(...)` |
| `onItemClick` | `record, item, index, e` | 处理 `itemClick` 回调。 执行时会保留父类默认行为。源码涉及 `toggle()`、`callParent()`。 | `component.onItemClick(...)` |
| `onExpanderMouseOver` | `e, t` | 处理 `expanderMouseOver` 回调。 | `component.onExpanderMouseOver(...)` |
| `onExpanderMouseOut` | `e, t` | 处理 `expanderMouseOut` 回调。 | `component.onExpanderMouseOut(...)` |
| `getStoreListeners` | `` | 读取并返回 `storeListeners`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.getStoreListeners()` |
| `onBindStore` | `` | 处理 `bindStore` 回调。 执行时会保留父类默认行为。源码涉及 `getTreeStore()`、`callParent()`、`mon()`。 | `component.onBindStore()` |
| `onUnbindStore` | `` | 处理 `unbindStore` 回调。 执行时会保留父类默认行为。源码涉及 `getTreeStore()`、`callParent()`、`mun()`。 | `component.onUnbindStore()` |
| `getTreeStore` | `` | 读取并返回 `treeStore`。 | `component.getTreeStore()` |
| `ensureSingleExpand` | `node` | 处理 `ensureSingleExpand` 操作。 | `component.ensureSingleExpand(...)` |
| `shouldUpdateCell` | `record, column, changedFieldNames` | 判断是否应执行 `updateCell`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.shouldUpdateCell(...)` |
| `onStoreWrite` | `store, operation` | 处理 `storeWrite` 回调。 | `component.onStoreWrite(...)` |
| `onStoreDataChanged` | `store, operation` | 处理 `storeDataChanged` 回调。 | `component.onStoreDataChanged(...)` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `afteritemcollapse` | 树节点收起完成后触发。 源码在 `onCollapse()` 中通过 `fireEvent()` 触发。 | `listeners: { afteritemcollapse: function () {} }` |
| `afteritemexpand` | 树节点展开完成后触发。 源码在 `onExpand()` 中通过 `fireEvent()` 触发。 | `listeners: { afteritemexpand: function () {} }` |
| `nodedragover` | 拖动节点悬停在目标节点上方时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { nodedragover: function () {} }` |

Source: https://ag.879818327.xyz/ext/data/tree-view/index.mdx