ExtJs分页显示实战解析

"Ext Js分页显示案例详解" 在Ext Js中，分页显示是一种常见的数据管理功能，尤其在处理大量数据时，它能够提高用户体验，避免一次性加载所有数据导致页面性能下降。本案例将深入解析Ext Js分页显示的原理，并提供一个基于官方示例的实现。 分页原理： Ext Js的分页主要依赖于`Ext.grid.Panel`组件和`Ext.data.Store`对象。`Store`负责管理数据，并与服务器进行通信获取分页数据。它通过配置`paging`属性启用分页功能，同时设置`proxy`来定义数据源和通信方式。通常，`proxy`会是`Ajax`或`JsonP`，用于发送HTTP请求到服务器获取数据。 `Ajax`或`JsonP`代理会根据`store`的`start`（开始位置）和`limit`（每页显示条数）属性来向服务器请求指定范围的数据。服务器返回的数据通常包含当前页数据以及总记录数，这些信息用于更新分页栏的状态，如页码和总页数。 案例中的关键部分： 1. Bean模型：案例中提到了`Bean`类，这是一个简单的数据模型，用于存储数据库中的数据。每个`Bean`对象包含了`id`和`detail`等属性。 2. Action类：在Struts2 MVC框架中，`DisplayAction`类是处理用户请求的控制器。它包含了`start`和`limit`属性，这两个属性用于从数据库中获取指定范围的数据。在`display`方法中，创建了一个`ArrayList`并填充了示例数据。实际应用中，这将被替换为从数据库查询数据的逻辑。 3. Servlet上下文：`ServletActionContext`用于获取`HttpServletRequest`和`HttpServletResponse`对象，以便与服务器进行交互。这些对象在处理请求和响应时非常关键。 4. 转换库：`json-lib-2.2.1-jdk1.5.jar`和`xstream-1.3.jar`是用于Java对象和JSON格式之间转换的库。在分页过程中，服务器通常会返回JSON格式的数据，这些库可以帮助我们将数据转化为Java对象。 5. 分页栏：在客户端，`Ext.grid.Panel`的分页栏会自动创建，并根据`store`的`totalProperty`（总记录数）和`pageSize`（每页大小）来动态更新状态。 6. 事件监听：`grid`的分页栏包含页码按钮，当用户点击这些按钮时，`store`会自动发送新的请求到服务器，更新`start`和`limit`值，从而获取新的数据。 总结： 本案例通过讲解Ext Js的分页原理，展示了如何在Struts2 MVC框架下实现分页显示。核心在于`Store`的配置和服务器端的响应，以及如何在客户端处理分页事件。理解这些概念对于开发高效、可扩展的Web应用程序至关重要。如果你打算深入学习Ext Js，建议直接研究其源码和官方示例，这将有助于你更好地理解和掌握这一强大的JavaScript框架。