---
title: "Ext.grid.property.Grid"
description: "xtype 为 propertygrid 的 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.grid.property.Grid

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

## 创建示例

```javascript
var component = Ext.create("Ext.grid.property.Grid", {
  xtype: "propertygrid",
  clicksToEdit: 1,
  columnLines: true,
  enableColumnMove: false,
  enableHdMenu: false,
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `clicksToEdit` | `Number` | `1` | 配置组件的 `clicksToEdit` 选项。 | `clicksToEdit: 1` |
| `columnLines` | `Boolean` | `true` | 控制是否启用 `columnLines` 行为。 | `columnLines: true` |
| `enableColumnMove` | `Boolean` | `false` | 控制是否启用 `enableColumnMove` 行为。 | `enableColumnMove: false` |
| `enableHdMenu` | `Boolean` | `false` | 控制是否启用 `enableHdMenu` 行为。 | `enableHdMenu: false` |
| `gridCls` | `Mixed` | `Ext.baseCSSPrefix + 'property-grid'` | 配置 `gridCls` 对应的 CSS 类名。 | `gridCls: Ext.baseCSSPrefix + 'property-grid'` |
| `inferTypes` | `Boolean` | `true` | 控制是否启用 `inferTypes` 行为。 | `inferTypes: true` |
| `nameField` | `String` | `'name'` | 配置组件的 `nameField` 选项。 | `nameField: 'name'` |
| `stripeRows` | `Boolean` | `false` | 控制是否启用 `stripeRows` 行为。 | `stripeRows: false` |
| `trackMouseOver` | `Boolean` | `false` | 控制是否启用 `trackMouseOver` 行为。 | `trackMouseOver: false` |
| `valueField` | `String` | `'value'` | 下拉或选择组件作为实际值的记录字段。 | `valueField: 'value'` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `source`、`plugins` 状态。源码涉及 `addCls()`、`configure()`、`addEvents()`、`callParent()`。 | `component.initComponent()` |
| `configure` | `config` | 处理 `configure` 操作。源码涉及 `configureLegacy()`、`getConfig()`、`setConfig()`。 | `component.configure(...)` |
| `getConfig` | `fieldName, key, defaultValue` | 读取并返回 `config`。 | `component.getConfig(...)` |
| `setConfig` | `fieldName, key, value` | 设置 `config`。 | `component.setConfig(...)` |
| `configureLegacy` | `config` | 处理 `configureLegacy` 操作。源码涉及 `copyLegacyObject()`。 | `component.configureLegacy(...)` |
| `copyLegacyObject` | `config, o, keyName` | 处理 `copyLegacyObject` 操作。 | `component.copyLegacyObject(...)` |
| `onUpdate` | `store, record, operation` | 处理 `update` 回调。 执行时会派发 `beforepropertychange`、`propertychange` 事件。源码涉及 `fireEvent()`。 | `component.onUpdate(...)` |
| `walkCells` | `pos, direction, e, preventWrap, verifierFn, scope` | 遍历 `cells`。 | `component.walkCells(...)` |
| `getCellEditor` | `record, column` | 读取并返回 `cellEditor`。源码涉及 `getConfig()`、`setConfig()`。 | `component.getCellEditor(...)` |
| `beforeDestroy` | `` | 在 `destroy` 前执行预处理。 执行时会保留父类默认行为。源码涉及 `callParent()`、`destroyEditors()`。 | `component.beforeDestroy()` |
| `destroyEditors` | `editors` | 销毁 `editors`。 | `component.destroyEditors(...)` |
| `setSource` | `source, sourceConfig` | 设置 `source`。 执行时会更新 `source`、`sourceConfig` 状态。源码涉及 `configure()`。 | `component.setSource(...)` |
| `getSource` | `` | 读取并返回 `source`。 | `component.getSource()` |
| `setProperty` | `prop, value, create` | 设置 `property`。 | `component.setProperty(...)` |
| `removeProperty` | `prop` | 移除 `property`。 | `component.removeProperty(...)` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `beforepropertychange` | 属性值写入前触发；监听器返回 `false` 可取消写入。 源码在 `onUpdate()` 中通过 `fireEvent()` 触发。 | `listeners: { beforepropertychange: function () {} }` |
| `propertychange` | 属性值写入后触发。 源码在 `onUpdate()` 中通过 `fireEvent()` 触发。 | `listeners: { propertychange: function () {} }` |

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