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

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

## 创建示例

```javascript
var component = Ext.create("Ext.tree.Panel", {
  xtype: "treepanel",
  animate: false,
  arrowCls: Ext.baseCSSPrefix + 'tree-arrows',
  autoWidthCls: Ext.baseCSSPrefix + 'autowidth-table',
  ddConfig: {,
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `animate` | `Boolean` | `false` | 控制值或位置变化时是否使用动画。 | `animate: false` |
| `arrowCls` | `Mixed` | `Ext.baseCSSPrefix + 'tree-arrows'` | 配置 `arrowCls` 对应的 CSS 类名。 | `arrowCls: Ext.baseCSSPrefix + 'tree-arrows'` |
| `autoWidthCls` | `Mixed` | `Ext.baseCSSPrefix + 'autowidth-table'` | 配置 `autoWidthCls` 对应的 CSS 类名。 | `autoWidthCls: Ext.baseCSSPrefix + 'autowidth-table'` |
| `ddConfig` | `Object` | `{` | 配置组件的 `ddConfig` 选项。 | `ddConfig: {` |
| `deferRowRender` | `Boolean` | `false` | 控制是否启用 `deferRowRender` 行为。 | `deferRowRender: false` |
| `displayField` | `String` | `'text'` | 下拉或选择组件显示给用户的记录字段。 | `displayField: 'text'` |
| `gridLine` | `Boolean` | `false` | 控制是否启用 `gridLine` 行为。 | `gridLine: false` |
| `isTree` | `Boolean` | `true` | 控制是否启用 `isTree` 行为。 | `isTree: true` |
| `lines` | `Boolean` | `true` | 控制是否启用 `lines` 行为。 | `lines: true` |
| `linesCls` | `Mixed` | `Ext.baseCSSPrefix + 'tree-lines'` | 配置 `linesCls` 对应的 CSS 类名。 | `linesCls: Ext.baseCSSPrefix + 'tree-lines'` |
| `noLinesCls` | `Mixed` | `Ext.baseCSSPrefix + 'tree-no-lines'` | 配置 `noLinesCls` 对应的 CSS 类名。 | `noLinesCls: Ext.baseCSSPrefix + 'tree-no-lines'` |
| `root` | `Object/null` | `null` | 配置组件的 `root` 选项。 | `root: null` |
| `rootVisible` | `Boolean` | `true` | 控制是否启用 `rootVisible` 行为。 | `rootVisible: true` |
| `rowLines` | `Boolean` | `false` | 控制是否启用 `rowLines` 行为。 | `rowLines: false` |
| `selType` | `String` | `'treemodel'` | 配置组件的 `selType` 选项。 | `selType: 'treemodel'` |
| `singleExpand` | `Boolean` | `false` | 控制是否启用 `singleExpand` 行为。 | `singleExpand: false` |
| `treeCls` | `Mixed` | `Ext.baseCSSPrefix + 'tree-panel'` | 配置 `treeCls` 对应的 CSS 类名。 | `treeCls: Ext.baseCSSPrefix + 'tree-panel'` |
| `useArrows` | `Boolean` | `true` | 控制是否启用 `useArrows` 行为。 | `useArrows: true` |
| `viewType` | `String` | `'treeview'` | 配置组件的 `viewType` 选项。 | `viewType: 'treeview'` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `cls`、`lines` 状态。源码涉及 `addCls()`、`callParent()`、`getView()`、`relayEvents()`。 | `component.initComponent()` |
| `getValue` | `` | 读取并返回 `value`。源码涉及 `getSelection()`、`getRootNode()`。 | `component.getValue()` |
| `bindStore` | `store, initial` | 绑定 `store`。 执行时会更新 `store`、`storeListeners` 状态。源码涉及 `mon()`、`relayEvents()`、`createRelayer()`、`getRootNode()`。 | `component.bindStore(...)` |
| `unbindStore` | `` | 解除 `store` 绑定。 | `component.unbindStore()` |
| `onClear` | `` | 处理 `clear` 回调。 | `component.onClear()` |
| `setRootNode` | `` | 设置 `rootNode`。 | `component.setRootNode()` |
| `getRootNode` | `` | 读取并返回 `rootNode`。 | `component.getRootNode()` |
| `onRootChange` | `root` | 处理 `rootChange` 回调。 | `component.onRootChange(...)` |
| `getChecked` | `` | 读取并返回 `checked`。源码涉及 `getView()`。 | `component.getChecked()` |
| `isItemChecked` | `rec` | 判断 `itemChecked` 状态。 | `component.isItemChecked(...)` |
| `expandNode` | `record, deep, callback, scope` | 展开 `node`。源码涉及 `getView()`。 | `component.expandNode(...)` |
| `collapseNode` | `record, deep, callback, scope` | 收起 `node`。源码涉及 `getView()`。 | `component.collapseNode(...)` |
| `expandAll` | `callback, scope` | 展开 `all`。源码涉及 `getRootNode()`。 | `component.expandAll(...)` |
| `collapseAll` | `callback, scope` | 收起 `all`。源码涉及 `getRootNode()`、`getView()`。 | `component.collapseAll(...)` |
| `expandPath` | `path, field, separator, callback, scope` | 展开 `path`。源码涉及 `getRootNode()`、`getView()`。 | `component.expandPath(...)` |
| `selectPath` | `path, field, separator, callback, scope` | 选中 `path`。源码涉及 `getRootNode()`、`expandPath()`、`getSelectionModel()`。 | `component.selectPath(...)` |

## 事件

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

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