cakephp and extjs

**hoofuz** · 14 Jul 2011 6:34 PM

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'>
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

**hoofuz** · 14 Jul 2011 6:39 PM

http://localhost/cake_1_3_10/pages/test

to test page

**CocoAdmin** · 5 Aug 2011 2:02 PM

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.

**Dumas** · 8 Dec 2011 10:19 AM

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

cakephp and extjs

Thread Tools

Search Thread

Display

cakephp and extjs

cakephp and extjs

run

run

Thanks for sharing

Thanks for sharing

Tags for this Thread