理解Ext.Direct及其调用机制
ext.direct是sencha ext js框架提供的一种强大的客户端-服务器通信机制，它允许javascript代码直接调用服务器端方法，而无需手动处理ajax请求的细节。通常，ext.direct被广泛用于ext.data.store的proxy配置中，通过directfn指定远程方法来获取数据。然而，当开发者尝试在普通的javascript函数中直接调用这些远程方法时，可能会遇到referenceerror，提示方法未定义。这通常是因为ext.direct api的配置不够完善，未能将远程方法正确暴露到全局或指定命名空间中。
常见问题：ReferenceError的根源
在典型的Ext.Direct配置中，Ext.REMOTING_API对象定义了服务器端路由和可用的方法。例如：
var Ext = Ext || {};
Ext.REMOTING_API = {
"url": "php/api/router.php",
"type": "remoting",
"actions": {
"RaStatuses": [{
"name": "get_ra_statuses",
"len": 1
}]
}
};当Ext.data.Store使用directFn: "RaStatuses.get_ra_statuses"时，它能够正常工作，因为Ext JS内部机制会解析directFn字符串并调用相应的远程服务。但是，如果尝试在JavaScript代码中直接执行 RaStatuses.get_ra_statuses()，就会收到 ReferenceError: RaStatuses is not defined。这表明尽管API已定义，但其对应的Action对象（RaStatuses）并未作为可访问的全局或局部变量暴露出来。
解决方案：完善Ext.Direct API配置
要使Ext.Direct方法能够在JavaScript中直接调用，需要对REMOTING_API的定义进行增强，并显式地通过Ext.direct.Manager注册该API。以下是正确的配置步骤和示例：
1. 定义命名空间
为了避免全局命名空间污染，并提供更好的组织性，建议为Ext.Direct API定义一个专属的命名空间。这可以通过Ext.namespace()函数实现。
立即学习“Java免费学习笔记（深入）”；
Ext.namespace('RPC'); // 定义一个名为RPC的命名空间2. 增强REMOTING_API配置
在REMOTING_API对象中，除了url、type和actions之外，还需要添加namespace和descriptor属性。
- namespace: 指定该API所使用的命名空间，它应该与Ext.namespace()中定义的名称一致。
- descriptor: 定义一个变量名，用于引用这个API配置本身。通常，这会是命名空间.REMOTING_API的格式。
同时，确保actions中方法的len属性与服务器端方法实际接受的参数数量匹配。len: 0表示方法不接受任何参数。
var Ext = Ext || {}; // 确保Ext对象存在
RPC.REMOTING_API = {
"url": "php/api/router.php",
"type": "remoting",
"namespace": "RPC", // 指明此API属于RPC命名空间
"descriptor": "RPC.REMOTING_API", // 指明此API配置的引用名称
"actions": {
"RaStatuses": [{
"name": "get_ra_statuses",
"len": 0 // 假设此方法不接受参数
}]
}
};3. 注册API提供者
最后一步是将配置好的REMOTING_API对象注册到Ext.Direct管理器中。这是至关重要的一步，它告诉Ext.Direct框架如何解析和调用这些远程方法。
Ext.direct.Manager.addProvider(RPC.REMOTING_API);
将以上三个部分整合到服务器端返回的API文件中（例如api.php），完整的输出内容应如下所示：
Ext.namespace('RPC');
var Ext = Ext || {};
RPC.REMOTING_API = {
"url": "php/api/router.php",
"type": "remoting",
"namespace": "RPC",
"descriptor": "RPC.REMOTING_API",
"actions": {
"RaStatuses": [{
"name": "get_ra_statuses",
"len": 0
}]
}
};
Ext.direct.Manager.addProvider(RPC.REMOTING_API);在JavaScript中直接调用Ext.Direct方法
完成上述配置后，就可以在客户端JavaScript代码中通过定义的命名空间来直接调用远程方法了：
// 假设在某个JavaScript函数中需要调用该方法
function fetchData() {
// 调用RPC命名空间下的RaStatuses服务中的get_ra_statuses方法
RPC.RaStatuses.get_ra_statuses({
success: function(result) {
console.log("数据获取成功:", result);
// 处理返回的数据
},
failure: function(error) {
console.error("数据获取失败:", error);
// 处理错误
}
});
}
// 示例：在页面加载完成后调用
Ext.onReady(function() {
fetchData();
});注意事项：
- 异步调用： Ext.Direct方法调用是异步的。直接调用如RPC.RaStatuses.get_ra_statuses()会立即返回一个Promise（在Ext JS 5+中）或一个Ext.Direct请求对象，而不是服务器返回的数据。要获取实际数据，必须使用回调函数（success和failure）或Promise的.then()方法。
- 参数传递： 如果服务器端方法需要参数，可以在调用时以对象形式传递，例如 RPC.RaStatuses.getMethod(param1, param2, { success: ..., failure: ... });。len属性应与实际参数数量匹配。
- 版本兼容性： 本教程基于Ext JS 6.0.2及以上版本验证。虽然核心概念在不同版本中保持一致，但具体的API行为和Promise支持可能因版本而异。
- 错误处理： 务必在failure回调中处理可能发生的服务器端错误或网络问题，以提高应用的健壮性。
总结
通过正确配置Ext.Direct API，包括定义命名空间、描述符，并使用Ext.direct.Manager.addProvider进行注册，可以确保Ext.Direct远程方法在JavaScript中能够被直接、灵活地调用。这种方式不仅提高了代码的可读性和维护性，也极大地增强了Ext JS应用程序前后端交互的能力。遵循这些最佳实践，开发者可以充分利用Ext.Direct的强大功能，构建更加高效和健壮的企业级应用。
