Extjs 通过 Ext.Direct 实现与 Laravel 通信
0 / 2 / 创建于 8年前
mengguo 的个人博客
软件版本要求
Laravel：5.1 至 5.3
Extjs：4.1 至 6.2
参考资料
Ext Direct RPC 协议规格：http://docs.sencha.com/extjs/6.2.0/guides/...
PHP 实现 Ext Direct 服务器端范例：http://docs.sencha.com/extjs/6.2.0/guides/...
Ext Direct 服务器端清单：https://www.sencha.com/forum/showthread.ph...
laravel 作为 Ext Direct 服务器端（bulforce/ext-direct）：https://www.sencha.com/forum/showthread.ph...
环境设置
为laravel项目添加 ext-direct 包
通过查询 http://packalyst.com/packages/tag/extjs 和 Github，lucasromanojf/ext-direct 可用于 laravel 5.1至5.3， bulforce/ext-direct 只可用于 laravel 4，故选择 lucasromanojf/ext-direct。
composer require lucasromanojf/ext-direct添加路由
laravel 5.1、5.2 在 ...\laravel_project\app\Http\routes.php 添加， laravel 5.3 在 ...\laravel_project\routes\web.php 添加：
use Bulforce\ExtDirect\ExtDirect;
Route::any('rpc', function() {
return ExtDirect::provide();
});添加类及方法
<?php
namespace App\Http\Controllers;
class ItemExternalController extends Controller
{
/**
* @direct
*/
public function getServerDate($params) {
return date($params);
}
}前端页面
...\laravel_project\public 文件夹添加 extdirecttest.html 文件：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>laravel ext.direct test</title>
<script type="text/javascript" src="ext4.1-all.js"></script>
<script type="text/javascript" src="rpc?javascript"></script>
<script type="text/javascript" >
Ext.onReady(function () {
console.log("AAAAA:Ext.onReady");
Ext.rpc.ExternalItems.getServerDate("Y-m-d H:i:s", function (response) {
console.log("CCCCC:" + response);
});
})
</script>
</head>
<body>
<h1>laravel ext.direct test</h1>
</body>
</html>编辑配置文件
将 ...\laravel_project\app\vendor\lucasromanojf\ext-direct\src\config\Bulforce 文件夹 复制到 ...\laravel_project\app\config 下；编辑 ...\laravel_project\config\Bulforce\ext-direct\config.php 文件：
<?php
return array(
'namespace' => 'Ext.rpc',
'descriptor' => 'Ext.rpc.REMOTING_API',
'debug' => false,
'timeout' => 1000, // 默认为30，应增大
'url' => 'rpc',
'api_classes' => array(
'ExternalItems' => 'App\Http\Controllers\ItemExternalController' // 应为完整path，否则报错
)
);访问 http://127.8.8.8:9898/extdirecttest.html ，客户端 Extjs 调用 服务端 App\Http\Controllers\ItemExternalController 类的方法 getServerDate() 获取服务器时间，从客户端控制台输出。
填坑
...\laravel_project\config\Bulforce\ext-direct\config.php 文件中 timeout 就是 lucasromanojf/ext-direct 的坑。
其默认值为 30，如不修改，在本地开发环境 chrome 里面 js 提示 『Provisional headers are shown』 错误：
百度查询：
http://stackoverflow.com/questions/2117738...
http://blog.csdn.net/wyfhist/article/detai...
主要原因是服务端超时（被墙、数据库查询慢）导致，因此通过增加 timeout 时间解决；另外：代码注释中 timeout 单位为 second ，实际应为 millisecond。
结论
Ext Direct 是 RPC 协议，与平台、语言无关。
Laravel 与 Extjs 通过 Ext.Direct 结合使用文章较少，是因为有其他更好方式？
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
也在看Extjs ，很好的案例
@颜⑧，laravel 程序员中使用 extjs 的看来比较少