使用 ExtJS4 实现 Grid 分页

介绍

在本文中，我将向你介绍如何使用 ExtJS4 实现一个带有分页功能的 Grid。ExtJS4 是一套功能强大、灵活且易于使用的 JavaScript 框架，它提供了丰富的 UI 组件和工具，用于构建富客户端应用程序。

在实现 ExtJS4 Grid 分页功能时，我们需要在前端使用 ExtJS4 的 Grid 组件，同时在后端使用 Java 编写接口将数据返回给前端。下面是实现该功能的整个流程。

流程

下表详细列出了实现 ExtJS4 Grid 分页功能的步骤。

步骤 描述
1 创建一个 ExtJS4 Grid 组件，并配置分页插件
2 在后端编写接口，用于处理 Grid 分页请求
3 在前端的 Store 中配置分页参数
4 在前端的 Grid 中配置分页工具栏，以及相应的事件处理函数
5 在后端的接口中实现分页逻辑，并返回分页数据

在下面的内容中，我将按照上述步骤，详细介绍每一步该如何实现。

步骤一：创建 ExtJS4 Grid 组件

首先，我们需要在前端创建一个 ExtJS4 Grid 组件，并配置分页插件。以下是一个简单的示例代码：

// 创建一个 ExtJS4 Grid 组件
var grid = Ext.create('Ext.grid.Panel', {
  title: 'Grid 分页示例',
  store: Ext.create('Ext.data.Store', {
    // 配置数据源
    proxy: {
      type: 'ajax',
      url: '/api/data', // 后端接口地址
      reader: {
        type: 'json',
        rootProperty: 'data', // 数据在返回结果中的字段名
        totalProperty: 'total' // 总数据条数在返回结果中的字段名
      }
    },
    pageSize: 10, // 每页显示的数据条数
    autoLoad: true // 自动加载数据
  }),
  columns: [
    // 配置 Grid 列
    { text: '列1', dataIndex: 'field1' },
    { text: '列2', dataIndex: 'field2' },
    // ...
  ],
  bbar: Ext.create('Ext.PagingToolbar', {
    // 配置分页工具栏
    store: grid.getStore(),
    displayInfo: true
  })
});

// 将 Grid 渲染到页面上的某个容器中
grid.render('grid-container');

在上述代码中，我们创建了一个 Ext.grid.Panel 实例，并配置了一个 Ext.data.Store 作为数据源。我们还配置了一个分页插件 Ext.PagingToolbar，用于显示分页工具栏和处理分页事件。最后，我们将 Grid 渲染到页面上的某个容器中。

步骤二：后端接口编写

接下来，我们需要在后端编写一个接口，用于处理 Grid 分页请求并返回分页数据。以下是一个简单的示例代码：

// 后端接口代码
@RequestMapping(value = "/api/data", method = RequestMethod.GET)
public ResponseEntity<?> getData(
  @RequestParam("start") int start,
  @RequestParam("limit") int limit
) {
  // 查询数据库并获取需要返回的分页数据
  List<Data> dataList = dataService.getData(start, limit);
  
  // 查询数据库中的总数据条数
  int total = dataService.getTotalCount();
  
  // 构造返回结果，包含分页数据和总数据条数
  Map<String, Object> result = new HashMap<>();
  result.put("data", dataList);
  result.put("total", total);
  
  // 返回结果
  return ResponseEntity.ok(result);
}

在上述代码中，我们使用 Spring MVC 编写了一个 GET 方法的接口 /api/data，该接口接收 start 和 limit 两个参数，分别表示分页的起始位置和每页显示的数据条数。我们在接口中调用 dataService.getData(start, limit) 方法从数据库中获取分页数据，并调用 dataService.getTotalCount() 方法获取总数据条数。最后，我们构造一个包含分页数据和总数据条数的 Map 对象，并将其作为 JSON 数据返回给前端。

步骤三：