ExtJs学习资料22-从服务器获取JSON数据并分页处理.doc

在本篇ExtJs学习资料中，我们探讨了如何从服务器获取JSON数据并进行分页处理。这是一项在Web应用程序中非常常见的任务，特别是在构建数据密集型界面时。下面我们将详细阐述实现这一功能的关键步骤和涉及的技术点。 我们需要引入ExtJs框架的相关文件。在示例中，这些文件包括CSS样式表、JavaScript库以及中文语言包。通过`document.write`函数，这些文件被嵌入到HTML页面中，确保页面可以正确地解析和执行ExtJs的代码。 接着，引入`Global.js`文件，这是一个全局配置文件，可能包含了通用的配置项和函数，比如数据处理和格式化方法。在这个例子中，我们看到一个名为`float_money`的函数，它将数值转换为货币格式。 然后，我们创建了一个名为`remoteData`的`Ext.data.Store`实例，这是ExtJs用于存储和管理数据的核心组件。`Store`对象与服务器进行通信，获取数据，并提供了一种在前端操作数据的接口。在这个示例中，数据源URL设置为`jsonDataInfo.asp`，并且使用了`JsonReader`来解析返回的JSON数据。 `JsonReader`是ExtJs中的数据读取器，它解析JSON格式的数据，并将其转化为可以供GridPanel使用的Record对象。关键配置包括： 1. `id`：指定数据行对象中包含数据行ID的属性名。 2. `totalProperty`：用于获取数据集总记录数的属性名，对于分页至关重要。 3. `successProperty`：指示服务器响应是否成功的属性名。 4. `root`：包含数据行数组的属性名。 5. `fields`：定义了数据字段及其类型，例如`id`、`title`、`director`、`released`（日期格式）、`genre`、`tagline`、`price`（浮点数）和`active`（布尔值）。 此外，`autoLoad`设置为`true`，意味着在Store实例创建后立即从服务器加载数据。 接下来，创建了一个`GridPanel`，用于显示从服务器获取的分页数据。`GridPanel`配置包括： - `title`：网格面板的标题。 - `width`和`height`：定义了面板的尺寸。 - `renderTo`：指定渲染面板的HTML元素，这里使用`Ext.getBody()`将面板添加到文档的body部分。 - `viewConfig`：配置视图选项，如`autoFill`和`forceFit`，用于调整列宽以适应网格宽度。 `GridPanel`与`Store`关联，使得数据自动加载到网格中。还可以添加事件监听器，例如在数据加载完成后触发的回调函数，以便进行进一步的处理或提示用户。 这个简单的示例展示了如何利用ExtJs从服务器获取JSON数据，并使用分页策略在GridPanel中显示。在实际项目中，你可能还需要考虑错误处理、用户交互、性能优化等方面的问题，以构建更加健壮和用户友好的数据展示界面。