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

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

## 创建示例

```javascript
var component = Ext.create("Ext.grid.Panel", {
  xtype: "gridpanel",
  barExportButtons: true,
  barInfoLabel: true,
  barRefreshButton: true,
  border: true,
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `barExportButtons` | `Boolean` | `true` | 控制是否启用 `barExportButtons` 行为。 | `barExportButtons: true` |
| `barInfoLabel` | `Boolean` | `true` | 控制是否启用 `barInfoLabel` 行为。 | `barInfoLabel: true` |
| `barRefreshButton` | `Boolean` | `true` | 控制是否启用 `barRefreshButton` 行为。 | `barRefreshButton: true` |
| `border` | `Boolean` | `true` | 控制是否显示组件边框。 | `border: true` |
| `columns` | `Ext.grid.column.Column[]/Object` | `-` | (required) | `columns: { /* 配置 */ }` |
| `gridLine` | `Boolean` | `false` | 控制是否启用 `gridLine` 行为。 | `gridLine: false` |
| `lockable` | `Boolean` | `false` | 控制是否启用 `lockable` 行为。 | `lockable: false` |
| `pagingBar` | `Boolean` | `true` | 控制是否启用 `pagingBar` 行为。 | `pagingBar: true` |
| `rowLines` | `Boolean` | `true` | False to remove row line styling | `rowLines: true` |
| `viewType` | `String` | `'gridview'` | 配置组件的 `viewType` 选项。 | `viewType: 'gridview'` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `plugins`、`cls` 状态。源码涉及 `callParent()`、`addDocked()`、`mon()`。 | `component.initComponent()` |
| `syncState` | `` | 同步 `state`。 | `component.syncState()` |
| `revertState` | `` | 回退 `state`。源码涉及 `reconfigure()`。 | `component.revertState()` |
| `setValue` | `value` | 设置 `value`。 | `component.setValue(...)` |
| `getValue` | `` | 读取并返回 `value`。源码涉及 `getSelection()`。 | `component.getValue()` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `beforereconfigure` | Fires before a reconfigure to enable modification of incoming Store and columns. | `listeners: { beforereconfigure: function () {} }` |
| `reconfigure` | Fires after a reconfigure. | `listeners: { reconfigure: function () {} }` |

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