用Extjs蛋糕php通过可编辑的网格更新,插入和删除

时间:2011-08-31 14:10:54

标签: php mysql cakephp extjs integration

我想通过可编辑网格开发带有extjs 3.2的cake php。

在网格中我们可以插入,更新和删除操作。

当我们从“movie”模型文件中获取数据并在view / movie / json中创建一个json文件时

在json文件中我得到了数据但是

如果我想在网格中显示数据,那么这个json文件数据如何才能进入网格存储。

三江源。

1 个答案:

答案 0 :(得分:0)

在工作中,我们与CakePHP和ExtJS进行了广泛的合作。

我们仅使用ExtJS的视图只调用包含该视图的特定javascript文件,以及一个div来渲染ExtJS模块。

如果您在布局的开头使用<?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,
    ...
    ...
    ...
});

每次更改商店时,它都会调用映射到CakePHP控制器操作的相关api方法(创建,读取,更新,销毁)。在您的操作中,您可以通过$this->params['form']访问数据。如果您像我们一样使用Json,您可以使用json_decode($this->params['form'], true)将其解码为关联数组,以便在CakePHP方面轻松操作/持久化。

您可以从CakePHP操作中返回某些内容,以便ExtJS知道save / update / etc是否成功。我们通常只返回Json编码的array('success' => true)

我希望这可以帮助你开始,这需要很多东西,但这并不是很多工作只是很多打字。一旦你做了几次就很容易记住。

每当你使用ExtJS时,请记住docs是你的朋友!