Ext.Direct远程函数在JavaScript中的正确配置与调用指南

Ext.Direct 概述

ext.direct 是 sencha ext js 框架提供的一种强大的远程过程调用（rpc）机制，它允许前端 javascript 代码无缝地调用后端服务器端方法，就像调用本地 javascript 函数一样。这种机制极大地简化了前后端的数据交互和业务逻辑集成。通常，ext.direct 通过定义一个remoting_api对象来声明可用的远程服务和方法，然后 ext js 框架会根据这个定义自动生成相应的客户端代理对象。

常见问题：远程函数未定义

在使用 Ext.Direct 时，一个常见的困惑是，即使 Ext.data.Store 能够成功地通过 directFn 调用后端方法获取数据，但在普通的 JavaScript 函数中尝试直接调用这些远程方法时，却会遇到 ReferenceError: [YourServiceName] is not defined 的错误。这通常是因为 REMOTING_API 的配置未能将这些远程服务正确地暴露为全局可访问的 JavaScript 对象。

例如，当 api.php 返回如下配置：

var Ext = Ext || {};
Ext.REMOTING_API = {
    "url": "php/api/router.php",
    "type": "remoting",
    "actions": {
        "RaStatuses": [{
            "name": "get_ra_statuses",
            "len": 1
        }]
    }
};

并且 Ext.data.Store 能够正常工作：

Ext.define('CSM.store.ra.Statuses', {
  extend: 'Ext.data.Store',
  model: 'CSM.model.ra.Status',
  proxy: {
    type: 'direct',
    directFn: "RaStatuses.get_ra_statuses"
  },
  autoLoad: true
});

但尝试直接调用 RaStatuses.get_ra_statuses() 时，就会出现 ReferenceError。

立即学习“Java免费学习笔记（深入）”；

解决方案：正确配置 REMOTING_API

要使 Ext.Direct 定义的远程函数在 JavaScript 中直接可用，需要进行以下关键配置：

1. 定义命名空间： 使用 Ext.namespace() 创建一个全局命名空间，用于存放你的 Ext.Direct 服务。这有助于组织代码并避免全局变量冲突。
2. 配置 REMOTING_API 的 namespace 和 descriptor 属性： namespace 属性告诉 Ext.Direct 应该将生成的代理对象挂载到哪个全局命名空间下。descriptor 属性则指定了 REMOTING_API 对象自身的全局路径。
3. 将 REMOTING_API 添加到 Ext.direct.Manager： 这是最关键的一步，它将 REMOTING_API 注册到 Ext.Direct 管理器中，使其能够解析并生成可调用的客户端代理。

以下是修正后的 api.php 返回内容示例：

冬瓜配音

AI在线配音生成器

66

查看详情

<?php
// api.php
header('Content-Type: application/javascript');
?>
Ext.namespace('RPC');   // 1. 定义一个全局命名空间 'RPC'
var Ext = Ext || {};
RPC.REMOTING_API = {
    "url": "php/api/router.php",
    "type": "remoting",
    "namespace": "RPC", // 2. 指定生成的代理对象将位于 'RPC' 命名空间下
    "descriptor": "RPC.REMOTING_API", // 3. 指明这个 API 对象的完整路径
    "actions": {
        "RaStatuses": [{
            "name": "get_ra_statuses",
            "len": 0 // 注意：len 属性应与服务器端方法期望的参数数量一致
        }]
    }
};
// 4. 将配置好的 REMOTING_API 添加到 Ext.direct.Manager
Ext.direct.Manager.addProvider(RPC.REMOTING_API);

关键点解析：

• Ext.namespace('RPC');: 这会在全局作用域中创建一个 RPC 对象（如果不存在），作为我们远程服务的容器。
• "namespace": "RPC": 告知 Ext.Direct，它应该在 RPC 命名空间下创建 RaStatuses 服务对象，例如 RPC.RaStatuses。
• "descriptor": "RPC.REMOTING_API": 确保 Ext.Direct 能够正确地引用和解析这个 REMOTING_API 配置对象本身。
• Ext.direct.Manager.addProvider(RPC.REMOTING_API);: 这是激活 Ext.Direct 服务的核心步骤。它告诉 Ext JS 框架：“嘿，这里有一个新的 Ext.Direct 服务提供者，请加载并使其可用。”

客户端调用示例

完成上述配置后，你就可以在 JavaScript 代码中直接通过定义的命名空间来调用远程函数了：

// 在你的 JavaScript 函数中
function callRemoteMethod() {
    // 现在 RPC.RaStatuses 对象已定义，并且其方法可直接调用
    RPC.RaStatuses.get_ra_statuses({
        success: function(result) {
            console.log("成功获取数据:", result);
        },
        failure: function(error) {
            console.error("调用失败:", error);
        }
    });
}

// 如果服务器端方法有参数，你需要相应地传递
// 例如，如果 get_ra_statuses 期望一个 ID 参数
// RPC.RaStatuses.get_ra_statuses(123, { /* callbacks */ });
// 此时 REMOTING_API 中的 len 应为 1

关于 len 属性的注意事项：

len 属性在 actions 配置中定义，它表示服务器端方法期望的参数数量。例如，如果 get_ra_statuses 方法在 PHP 端不接受任何参数，那么 len 应该设置为 0。如果它接受一个参数（如一个 ID），则 len 应该设置为 1。确保这个值与你的后端方法签名保持一致，否则可能会导致参数不匹配的错误。

总结与最佳实践

• 命名空间管理： 始终使用 Ext.namespace() 为你的 Ext.Direct 服务创建清晰的命名空间，避免污染全局作用域。
• 完整配置： 确保 REMOTING_API 对象包含 url, type, namespace, descriptor 以及 actions 等所有必需的属性。
• 注册提供者： 务必调用 Ext.direct.Manager.addProvider() 来注册你的 Ext.Direct 服务。
• len 属性一致性： 确保 actions 中每个方法的 len 属性与后端方法实际接受的参数数量匹配。
• 错误处理： 在客户端调用远程方法时，始终包含 success 和 failure 回调函数，以便妥善处理异步操作的结果和潜在错误。

通过遵循这些步骤，你可以确保 Ext.Direct 的远程函数不仅能在 Ext JS 组件（如 Store）中正常工作，也能在任何自定义 JavaScript 逻辑中被直接、便捷地调用。

以上就是Ext.Direct远程函数在JavaScript中的正确配置与调用指南的详细内容，更多请关注php中文网其它相关文章！