1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    2
    Vote Rating
    0
    hoofuz is on a distinguished road

      0  

    Default cakephp and extjs

    cakephp and extjs


    I setup cakephp and extjs
    cake_1_3_10
    ext-4.0.2.a placed in app/webroot/js/extjs
    setup main app_controller.php in app if not already done so.
    looks like
    class AppController extends Controller {

    public function get_json_info() {
    $this->view = 'Json';
    $info = $this->{$this->modelClass}->find('all');

    $extJson = array();
    foreach ($info as $object)
    {
    $extJson[] = $object[$this->modelClass];
    }
    $json = array(
    'Success' => true,
    $this->name => $extJson
    );
    $this->set(compact('json'));
    }

    function update_json()
    {
    $this->view = 'json';

    $postdata = file_get_contents("php://input");
    $obj = json_decode($postdata);
    $objArray = (array) $obj;
    $saveData = array("$this->modelClass" => $objArray);

    if($this->User->save($saveData)){
    $json = array(
    'Success' => true,
    $this->name => $objArray
    );
    } else {
    $json = array('Success' => false);
    }
    $this->set(compact('json'));
    }
    }

    created file in views/layouts/ext.ctp
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title id="page-title">Rental Manager</title>
    <link rel="stylesheet" type="text/css" href="<?php echo $this->webroot;?>js/extjs/resources/css/ext-all.css" />
    <script type="text/javascript" src="<?php echo $this->webroot;?>js/extjs/ext-all-debug.js"></script>
    </head>
    <body>
    <?php echo $content_for_layout;?>
    </body>
    </html>

    created test.ctp in views/pages
    <?php
    $this->layout = "ext";
    ?>

    <!-- <script type="text/javascript" src="<?php echo $this->webroot;?>file.js"></script> -->

    <script type='text/javascript'>
    Ext.application({
    name: 'AM',

    controllers: [
    'Users'
    ],

    launch: function() {
    Ext.create('Ext.container.Viewport', {
    layout: 'fit',
    items: [
    {
    xtype: 'userlist'
    }
    ]
    });
    }
    });

    Ext.define('AM.view.user.List' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.userlist',

    title : 'All Users',
    store: 'Users',

    columns: [
    {header: 'Name', dataIndex: 'username', flex: 1},
    {header: 'Password', dataIndex: 'password', flex: 1}
    ]
    });

    Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
    {name: 'id', type: 'int'},
    {name: 'username', type: 'string'},
    {name: 'password', type: 'string'}
    ]
    });

    Ext.define('AM.view.user.Edit', {
    extend: 'Ext.window.Window',
    alias : 'widget.useredit',

    requires: ['Ext.form.Panel'],

    title : 'Edit User',
    layout: 'fit',
    autoShow: true,
    height: 120,
    width: 280,

    initComponent: function() {
    this.items = [
    {
    xtype: 'form',
    padding: '5 5 0 5',
    border: false,
    style: 'background-color: #fff;',

    items: [
    {
    xtype: 'textfield',
    name : 'username',
    fieldLabel: 'Username'
    },
    {
    xtype: 'textfield',
    name : 'password',
    fieldLabel: 'Password'
    }
    ]
    }
    ];

    this.buttons = [
    {
    text: 'Save',
    action: 'save'
    },
    {
    text: 'Cancel',
    scope: this,
    handler: this.close
    }
    ];

    this.callParent(arguments);
    }
    });

    Ext.define('AM.model.User', {
    extend: 'Ext.data.Model',
    fields: ['id', 'username', 'password']
    });

    Ext.define('AM.store.Users', {
    extend: 'Ext.data.Store',
    model: 'AM.model.User',
    autoLoad: true,

    proxy: {
    type: 'ajax',
    api: {
    read: '/rm/users/get_json_info',
    update: '/rm/users/update_json'
    },
    reader: {
    type: 'json',
    root: 'Users',
    successProperty: 'Success'
    }
    }
    });


    Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    stores: ['Users'],

    models: ['User'],

    views: ['user.Edit', 'user.List'],

    refs: [
    {
    ref: 'usersPanel',
    selector: 'panel'
    }
    ],

    init: function() {
    this.control({
    'viewport > userlist dataview': {
    itemdblclick: this.editUser
    },
    'useredit button[action=save]': {
    click: this.updateUser
    }
    });
    },

    editUser: function(grid, record) {
    var edit = Ext.create('AM.view.user.Edit').show();

    edit.down('form').loadRecord(record);
    },

    updateUser: function(button) {
    var win = button.up('window'),
    form = win.down('form'),
    record = form.getRecord(),
    values = form.getValues();

    record.set(values);
    win.close();

    this.getUsersStore().sync();
    }
    });

    Ext.define('AM.view.Viewport', {
    extend: 'Ext.container.Viewport'
    });


    </script>

    create db table users with two columns username and password

    in app/views/json.php file with
    <?php

    class JsonView extends View {
    var $content = null;

    function __construct(&$controller, $register = true) {
    if (is_object($controller) && isset($controller->viewVars['json'])) {
    $this->content = $controller->viewVars['json'];
    }
    if ($register) {
    ClassRegistry::addObject('view', $this);
    }
    Configure::write('debug', 0);
    }

    function render($action = null, $layout = null, $file = null) {
    if ($this->content === null) {
    $data = '';
    } else {
    $data = json_encode($this->content);
    }
    return $data;
    }
    }

    that is it nothing in the model or the controller files
    nothing in routing

  2. #2
    Sencha User
    Join Date
    Jul 2011
    Posts
    2
    Vote Rating
    0
    hoofuz is on a distinguished road

      0  

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    1
    Vote Rating
    0
    CocoAdmin is on a distinguished road

      0  

    Default Thanks for sharing

    Thanks for sharing


    Hi, thanks for sharing!

    Just a bit missing from your example.

    1: No Schema for DB.
    2: Your proxy for AM.store.Users has read: '/rm/users/get_json_info' for the url, but there is no controller for that. Is there some other cakephp files that you created not on your list?

    Once I get a working copy of yours I'll zip it up into an example to download here.

    Steve.

  4. #4
    Sencha User Dumas's Avatar
    Join Date
    Dec 2008
    Location
    Vienna, Austria
    Posts
    581
    Vote Rating
    9
    Dumas will become famous soon enough

      0  

    Default


    Hey!

    If you are looking for an Ext.Direct implementation with CakePHP 2 and ExtJS 4 see:
    http://www.sencha.com/forum/showthre...ePHP-and-ExtJS

    cheers
    Roland
    Roland Sch├╝tz
    Software Architect
    ---
    Bancha - Seamless integrate CakePHP with ExtJS and Sencha Touch

Thread Participants: 2

Tags for this Thread