extjs 学习笔记 四 带分页的grid

在Ext JS中实现带有分页功能的Grid组件是处理大量数据展示的有效方式，可以极大地改善用户浏览数据时的体验。当处理成千上万条数据时，将所有数据加载到一个页面中会导致页面加载缓慢，影响用户交互。因此，分页功能成为前端开发中不可或缺的一部分。 Ext JS提供了一个强大的分页工具栏组件 Ext.PagingToolbar，它封装了分页所需的所有操作。PagingToolbar是从Toolbar组件继承而来，它提供了一个可视化的界面给用户进行分页操作。在Ext JS中，分页工具栏通过配置参数来设置，主要包括每页显示的记录数（pageSize）、关联的数据存储（store）、显示的分页状态信息（displayMsg）、是否显示分页状态信息（displayInfo）以及无数据时显示的提示信息（emptyMsg）。 在构造分页工具栏之前，需要先配置一个数据存储（store）。数据存储是Ext JS中处理数据的核心组件，负责数据的读取、处理和维护。Ext JS使用Ext.data.JsonStore作为与JSON数据格式交互的存储方式。在配置JsonStore时，需要提供一系列参数，包括数据行集合的属性名（root）、数据集中全部记录数的属性名（totalProperty）、数据行中用来作为标识的属性名（idProperty）、远程排序的设置（remoteSort）、数据字段的定义（fields）和数据代理（proxy）。其中，data proxy负责从远程服务器获取数据，也可以使用本地数据。在本例中，因为需要从外部服务器获取数据，故使用了ScriptTagProxy代理，并指定了数据的URL地址。获取的服务器数据格式必须包含totalProperty属性和root属性对应的集合。 构造PagingToolbar时，需要指定一个json对象作为其参数，这个对象包含了分页工具栏所需的所有配置项。除了前面提到的 pageSize、store、displayMsg、displayInfo 和 emptyMsg 参数外，还可以通过items属性添加更多自定义的工具栏项目。例如，可以通过添加按钮（button）或其他控件来自定义工具栏。 Ext JS的设计哲学之一是利用JSON对象配置组件，使得开发者只需要关注关心的参数，不必担心参数顺序的问题。这一点在PagingToolbar的构造中也得到了体现。通过json对象配置，开发者可以灵活地设置分页工具栏的各个参数，如分页的每页记录数、显示的页码信息和总记录数等，从而实现一个功能完备且用户友好的分页控件。 在Ext JS中实现带分页的Grid控件，需要遵循以下步骤： 1. 构造JsonStore对象，配置与远程服务器交互的数据源。 2. 设置JsonStore对象的参数，包括root、totalProperty、idProperty、remoteSort、fields和proxy。 3. 确保服务器返回的数据格式正确，包含totalProperty和root属性。 4. 构造PagingToolbar对象，使用json对象配置其参数，实现分页功能。 5. 将PagingToolbar设置到Grid的底部或顶部，使得分页控件与Grid控件关联。 通过这一系列步骤，开发者可以灵活地在Ext JS框架中创建一个带有分页功能的Grid组件，用以处理大量数据的展示问题。