Ext实现分页查询，前台

在IT行业中，分页查询是常见的数据展示方式，特别是在网页应用中，为了提高用户体验和页面加载速度，通常会将大量数据分成多个部分（页）进行加载。本示例主要介绍了如何使用Ext.js这个JavaScript框架来实现前端的分页查询功能。 创建一个名为`resource`的数据存储（Store），它负责从服务器获取数据。这里的`Store`对象定义了字段（fields）、数据源URL（url）、以及数据读取器（reader）。数据读取器是`Ext.data.XmlReader`，它用于解析XML格式的服务器响应。`fields`定义了数据记录的属性，`mapping`属性指定了XML元素与数据字段的映射关系。在`load`事件中，对数据进行了处理，比如设置`typeImage`字段的值。 接着，使用`load`方法加载数据，通过`params`参数传递分页信息，如`start`（开始位置）和`limit`（每页条数），实现分页查询。 此外，还创建了两个额外的`Store`对象，`resourceType`和`languageType`，它们分别用于获取资源类型列表和语言类型列表，同样使用`XmlReader`读取器，并且加载数据。 在创建`GridPanel`时，这是用于展示数据的组件。`GridPanel`定义了列（columns）和数据存储（store），以及分页工具栏（bbar）。分页工具栏通过`PagingToolbar`创建，设置了每页显示的条数（pageSize），并关联了数据存储（store），以便根据用户操作更新分页状态。 `displayInfo`属性确保显示当前页信息，`beforePageText`和`afterPageText`可以自定义页码显示的文本。`selModel`设置了行选择模型，允许用户多选或单选记录。 总结来说，这个示例展示了如何使用Ext.js实现前端的分页查询功能。核心步骤包括： 1. 创建`Store`对象，定义数据源、字段映射和数据读取器。 2. 添加事件监听器，对数据进行预处理。 3. 使用`load`方法加载数据，通过`params`传递分页参数。 4. 创建`GridPanel`展示数据，定义列结构和分页工具栏。 5. 分页工具栏与`Store`关联，实现分页功能。 这样的实现方式使得前端能够动态地从服务器获取分页数据，减少了初始加载时的数据量，提高了页面响应速度。同时，用户可以方便地浏览和操作大量的数据，提高了用户体验。