---
title: "Ext.toolbar.Paging"
description: "xtype 为 pagingtoolbar 的 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.toolbar.Paging

源码定义：`ext-all-debug.js:103786`。分类：按钮、工具栏、菜单与标签页。

## 创建示例

```javascript
var component = Ext.create("Ext.toolbar.Paging", {
  xtype: "pagingtoolbar",
  afterPageText: 'of {0}',
  beforePageText: 'Page',
  displayInfo: false,
  displayMsg: 'Displaying {0} - {1} of {2}',
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `afterPageText` | `String` | `'of {0}'` | 配置组件的 `afterPageText` 选项。 | `afterPageText: 'of {0}'` |
| `beforePageText` | `String` | `'Page'` | 配置组件的 `beforePageText` 选项。 | `beforePageText: 'Page'` |
| `displayInfo` | `Boolean` | `false` | 控制是否启用 `displayInfo` 行为。 | `displayInfo: false` |
| `displayMsg` | `String` | `'Displaying {0} - {1} of {2}'` | 配置组件的 `displayMsg` 选项。 | `displayMsg: 'Displaying {0} - {1} of {2}'` |
| `emptyMsg` | `String` | `'No data to display'` | 配置组件的 `emptyMsg` 选项。 | `emptyMsg: 'No data to display'` |
| `firstText` | `String` | `'First Page'` | 配置组件的 `firstText` 选项。 | `firstText: 'First Page'` |
| `inputItemWidth` | `Number` | `35` | 配置组件的 `inputItemWidth` 选项。 | `inputItemWidth: 35` |
| `lastText` | `String` | `'Last Page'` | 配置组件的 `lastText` 选项。 | `lastText: 'Last Page'` |
| `nextText` | `String` | `'Next Page'` | 配置组件的 `nextText` 选项。 | `nextText: 'Next Page'` |
| `prependButtons` | `Boolean` | `false` | 控制是否启用 `prependButtons` 行为。 | `prependButtons: false` |
| `prevText` | `String` | `'Previous Page'` | 配置组件的 `prevText` 选项。 | `prevText: 'Previous Page'` |
| `refreshText` | `String` | `'Refresh'` | 配置组件的 `refreshText` 选项。 | `refreshText: 'Refresh'` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `getPagingItems` | `` | 读取并返回 `pagingItems`。 执行时会同步关联状态。源码涉及 `syncState()`、`revertState()`。 | `component.getPagingItems()` |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `inlineDataStore`、`items` 状态。源码涉及 `bindStore()`、`getPagingItems()`、`callParent()`、`addEvents()`。 | `component.initComponent()` |
| `beforeRender` | `` | 生成 `before` 的渲染结果。 执行时会保留父类默认行为、更新 `calledFromRender` 状态。源码涉及 `callParent()`、`onLoad()`。 | `component.beforeRender()` |
| `updateInfo` | `` | 更新 `info`。源码涉及 `child()`、`getPageData()`。 | `component.updateInfo()` |
| `onAddRemove` | `` | 处理 `addRemove` 回调。 执行时会更新 `lastLoadCount` 状态。源码涉及 `updateInfo()`。 | `component.onAddRemove()` |
| `onLoad` | `` | 处理 `load` 回调。 执行时会派发 `change` 事件、更新 `lastLoadCount` 状态。源码涉及 `getPageData()`、`child()`、`getInputItem()`、`setChildDisabled()`。 | `component.onLoad()` |
| `setChildDisabled` | `selector, disabled` | 设置 `childDisabled`。源码涉及 `child()`。 | `component.setChildDisabled(...)` |
| `getPageData` | `` | 读取并返回 `pageData`。 | `component.getPageData()` |
| `onLoadError` | `` | 处理 `loadError` 回调。源码涉及 `setChildDisabled()`。 | `component.onLoadError()` |
| `getInputItem` | `` | 读取并返回 `inputItem`。源码涉及 `child()`。 | `component.getInputItem()` |
| `readPageFromInput` | `pageData` | 读取 `pageFromInput`。源码涉及 `getInputItem()`。 | `component.readPageFromInput(...)` |
| `onPagingBlur` | `e` | 处理 `pagingBlur` 回调。源码涉及 `getInputItem()`、`getPageData()`。 | `component.onPagingBlur(...)` |
| `onPagingKeyDown` | `field, e` | 处理 `pagingKeyDown` 回调。源码涉及 `processKeyEvent()`。 | `component.onPagingKeyDown(...)` |
| `processKeyEvent` | `field, e` | 处理 `keyEvent`。 执行时会派发 `beforechange` 事件。源码涉及 `getPageData()`、`readPageFromInput()`、`fireEvent()`。 | `component.processKeyEvent(...)` |
| `beforeLoad` | `` | 在 `load` 前执行预处理。源码涉及 `setChildDisabled()`。 | `component.beforeLoad()` |
| `moveFirst` | `` | 处理 `moveFirst` 操作。 执行时会派发 `beforechange` 事件。源码涉及 `fireEvent()`。 | `component.moveFirst()` |
| `movePrevious` | `` | 处理 `movePrevious` 操作。 执行时会派发 `beforechange` 事件。源码涉及 `fireEvent()`。 | `component.movePrevious()` |
| `moveNext` | `` | 处理 `moveNext` 操作。 执行时会派发 `beforechange` 事件。源码涉及 `getPageData()`、`fireEvent()`。 | `component.moveNext()` |
| `moveLast` | `` | 处理 `moveLast` 操作。 执行时会派发 `beforechange` 事件。源码涉及 `getPageData()`、`fireEvent()`。 | `component.moveLast()` |
| `doRefresh` | `` | 执行 `refresh` 操作。 执行时会派发 `beforechange` 事件。源码涉及 `fireEvent()`。 | `component.doRefresh()` |
| `getStoreListeners` | `` | 读取并返回 `storeListeners`。 | `component.getStoreListeners()` |
| `unbind` | `store` | 解除当前绑定。源码涉及 `bindStore()`。 | `component.unbind(...)` |
| `bind` | `store` | 处理 `bind` 操作。源码涉及 `bindStore()`。 | `component.bind(...)` |
| `onDestroy` | `` | 处理 `destroy` 回调。 执行时会保留父类默认行为。源码涉及 `unbind()`、`callParent()`。 | `component.onDestroy()` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `beforechange` | 组件值变化前触发；监听器返回 `false` 可取消变更。 源码在 `processKeyEvent()`、`moveFirst()`、`movePrevious()`、`moveNext()`、`moveLast()`、`doRefresh()` 中通过 `fireEvent()` 触发。 | `listeners: { beforechange: function () {} }` |
| `change` | 组件值发生变化时触发。 源码在 `onLoad()` 中通过 `fireEvent()` 触发。 | `listeners: { change: function () {} }` |

Source: https://ag.879818327.xyz/ext/navigation/toolbar-paging/index.mdx