在工作中,我们使用 CakePHP 和 ExtJS 进行了大量工作。
我们单独使用 ExtJS 的视图只有调用来包含该视图的特定 javascript 文件,以及一个用于呈现 ExtJS 模块的 div。
如果您在布局的头部使用<?php echo $scripts_for_layout ?>,您可以使用
轻松地从视图内部
附加单个javascript文件
<?php echo $this->Html->script('relative/path/from/js/folder.js', array('inline' => false)) ?>
在 Ext 中,您需要将网格设置为使用 Ext.data.Store 的实例,通过存储和它的依赖项(您还需要代理、读取器和写入器),您可以发送回数据并传给你的 CakePHP 控制器。
我们更喜欢将 JSON 用于我们的数据,因为它很容易在我们需要的地方进行操作和持久化。
我们的基本设置通常如下所示。
在 ExtJS 中
var proxy = new Ext.data.HttpProxy({
api: {
// these will map to cakephp controller actions
create: { url: '/cake_controller/create', method: 'POST' },
read: { url: '/cake_controller/read', method: 'GET' },
update: { url: '/cake_controller/update', method: 'POST' },
destroy: { url: '/cake_controller/destroy', method: 'POST' }
}
});
var fields = Ext.data.Record.create([
// this will map to your database fields (or at least the ones your
// returning from cakephp to put in your grid
{ name: 'id', type: 'int' },
{ name: 'another_model_field' },
{ name: 'created', type: 'date', dateFormat: 'Y-m-d H:i:s' },
{ name: 'modified', type: 'date', dateFormat: 'Y-m-d H:i:s' },
]);
var reader = Ext.data.JsonReader({
root: 'controllerName' // this is the root node of the json cakephp is replying with
}, fields);
var writer = Ext.data.JsonWriter({
encoded: true,
writeAllFields: true
});
var store = Ext.data.Store({
storeId: 'myStore',
proxy: proxy,
reader: reader,
writer: writer,
autoSave: true,
autoLoad: true
});
然后在您的网格中,将您的商店设置为您刚刚创建的商店
var grid = Ext.grid.GridPanel({
store: store,
...
...
...
});
每当 store 发生变化时,它都会调用映射到 CakePHP 控制器动作的相关 api 方法(创建、读取、更新、销毁)。在您的操作中,您可以通过$this->params['form'] 访问数据。如果您像我们一样使用 Json,您可以使用 json_decode($this->params['form'], true) 将其解码为关联数组,以便在 CakePHP 方面轻松操作/持久化。
你可以从你的 CakePHP 动作中返回某些东西,以便 ExtJS 知道保存/更新/等是否成功。我们通常只返回用 Json 编码的array('success' => true)。
我希望这可以帮助您入门,这需要很多内容,但不是大量的工作,只是大量的打字。多做几次就很容易记住了。
每当您使用 ExtJS 时,请记住 docs 是您的朋友!