So, here is another full example, just like my other CakePHP + extJS, but this one is using JSON rather then XML.
The XML version of this example is available here.
So, first load the stylesheets, and javascripts in the default.thtml:
<?php echo $html->css('../js/ext/resources/css/ext-all');?> <?php echo $html->css('cake.generic');?> <?php echo $javascript->link('ext/adapter/ext/ext-base.js');?> <?php echo $javascript->link('ext/ext-all.js');?> <?php echo $javascript->link('RowExpander.js');?> <?php echo $javascript->link("$_name-$_action.js");?> |
Assign, the controller’s name, and the function name, as view variables, in app/app_controller.php like this:
function beforeRender() { $this->set('_name',strtolower($this->name)); $this->set('_action',strtolower($this->action)); } |
Now I need to copy the ext library to /app/webroot/js/ext, and create the /app/webroot/js/posts-index.js there.
My posts-index.js contains this:
/* * Ext JS Library 2.0 * Copyright(c) 2006-2007, Ext JS, LLC. * licensing@extjs.com * * http://extjs.com/license */ Ext.onReady(function(){ Ext.QuickTips.init(); var xg = Ext.grid; // create the Data Store // create the Data Store var store = new Ext.data.Store ({ // load using HTTP proxy: new Ext.data.HttpProxy({url: '/posts/json'}), reader : new Ext.data.JsonReader ({ id: 'id' }, [ {name: 'id', type: 'int'}, {name: 'title', type: 'string'}, {name: 'body', type: 'string'}, {name: 'created', type: 'date', dateFormat:'Y-m-d H:i:s'}, {name: 'modified', type: 'date', dateFormat:'Y-m-d H:i:s'} ]) }); // expander cucc var expander = new xg.RowExpander({ tpl : new Ext.Template( '<b>Body:</b>', ' {body} ' ) }); var sm = new xg.CheckboxSelectionModel(); var grid = new xg.GridPanel({ id:'button-grid', store: store, cm: new xg.ColumnModel([ expander, sm, {header: "Id", width: 5, sortable: true, dataIndex: 'id'}, {header: "Title", width: 20, sortable: true, dataIndex: 'title'}, {header: "Created", width: 20, sortable: true, dataIndex: 'created', renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s')}, {header: "Last Updated", width: 20, sortable: true, dataIndex: 'modified', renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s')} ]), sm: sm, viewConfig: { forceFit:true }, // inline buttons buttons: [{text:'Save'},{text:'Cancel'}], buttonAlign:'center', // inline toolbars tbar:[{ text:'Add Post', tooltip:'Add a new post', handler: function() { location.href='/posts/add'; }, iconCls:'add' }], plugins: expander, width:600, height:300, frame:true, title:'Posts', iconCls:'icon-grid', renderTo:'content' }); store.load(); }); |
Please notice the “url” attribute in line 18. It refers to /posts/json, so I need to create a controller function, a view, and a separate layout for that.
So I create the json object processing function in the posts_controller.php:
function json() { $this->layout='json'; foreach ($this->Post->findAll() as $post) { $o[] = $post['Post']; } $this->set('data',json_encode($o)); } |
As you see, we need a layout for that, so I’ll create it a json.thtml in ‘/app/views/layouts/’, what contains this:
<?php echo $content_for_layout; ?> |
After this I need to create the view called ‘json.thtml’ in the ‘app/views/posts’, as well.
As you might see, we have a variable called ‘data’, that will contain, the json object.
So we only need to echo it in the view:
<?php echo $data; ?> |
We are almost ready now.
You need to truncate your posts/index.thtml because extJs will render everything in the “content” div (where the views rendered generaly), so it’s better, to be blank.
There’s only more thing left. We need ‘RowExpander.js’ from the ‘ext/examples/grid’ directory. So we need to copy it to /js directory.
function json()
{
$this->layout=’json’;
foreach ($this->Post->findAll() as $post)
{
$o[] = $post[‘Post’];
}
$this->set(‘data’,json_encode($o));
}
Instead of doing the foreach loop you can do this way
$o = Set::extract($this->Post->findAll(), ‘{n}.Post’ );
$this->set(‘data’, $o);
Then in the json.thtml Layout you can do the encoding
Thank you, for that Boris.
I don’t do it in the view, because I use it together with Smarty, and as you know, it can’t run real PHP code, only custom functions 🙂
Nice tutorial. It gave me a light way to access extjs in cake php.
But a problem puzzling me for a long time is how to update/delete back to database?
It is the best time to make some plans for the future
and it is time to be happy. I’ve read this post and if I could
I desire to suggest you some interesting things or
advice. Maybe you could write next articles referring to this article.
I wish to read more things about it!
Hello there I am so grateful I found your webpage,
I really found you by accident, while I was searching on Google for something else, Nonetheless I am here now and would just like to
say kudos for a remarkable post and a all round exciting blog (I also love
the theme/design), I don’t have time to go through it all at
the moment but I have bookmarked it and also added your RSS feeds, so when I have time I will be back
to read a lot more, Please do keep up the awesome job.
Valuable information. Fortunate me I discovered your website unintentionally,
and I’m stunned why this coincidence did not happened in advance!
I bookmarked it.
Write more, thats all I have to say. Literally, it seems
as though you relied on the video to make
your point. You obviously know what youre talking about, why
throw away your intelligence on just posting videos to your blog when you could be
giving us something enlightening to read? 2CSYEon cheap flights
One more step in CakePHP towards extJs with JSON | DjZoNe blogol
dlzcprwj http://www.g43up9ctj2m8z475t800k7cempk87p06s.org/
[url=http://www.g43up9ctj2m8z475t800k7cempk87p06s.org/]udlzcprwj[/url]
adlzcprwj
If some one needs to be updated with newest technologies afterward he
must be pay a visit this web site and be up to date every day.
Hi friends, its impressive paragraph about teachingand
fully explained, keep it up all the time.
Undeniably believe that which you said. Your favorite justification appeared to be on the net the easiest thing to be aware of.
I say to you, I definitely get annoyed while people consider worries that they plainly do not know about.
You managed to hit the nail upon the top and also defined
out the whole thing without having side-effects , people can take a signal.
Will probably be back to get more. Thanks