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

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

## 创建示例

```javascript
var component = Ext.create("Ext.view.View", {
  xtype: "dataview",
  autoScroll: true,
  barExportButtons: true,
  deferHighlight: Ext.isIE7m ? 100 : 0,
  inputTagRe: /^textarea$|^input$/i,
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `autoScroll` | `Boolean` | `true` | 控制内容溢出时是否自动显示滚动条。 | `autoScroll: true` |
| `barExportButtons` | `Boolean` | `true` | 控制是否启用 `barExportButtons` 行为。 | `barExportButtons: true` |
| `deferHighlight` | `Mixed` | `Ext.isIE7m ? 100 : 0` | 配置组件的 `deferHighlight` 选项。 | `deferHighlight: Ext.isIE7m ? 100 : 0` |
| `inputTagRe` | `Mixed` | `/^textarea$\|^input$/i` | 配置组件的 `inputTagRe` 选项。 | `inputTagRe: /^textarea$\|^input$/i` |
| `mouseOverOutBuffer` | `Number` | `20` | 配置组件的 `mouseOverOutBuffer` 选项。 | `mouseOverOutBuffer: 20` |
| `onBeforeContainerClick` | `Mixed` | `Ext.emptyFn` | 配置 `onBeforeContainerClick` 回调函数。 | `onBeforeContainerClick: Ext.emptyFn` |
| `onBeforeContainerContextMenu` | `Mixed` | `Ext.emptyFn` | 配置 `onBeforeContainerContextMenu` 回调函数。 | `onBeforeContainerContextMenu: Ext.emptyFn` |
| `onBeforeContainerDblClick` | `Mixed` | `Ext.emptyFn` | 配置 `onBeforeContainerDblClick` 回调函数。 | `onBeforeContainerDblClick: Ext.emptyFn` |
| `onBeforeContainerKeyDown` | `Mixed` | `Ext.emptyFn` | 配置 `onBeforeContainerKeyDown` 回调函数。 | `onBeforeContainerKeyDown: Ext.emptyFn` |
| `onBeforeContainerMouseDown` | `Mixed` | `Ext.emptyFn` | 配置 `onBeforeContainerMouseDown` 回调函数。 | `onBeforeContainerMouseDown: Ext.emptyFn` |
| `onBeforeContainerMouseOut` | `Mixed` | `Ext.emptyFn` | 配置 `onBeforeContainerMouseOut` 回调函数。 | `onBeforeContainerMouseOut: Ext.emptyFn` |
| `onBeforeContainerMouseOver` | `Mixed` | `Ext.emptyFn` | 配置 `onBeforeContainerMouseOver` 回调函数。 | `onBeforeContainerMouseOver: Ext.emptyFn` |
| `onBeforeContainerMouseUp` | `Mixed` | `Ext.emptyFn` | 配置 `onBeforeContainerMouseUp` 回调函数。 | `onBeforeContainerMouseUp: Ext.emptyFn` |
| `onBeforeItemClick` | `Mixed` | `Ext.emptyFn` | 配置 `onBeforeItemClick` 回调函数。 | `onBeforeItemClick: Ext.emptyFn` |
| `onBeforeItemContextMenu` | `Mixed` | `Ext.emptyFn` | 配置 `onBeforeItemContextMenu` 回调函数。 | `onBeforeItemContextMenu: Ext.emptyFn` |
| `onBeforeItemDblClick` | `Mixed` | `Ext.emptyFn` | 配置 `onBeforeItemDblClick` 回调函数。 | `onBeforeItemDblClick: Ext.emptyFn` |
| `onBeforeItemFocus` | `Mixed` | `Ext.emptyFn` | 配置 `onBeforeItemFocus` 回调函数。 | `onBeforeItemFocus: Ext.emptyFn` |
| `onBeforeItemKeyDown` | `Mixed` | `Ext.emptyFn` | 配置 `onBeforeItemKeyDown` 回调函数。 | `onBeforeItemKeyDown: Ext.emptyFn` |
| `onBeforeItemMouseDown` | `Mixed` | `Ext.emptyFn` | 配置 `onBeforeItemMouseDown` 回调函数。 | `onBeforeItemMouseDown: Ext.emptyFn` |
| `onBeforeItemMouseEnter` | `Mixed` | `Ext.emptyFn` | 配置 `onBeforeItemMouseEnter` 回调函数。 | `onBeforeItemMouseEnter: Ext.emptyFn` |
| `onBeforeItemMouseLeave` | `Mixed` | `Ext.emptyFn` | 配置 `onBeforeItemMouseLeave` 回调函数。 | `onBeforeItemMouseLeave: Ext.emptyFn` |
| `onBeforeItemMouseUp` | `Mixed` | `Ext.emptyFn` | 配置 `onBeforeItemMouseUp` 回调函数。 | `onBeforeItemMouseUp: Ext.emptyFn` |
| `onContainerClick` | `Mixed` | `Ext.emptyFn` | 配置 `onContainerClick` 回调函数。 | `onContainerClick: Ext.emptyFn` |
| `onContainerContextMenu` | `Mixed` | `Ext.emptyFn` | 配置 `onContainerContextMenu` 回调函数。 | `onContainerContextMenu: Ext.emptyFn` |
| `onContainerDblClick` | `Mixed` | `Ext.emptyFn` | 配置 `onContainerDblClick` 回调函数。 | `onContainerDblClick: Ext.emptyFn` |
| `onContainerKeyDown` | `Mixed` | `Ext.emptyFn` | 配置 `onContainerKeyDown` 回调函数。 | `onContainerKeyDown: Ext.emptyFn` |
| `onContainerMouseDown` | `Mixed` | `Ext.emptyFn` | 配置 `onContainerMouseDown` 回调函数。 | `onContainerMouseDown: Ext.emptyFn` |
| `onContainerMouseOut` | `Mixed` | `Ext.emptyFn` | 配置 `onContainerMouseOut` 回调函数。 | `onContainerMouseOut: Ext.emptyFn` |
| `onContainerMouseOver` | `Mixed` | `Ext.emptyFn` | 配置 `onContainerMouseOver` 回调函数。 | `onContainerMouseOver: Ext.emptyFn` |
| `onContainerMouseUp` | `Mixed` | `Ext.emptyFn` | 配置 `onContainerMouseUp` 回调函数。 | `onContainerMouseUp: Ext.emptyFn` |
| `onItemClick` | `Mixed` | `Ext.emptyFn` | 配置 `onItemClick` 回调函数。 | `onItemClick: Ext.emptyFn` |
| `onItemContextMenu` | `Mixed` | `Ext.emptyFn` | 配置 `onItemContextMenu` 回调函数。 | `onItemContextMenu: Ext.emptyFn` |
| `onItemDblClick` | `Mixed` | `Ext.emptyFn` | 配置 `onItemDblClick` 回调函数。 | `onItemDblClick: Ext.emptyFn` |
| `onItemFocus` | `Mixed` | `Ext.emptyFn` | 配置 `onItemFocus` 回调函数。 | `onItemFocus: Ext.emptyFn` |
| `onItemKeyDown` | `Mixed` | `Ext.emptyFn` | 配置 `onItemKeyDown` 回调函数。 | `onItemKeyDown: Ext.emptyFn` |
| `onItemMouseDown` | `Mixed` | `Ext.emptyFn` | 配置 `onItemMouseDown` 回调函数。 | `onItemMouseDown: Ext.emptyFn` |
| `onItemMouseUp` | `Mixed` | `Ext.emptyFn` | 配置 `onItemMouseUp` 回调函数。 | `onItemMouseUp: Ext.emptyFn` |
| `processContainerEvent` | `Mixed` | `Ext.emptyFn` | 配置组件的 `processContainerEvent` 选项。 | `processContainerEvent: Ext.emptyFn` |
| `processItemEvent` | `Mixed` | `Ext.emptyFn` | 配置组件的 `processItemEvent` 选项。 | `processItemEvent: Ext.emptyFn` |
| `processSpecialEvent` | `Mixed` | `Ext.emptyFn` | 配置组件的 `processSpecialEvent` 选项。 | `processSpecialEvent: Ext.emptyFn` |
| `tagClosable` | `Boolean` | `true` | 控制是否启用 `tagClosable` 行为。 | `tagClosable: true` |
| `tplDisplay` | `Object/null` | `null` | 配置组件的 `tplDisplay` 选项。 | `tplDisplay: null` |
| `tplIcon` | `Object/null` | `null` | 配置组件的 `tplIcon` 选项。 | `tplIcon: null` |
| `tplTip` | `Object/null` | `null` | 配置组件的 `tplTip` 选项。 | `tplTip: null` |
| `viewType` | `Object/null` | `null` | 配置组件的 `viewType` 选项。 | `viewType: null` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `setValue` | `value` | 设置 `value`。 | `component.setValue(...)` |
| `getValue` | `` | 读取并返回 `value`。源码涉及 `getSelection()`。 | `component.getValue()` |
| `getNodeContainer` | `` | 读取并返回 `nodeContainer`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.getNodeContainer()` |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `viewType`、`cls` 状态。源码涉及 `mon()`、`refresh()`、`callParent()`。 | `component.initComponent()` |
| `addCmpEvents` | `` | 添加 `cmpEvents`。源码涉及 `addEvents()`。 | `component.addCmpEvents()` |
| `getFocusEl` | `` | 读取并返回 `focusEl`。源码涉及 `getTargetEl()`。 | `component.getFocusEl()` |
| `loadPageBarItems` | `` | 加载 `pageBarItems`。 | `component.loadPageBarItems()` |
| `afterRender` | `` | 生成 `after` 的渲染结果。 执行时会保留父类默认行为、更新 `pagingBarComp` 状态。源码涉及 `callParent()`、`mon()`、`getTargetEl()`、`setLocalXY()`。 | `component.afterRender()` |
| `onMouseOver` | `e` | 处理 `mouseOver` 回调。源码涉及 `handleMouseOver()`。 | `component.onMouseOver(...)` |
| `getSelection` | `` | 读取并返回 `selection`。 | `component.getSelection()` |
| `setSelection` | `records, keepExisting, suppressEvent` | 设置 `selection`。 | `component.setSelection(...)` |
| `onMouseOut` | `e` | 处理 `mouseOut` 回调。源码涉及 `getTargetSelector()`、`handleMouseOut()`。 | `component.onMouseOut(...)` |
| `getTargetSelector` | `` | 读取并返回 `targetSelector`。 | `component.getTargetSelector()` |
| `handleMouseOver` | `e` | 处理 `mouseOver`。 执行时会更新 `mouseOverItem` 状态。源码涉及 `getTargetSelector()`、`handleEvent()`。 | `component.handleMouseOver(...)` |
| `handleMouseOut` | `e, item` | 处理 `mouseOut`。源码涉及 `handleEvent()`。 | `component.handleMouseOut(...)` |
| `handleEvent` | `e` | 处理 `event`。源码涉及 `processUIEvent()`、`processSpecialEvent()`。 | `component.handleEvent(...)` |
| `processUIEvent` | `e` | 处理 `uIEvent`。 执行时会派发 `beforeitem`、`item`、`beforecontainer`、`container` 事件。源码涉及 `getTargetSelector()`、`getTargetEl()`、`statics()`、`getSelectionModel()`。 | `component.processUIEvent(...)` |
| `onItemMouseEnter` | `record, item, index, e` | 处理 `itemMouseEnter` 回调。源码涉及 `highlightItem()`。 | `component.onItemMouseEnter(...)` |
| `onItemMouseLeave` | `record, item, index, e` | 处理 `itemMouseLeave` 回调。源码涉及 `clearHighlight()`。 | `component.onItemMouseLeave(...)` |
| `setHighlightedItem` | `item` | 设置 `highlightedItem`。 执行时会派发 `unhighlightitem`、`highlightitem` 事件、更新 `highlightedItem` 状态。源码涉及 `fireEvent()`。 | `component.setHighlightedItem(...)` |
| `highlightItem` | `item` | 处理 `highlightItem` 操作。源码涉及 `setHighlightedItem()`。 | `component.highlightItem(...)` |
| `clearHighlight` | `` | 清空 `highlight`。源码涉及 `setHighlightedItem()`。 | `component.clearHighlight()` |
| `onUpdate` | `store, record` | 处理 `update` 回调。 执行时会保留父类默认行为。源码涉及 `getNode()`、`callParent()`、`highlightItem()`。 | `component.onUpdate(...)` |
| `refresh` | `` | 刷新组件。 执行时会保留父类默认行为。源码涉及 `clearHighlight()`、`callParent()`。 | `component.refresh()` |
| `focusNode` | `rec` | 将焦点移动到 `node`。源码涉及 `getNode()`、`scrollBy()`。 | `component.focusNode(...)` |
| `bindStore` | `store, initial, propertyName` | 绑定 `store`。 执行时会保留父类默认行为。源码涉及 `bindStoreListeners()`、`callParent()`、`mon()`。 | `component.bindStore(...)` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `beforecontainerclick` | 用户点击视图容器区域之前触发；监听器返回 `false` 可取消默认处理。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { beforecontainerclick: function () {} }` |
| `beforecontainercontextmenu` | 用户打开上下文菜单视图容器区域之前触发；监听器返回 `false` 可取消默认处理。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { beforecontainercontextmenu: function () {} }` |
| `beforecontainerdblclick` | 用户双击视图容器区域之前触发；监听器返回 `false` 可取消默认处理。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { beforecontainerdblclick: function () {} }` |
| `beforecontainerkeydown` | 用户按下按键视图容器区域之前触发；监听器返回 `false` 可取消默认处理。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { beforecontainerkeydown: function () {} }` |
| `beforecontainermousedown` | 用户按下鼠标按钮视图容器区域之前触发；监听器返回 `false` 可取消默认处理。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { beforecontainermousedown: function () {} }` |
| `beforecontainermouseout` | 用户移出视图容器区域之前触发；监听器返回 `false` 可取消默认处理。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { beforecontainermouseout: function () {} }` |
| `beforecontainermouseover` | 用户悬停视图容器区域之前触发；监听器返回 `false` 可取消默认处理。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { beforecontainermouseover: function () {} }` |
| `beforecontainermouseup` | 用户松开鼠标按钮视图容器区域之前触发；监听器返回 `false` 可取消默认处理。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { beforecontainermouseup: function () {} }` |
| `beforedeselect` | 执行 `deselect` 对应的默认操作之前触发；监听器返回 `false` 可取消默认处理。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { beforedeselect: function () {} }` |
| `beforeitemclick` | 用户点击数据项之前触发；监听器返回 `false` 可取消默认处理。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { beforeitemclick: function () {} }` |
| `beforeitemcontextmenu` | 用户打开上下文菜单数据项之前触发；监听器返回 `false` 可取消默认处理。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { beforeitemcontextmenu: function () {} }` |
| `beforeitemdblclick` | 用户双击数据项之前触发；监听器返回 `false` 可取消默认处理。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { beforeitemdblclick: function () {} }` |
| `beforeitemkeydown` | 用户按下按键数据项之前触发；监听器返回 `false` 可取消默认处理。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { beforeitemkeydown: function () {} }` |
| `beforeitemmousedown` | 用户按下鼠标按钮数据项之前触发；监听器返回 `false` 可取消默认处理。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { beforeitemmousedown: function () {} }` |
| `beforeitemmouseenter` | 用户移入数据项之前触发；监听器返回 `false` 可取消默认处理。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { beforeitemmouseenter: function () {} }` |
| `beforeitemmouseleave` | 用户移出数据项之前触发；监听器返回 `false` 可取消默认处理。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { beforeitemmouseleave: function () {} }` |
| `beforeitemmouseup` | 用户松开鼠标按钮数据项之前触发；监听器返回 `false` 可取消默认处理。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { beforeitemmouseup: function () {} }` |
| `beforeselect` | 选中值或记录之前触发，可用于取消选择。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { beforeselect: function () {} }` |
| `containerclick` | 用户点击视图容器区域时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { containerclick: function () {} }` |
| `containercontextmenu` | 用户打开上下文菜单视图容器区域时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { containercontextmenu: function () {} }` |
| `containerdblclick` | 用户双击视图容器区域时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { containerdblclick: function () {} }` |
| `containerkeydown` | 用户按下按键视图容器区域时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { containerkeydown: function () {} }` |
| `containermousedown` | 用户按下鼠标按钮视图容器区域时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { containermousedown: function () {} }` |
| `containermouseout` | 用户移出视图容器区域时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { containermouseout: function () {} }` |
| `containermouseover` | 用户悬停视图容器区域时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { containermouseover: function () {} }` |
| `containermouseup` | 用户松开鼠标按钮视图容器区域时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { containermouseup: function () {} }` |
| `deselect` | 记录或值被取消选中时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { deselect: function () {} }` |
| `focuschange` | 当前焦点项变化后触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { focuschange: function () {} }` |
| `highlightitem` | 数据项被高亮后触发。 源码在 `setHighlightedItem()` 中通过 `fireEvent()` 触发。 | `listeners: { highlightitem: function () {} }` |
| `itemclick` | 用户点击子项时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { itemclick: function () {} }` |
| `itemcontextmenu` | 用户打开上下文菜单数据项时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { itemcontextmenu: function () {} }` |
| `itemdblclick` | 用户双击子项时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { itemdblclick: function () {} }` |
| `itemkeydown` | 用户按下按键数据项时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { itemkeydown: function () {} }` |
| `itemmousedown` | 用户按下鼠标按钮数据项时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { itemmousedown: function () {} }` |
| `itemmouseenter` | 用户移入数据项时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { itemmouseenter: function () {} }` |
| `itemmouseleave` | 用户移出数据项时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { itemmouseleave: function () {} }` |
| `itemmouseup` | 用户松开鼠标按钮数据项时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { itemmouseup: function () {} }` |
| `select` | 用户选中值或记录时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { select: function () {} }` |
| `selectionchange` | 选中记录集合发生变化时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { selectionchange: function () {} }` |
| `unhighlightitem` | 数据项取消高亮后触发。 源码在 `setHighlightedItem()` 中通过 `fireEvent()` 触发。 | `listeners: { unhighlightitem: function () {} }` |

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