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 中直接可用，需要进行以下关键配置：
- 定义命名空间： 使用 Ext.namespace() 创建一个全局命名空间，用于存放你的 Ext.Direct 服务。这有助于组织代码并避免全局变量冲突。
- 配置 REMOTING_API 的 namespace 和 descriptor 属性： namespace 属性告诉 Ext.Direct 应该将生成的代理对象挂载到哪个全局命名空间下。descriptor 属性则指定了 REMOTING_API 对象自身的全局路径。
- 将 REMOTING_API 添加到 Ext.direct.Manager： 这是最关键的一步，它将 REMOTING_API 注册到 Ext.Direct 管理器中，使其能够解析并生成可调用的客户端代理。
以下是修正后的 api.php 返回内容示例：
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 逻辑中被直接、便捷地调用。
