BlaCKReed.com

It should be nice when we create form using ExtJS, so we don’t need to create html or css form from the scratch. For the first time I try to create form with ExtJS and data handle with PHP, I mean pure PHP and doesn’t use any framework.
Now, I try to implement an integrated ExtJS with CakePHP, so it is a little note when I do this experiment.
This time I’ll wrote simple address book application, I’m using MySQL database for the back-end. here is the SQL code:

CREATE TABLE `addresses` (
`id` int(11) NOT NULL auto_increment,
`name` text NOT NULL,
`address` text NOT NULL,
`created` datetime NOT NULL,
`modified` datetime NOT NULL,
PRIMARY KEY  (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=25 ;

For my convenient I create a new layout for this trial, then
I add the following code between tag head in my layout.

<script src="http://blackreed.com/js/ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="http://blackreed.com/js/ext/ext-all.js" type="text/javascript"></script>
<script src="http://blackreed.com/js/my/form.js" type="text/javascript"></script>

As usual I always make a model first, and the model for address look like this

< ?php
class Address extends AppModel
{
var $name = 'Address';
}
?>

Now I need to prepare a controller for this application, here is the code

< ?php
// /app/controllers/addresses_controller.php
class AddressesController extends AppController
{
var $name = 'Addresses';
var $layout = "designaddress";

function index()
{

}

function add()
{
$this->layout = "ajax";

if (!empty($this->params))
{
$this->data['Address']['name'] = $this->params['form']['name'];
$this->data['Address']['address'] = $this->params['form']['address'];

$this->Address->create();
if ($this->Address->save($this->data))
{
$this->set('status', '{success:true}');
}
else
{
$this->set('status', '{success:false}');
}
}
else
{
$this->set('status', '{success:false}');
}
}
}

?>

On this controller, I put method index, this method I prepared to show the form integrated with
ExtJS, on the next view (index.ctp) you can see it. Then I put method add() it is used to save data into database.
Please remember to set no debug in file /app/config/core.php or you can do it inside add method with: Configure::write(’debug’, 0);
Debug message will break ajax.

On the view index.ctp I put the following code :
put in /app/views/addresses/index.ctp

<div id="form1"></div>

In the view I provide container for form generated by ExtJS.

Next the view (add.ctp) provide for add method
put in /app/views/addresses/add.ctp

< ?php
echo $status;
?>

And here is the code for creating form with ExtJS
put in /app/webroot/js/my/form.js

Ext.onReady(function(){
var form1 = new Ext.FormPanel({
url: '/addresses/add',
renderTo: 'form1',
title: 'Form Address',
width: 300,
items: [{
xtype: 'textfield',
fieldLabel: 'Your Name',
name: "name",
allowBlank: false
},{
xtype: 'textarea',
fieldLabel: 'Address',
name: "address"
}],
buttons: [{
text: 'Save',
handler: function(){
form1.form.submit({
waitMsg: 'Saving...',
success: function() {
Ext.MessageBox.alert('Status','Save done');
},
failure: function() {
Ext.MessageBox.alert('Status','Save failed');
}
});
}
}, {
text: 'Cancel'
}]
});
});