EXT.js 数据存储与传输教程

EXT JS 是一种强大的JavaScript库，主要用于构建富客户端Web应用程序。在EXT JS中，数据存储与传输是核心功能之一，这关系到如何有效地管理和传递应用程序所需的数据。本教程将深入讲解EXT JS中的数据处理机制。 10.1 Ext.data简介 EXT JS 的数据层主要由几个关键组件构成，包括连接（Connection）、记录（Record）、存储（Store）以及各种Proxy和Reader。这些组件共同协作，实现了数据的获取、存储和更新。通过EXT.data接口，开发者可以方便地与服务器进行异步通信，处理JSON、XML等不同格式的数据。 10.2 Ext.data.Connection Ext.data.Connection是EXT JS中用于处理Ajax请求的基础类。它提供了发送HTTP请求的方法，如`request`，支持GET、POST等HTTP方法，可以用于获取或提交数据到服务器。开发者可以通过配置参数来定制请求头、URL、请求体等内容。 10.3 Ext.data.Record Record是EXT JS中的数据模型，代表单一数据实体。它包含了字段定义、值和状态信息。Record可以用来封装从服务器获取的数据，并提供了一种方式来跟踪数据的变化，以便于在需要时更新到服务器。 10.4 Ext.data.Store Store是EXT JS中数据管理的核心，它可以容纳多个Record实例，提供了数据的加载、排序、过滤和更新等功能。Store可以连接到不同的数据源，如Ajax请求、内存数据或XML文件。它还支持事件监听，使得当数据发生变化时，可以通知关联的视图进行更新。 10.4.1 基本应用 创建一个Store需要定义模型（Model）和数据源（Proxy）。Store可以通过`load`方法加载数据，并通过`add`, `remove`, `update`等方法操作数据。 10.4.2 对数据进行排序 Store支持基于字段的自动排序，只需要在创建Store时指定排序字段和方向即可。 10.4.3 从store中获取数据 可以通过`getAt`, `getById`等方法从Store中获取特定位置或ID的Record。 10.4.4 更新store中的数据 通过`update`方法或者直接修改Record的属性，然后调用`commit`方法来标记Record为已更新，最后同步到服务器。 10.4.5 加载及显示数据 Store与View（如GridPanel）绑定后，加载数据会自动更新视图，显示数据。 10.4.6 其他功能 Store还支持远程排序、分页、过滤等功能，可以根据需求灵活配置。 10.5 常用proxy Proxy是Store与服务器之间的中间件，负责数据的获取和发送。常见的Proxy类型有MemoryProxy（内存数据源），HttpProxy（HTTP请求），ScriptTagProxy（通过script标签加载数据）。 10.6 常用Reader Reader负责解析服务器返回的数据，转化为Record。ArrayReader适用于数组格式，JsonReader用于JSON格式，XmlReader则处理XML格式。 10.7 高级store 高级Store功能包括数据的分页、远程排序和过滤，以及对大数据集的优化处理。 10.8 EXT中的Ajax EXT提供了两种级别的Ajax封装：Ext.Ajax和Ext.lib.Ajax。前者是日常开发中常用的，后者更底层，允许更多的定制。 10.9 关于scope和createDelegate() 在EXT中，scope通常指的是方法执行时的上下文，而createDelegate()方法用于创建一个新函数，确保新函数在指定的scope中执行。 10.10 DWR与EXT整合 Direct Web Remoting (DWR) 是一种允许JavaScript直接调用服务器端Java方法的技术。EXT JS 可以与DWR集成，实现更高效的服务器通信。DWRProxy和DWRTreeLoader等组件帮助简化了这一过程。 10.11 localXHR支持本地使用Ajax 对于开发和测试环境，EXT提供localXHR支持，使得在没有服务器的情况下也能模拟Ajax请求。 总结，EXT JS的数据存储与传输机制涉及了从数据模型到数据管理的全面流程，为开发者提供了强大且灵活的数据处理能力，使得构建复杂的Web应用程序变得更加容易。