sfExtjs2Plugin
<div class="wiki-toc" style="float:right;border: solid 1px #C6CDDE;padding:10px;margin:5px;width:250px;font-size:11px;">
[[PageOutline(1-6,,inline)]]
</div>
sfExtjs2Plugin
Write ExtJS2.1 code in PHP
Installation
Installation is only available via SVN, due to the size of the ExtJS libraries.
Single Checkout
Move into your project directory and issue the following command:
svn export http://svn.symfony-project.com/plugins/sfExtjs2Plugin/trunk/ ./plugins/sfExtjs2Plugin
Automatic Checkout
If you are already using subversion for your project, and want to automatically include the latest version of this plugin on each svn update, the correct way to include the sfExtjs2Plugin repository is to define svn:externals.
Go to your symfony project
svn propedit svn:externals plugins
in this file add
sfExtjs2Plugin http://svn.symfony-project.com/plugins/sfExtjs2Plugin/trunk/
This way, every time you use svn update, it will get the latest version of sfExtjs2Plugin from the symfony repository
Create the link
Go to your webdir symfonyproject/web
ln -s ../plugins/sfExtjs2Plugin/web/ sfExtjs2Plugin
Usage - A short Tutorial
Preparation
Include The Helper and create a new instance of the sfExtjs2Plugin:
<?php
use_helper('sfExtjs2'); //(Probably OBSOLETE, I don't think this is necessary anymore)
$sfExtjs2Plugin = new sfExtjs2Plugin(array('theme'=>'gray'), array('css' => '/sfExtjsThemePlugin/css/symfony-extjs.css'));
?>
To add the sources for css and js to the html head. and writing an opening Tag for javascript add the following OUTSIDE your head (so inside the body) of your HTML document.
<?php
$sfExtjs2Plugin->load();
$sfExtjs2Plugin->begin();
?>
Accessing Ext2
sfExtjs2Plugin has a magic method __call to render calls to Extjs classes automagically. At the moment the following classes are supported:
|| Method || Ext Class ||
||!JsonReader || Ext.data.JsonReader ||
||Store || Ext.data.Store ||
||SimpleStore || Ext.data.SimpleStore ||
||!GroupingStore || Ext.data.GroupingStore ||
||!HttpProxy || Ext.data.HttpProxy ||
||Template || Ext.Template ||
||XTemplate || Ext.XTemplate ||
|| Widgets || ||
||!BoxComponent || Ext.BoxComponent ||
||Button || Ext.Button ||
||!GridPanel || Ext.grid.GridPanel ||
||!ColumnModel || Ext.grid.ColumnModel ||
||!GridView || Ext.grid.GridView ||
||!GroupingView || Ext.grid.GroupingView ||
||!EditorGridPanel || Ext.grid.EditorGridPanel ||
||!RowSelectionModel || Ext.grid.RowSelectionModel ||
||Panel || Ext.Panel ||
||!TabPanel || Ext.TabPanel ||
||!FormPanel || Ext.FormPanel ||
||Viewport || Ext.Viewport ||
||Window || Ext.Window ||
||!DateField || Ext.form.DateField ||
||!TextField || Ext.form.TextField ||
||!TimeField || Ext.form.TimeField ||
||!HtmlEditor || Ext.form.HtmlEditor ||
||Menu || Ext.menu.Menu ||
||Item || Ext.menu.Item ||
||!CheckItem || Ext.menu.CheckItem ||
||Toolbar || Ext.Toolbar ||
||!MenuButton || Ext.Toolbar.MenuButton ||
||Fill || Ext.Toolbar.Fill ||
||!PagingToolbar || Ext.PagingToolbar ||
||!MessageBox || Ext.MessageBox ||
||!KeyMap || Ext.KeyMap ||
An example on how to access the methods, the parameter is a simple array with the config options:
<?php
$source = $sfExtjs2Plugin->TabPanel(
array(
'id' => 'tabPanel',
'title' => 'A title',
'deferredRender' => false,
'resizeTabs' => true,
'activeTab' => 0,
'border' => false,
'plain' => false,
'tabWidth' => 200,
'items' => array
(
$sfExtjs2Plugin->asVar($item1source), $sfExtjs2Plugin->asVar($item2source)
)
)
);
?>
JavaScript output through sfExtjs2Plugin
The plugin knows two ways to return the code
Simple source in a String, parses evaled PHP:
<?php
$sfExtjs2Plugin->asVar($source)
?>
Packs the source in a method. Also parses evaled PHP:
<?php
$sfExtjs2Plugin->asMethod($source)
?>
Create the Application
After you initiated all widgets you might want to create the application:
<?php
$sfExtjs2Plugin->beginApplication(
array(
'name' => 'App',
'private' => array
(
'test' => 'ok'
),
'public' => array
(
// public attributes
'counter' => '0',
// public methods
'init' => $sfExtjs2Plugin->asMethod("Ext.QuickTips.init(); $source"),
'getTest' => $sfExtjs2Plugin->asMethod('return test;')
)
)
);
?>
Now you can enter your own javascript-code. When you're finished, write the closing tag for the application:
<?php
$sfExtjs2Plugin->endApplication();
?>
As the Last thing you have to call the init method of the Ext Application class:
<?php
$sfExtjs2Plugin->initApplication('App');
?>
Write the closing Tag
At the end of the code you should close the script-tag you openend in "Preparations" above:
<?php
$sfExtjs2Plugin->end();
?>
Create a custom class
To create a custom class you'll need the usual stuff: Variables, methods, a constructor etc. To create one with sfExtjs2Plugin you first need an array in PHP:
$myclass = array();
Variables
This is how you can add a variable to your class:
$myclass['myVar1'] = $sfExtjs2Plugin->asVar('this.variable');
$myclass['nullVar'] = $sfExtjs2Plugin->asVar('null');
$myclass['copiedMyVar1'] = $sfExtjs2Plugin->asVar('this.myVar1');
This will bring you two public variables myVar1 and myVar2 and the array myArrayVar.
If you want to initialize a variable with a value from PHP you can do this with a normal string in PHP:
$myclass['myVar2'] = 'A value';
$myclass['myVar3'] = $myvalue;
Methods
This is how you can add a method to your class:
$myclass['myFnc'] = $sfExtjs2Plugin->asMethod(array(
'parameters' => 'para1, para2, para3',
'source' => "
if( this.nullVar != null )
alert('this.nullvar is set to ' + this.nullVar + 'and para2 is' + para2);
"
));
Of course there is a shorthand for methods without parameters:
$myclass['myNoParaFnc'] = $sfExtjs2Plugin->asMethod( "
if( this.myVar2 == '$myvalue' ) {
alert('this.myVar2 was not touched!');
return true;
}
else
{
alert('this.myVar2 has changed!');
return false;
}
");
The Constructor
Anonymous Classes
Normal Classes
Singletons
Using XTemplate
Examples
A complete grid example
<div id="grid-example"></div>
<?php
use_helper('sfExtjs2');
$private = array();
$public = array();
$sfExtjs2Plugin = new sfExtjs2Plugin(array('theme'=>'blue'), array('css' => '/sfExtjsThemePlugin/css/symfony-extjs.css'));
$sfExtjs2Plugin->load();
$sfExtjs2Plugin->begin();
// **************************************
// Application
// **************************************
//data
$private['data'] = $sfExtjs2Plugin->asVar("[
['the Netherlands']('Rotterdam',),
['the Netherlands']('Amsterdam',),
['France']('Paris',),
]");
// create the data store
$private['ds'] = $sfExtjs2Plugin->SimpleStore(array(
'fields' => array (
array('name' => 'city'),
array('name' => 'country'),
)
));
// create the columnModel
$private['cm'] = $sfExtjs2Plugin->ColumnModel(array
(
'parameters' => array
(
$sfExtjs2Plugin->asAnonymousClass(array('header' => 'City', 'width' => 200, 'sortable' => true, 'dataIndex' => 'city')),
$sfExtjs2Plugin->asAnonymousClass(array('header' => 'Country', 'width' => 120, 'sortable' => true, 'dataIndex' => 'country')),
)
));
//create the gridPanel
$private['gridPanel'] = $sfExtjs2Plugin->GridPanel(
array(
'id' => 'GridPanel',
'title' => 'GridPanel Title',
'width' => 600,
'heigth' => 400,
'frame' => true,
'iconCls' => 'icon-grid',
'cm' => $sfExtjs2Plugin->asVar('cm'),
'ds' => $sfExtjs2Plugin->asVar('ds'),
)
);
$public['init'] = $sfExtjs2Plugin->asMethod("
Ext.QuickTips.init();
ds.loadData(data);
gridPanel.render('grid-example');
");
$sfExtjs2Plugin->beginApplication(
array(
'name' => 'App',
'private' => $private,
'public' => $public
)
);
$sfExtjs2Plugin->endApplication();
$sfExtjs2Plugin->initApplication('App');
$sfExtjs2Plugin->end();
?>
A complete data grid with paging
<div id="grid-details"></div>
<?php
use_helper ( 'sfExtjs2' );
$private = array ( );
$public = array ( );
$sfExtjs2Plugin = new sfExtjs2Plugin( array ('theme' => 'blue' ), array ('css' => '/sfExtjsThemePlugin/css/symfony-extjs.css' ) );
$sfExtjs2Plugin->load();
$sfExtjs2Plugin->begin();
// **************************************
// Application
// **************************************
/*
* Create the data store
*/
$private ['ds'] = $sfExtjs2Plugin->JsonStore (
array (
'url' => 'http://localhost/test/json.php',
'id' => 'id',
'totalProperty' => 'total',
'root' => 'data',
'fields' => array(
array(
'name' => 'date'
),
array(
'name' => 'label'
),
array(
'name' => 'amount'
),
array(
'name' => 'extra'
),
),
'sortInfo' => array(
'field' => 'label',
'direction' => 'ASC'
),
'remoteSort'=> true
)
);
/*
* Create the column model
*/
$private ['cm'] = $sfExtjs2Plugin->ColumnModel (
array (
'parameters' => array (
$sfExtjs2Plugin->asAnonymousClass (
array (
'id'=>'date',
'header' => 'Date',
'width' => 120,
'sortable' => true,
'dataIndex' => 'date'
)
),
$sfExtjs2Plugin->asAnonymousClass (
array (
'id'=>'label',
'header' => 'Libellé',
'width' => 170,
'sortable' => true,
'dataIndex' => 'label'
)
),
$sfExtjs2Plugin->asAnonymousClass (
array (
'id'=>'amount',
'header' => 'Montant ( '.sfConfig::get('app_money_symbol').' )',
'width' => 120,
'sortable' => true,
'dataIndex' => 'amount'
)
),
$sfExtjs2Plugin->asAnonymousClass (
array (
'id'=>'extra',
'header' => 'Extra',
'width' => 120,
'sortable' => true,
'dataIndex' => 'extra'
)
)
)
)
);
/*
* Create the paging toolbar
*/
$private ['pt'] = $sfExtjs2Plugin->PagingToolbar (
array(
'store' => $sfExtjs2Plugin->asVar ( 'ds' ),
'pageSize' => 15,
'plugins' => $sfExtjs2Plugin->asVar ( 'fi' ),
)
);
/*
* Create the Grid
*/
$private ['gridPanel'] = $sfExtjs2Plugin->GridPanel (
array (
'id' => 'GridPanel',
'title' => 'Data grid example',
'cm' => $sfExtjs2Plugin->asVar ( 'cm' ),
'ds' => $sfExtjs2Plugin->asVar ( 'ds' ),
'enableColLock' => false,
'loadMask' => true,
'width' => 550,
'height' => 350,
'frame' => true,
'iconCls' => 'grid-details',
'autoExpandColumn' => 'extra',
'plugins' => $sfExtjs2Plugin->asVar ( 'fi' ),
'bbar' => $sfExtjs2Plugin->asVar ( 'pt' ),
)
);
$public ['init'] = $sfExtjs2Plugin->asMethod ( "
Ext.QuickTips.init();
gridPanel.render('grid-details');
ds.load({params:{start: 0, limit: 15}});
" );
$sfExtjs2Plugin->beginApplication ( array ('name' => 'App', 'private' => $private, 'public' => $public ) );
$sfExtjs2Plugin->endApplication ();
$sfExtjs2Plugin->initApplication ( 'App' );
$sfExtjs2Plugin->end ();
Generate Json-output from an executeJson method in your action.class.php
<?php
function executeJson() {
$data = array(
array("id" => 1, "date" => "2008-12-12 16:00:50", "label" => "large", "amount" => 1, "extra" => "nothing"),
array("id" => 2, "date" => "2008-12-12 16:00:50", "label" => "large", "amount" => 1, "extra" => "nothing")
);
$result = array(
'total' => count($data),
'data' => $data
);
$result = json_encode($result);
$this->getResponse()->setHttpHeader("X-JSON", '()'); // set a header, (although it is empty, it is nicer than without a correct header. Filling the header with the result will not be parsed by extjs as far as I have seen).
// sfConfig::set('sf_web_debug', false); // set to false for speed-up (done automatically for production-environment)
return $this->renderText($result); // so return the result in the content, but without using symfony-templates.
}
You can also generate Json-output from a pager (with the help of the sfExtjsThemePlugin)
public function executeJsonList()
{
$limit = $this->getRequestParameter('limit', 20);
$page = floor($this->getRequestParameter('start', 0) / $limit)+1;
$this->processSort(strtolower($this->getRequestParameter('dir')));
$this->processFilters();
$this->filters = $this->getUser()->getAttributeHolder()->getAll('sf_admin/__class__/filters');
// pager
$this->pager = new sfPropelPager('__Class__', $limit);
$c = new Criteria();
$this->addSortCriteria($c);
$this->addFiltersCriteria($c);
$this->pager->setCriteria($c);
$this->pager->setPage($page);
$this->pager->setPeerMethod('doSelectJoinAll');
$this->pager->setPeerCountMethod('doCountJoinAll');
$this->pager->init();
$result = $this->json_encode_list_pager_results($this->pager); // USE THE sfExtjsThemePlugin TO GET THIS METHOD!
$this->getResponse()->setHttpHeader("X-JSON", '()'); // set a header, (although it is empty, it is nicer than without a correct header. Filling the header with the result will not be parsed by extjs as far as I have seen).
// sfConfig::set('sf_web_debug', false); // set to false for speed-up (done automatically for production-environment)
return $this->renderText($result); // so return the result in the content, but without using symfony-templates.
}
Please take a look at:
http://www.symfony-project.org/forum/index.php/t/12399/
and see:
http://backoffice.kaffill.de/ext2/ext2
Please note the 'source'-tab
Notes
This plugin is bundled with the final ExtJS 2.1 **Use only with PHP 5.2.x and above!
Bugs
When creating a new Ext object using an array there was no check for the interpretation of this array as hash or not.
(reusults (for example using a ColumnModel) in creation of a '{'-bracket instead of a '['-bracket, ergo this won't work)
Bugfix
~see the attached file~
Hi swagner, I think this bugfix is obsolete, but if not please contact me! (lvanderree: http://www.symfony-project.org/forum/index.php/mv/msg/5650/0/1040/ )
I would like to merge your patch with the current svn version, but it is a little hard to do it with the latest svn version, which has been changed too much.
It was only up till now that I saw your patch.
**Bugfix updated''' : See attached diff file
Learning Extjs2
Here are some links to Extjs2 Tutorials in various languages:
* The official introduction to Ext 2.0 (en)
* Einführung in die Ext Ajax library (de and v1.0)
* Ext JS 2.0 Tutorials (de)
!ToDo in this tutorial
- Explain the Listener Methods
- Explain the Custom class methods
- Explain the anonymous class methods
- Some Tutorials in other language
- Tutorial o Tips for Symfony 1.1 ??
Benjamin Runnels 
Jérôme Macias 
Leon van der Ree 
Wolfgang Kubens 
-
Make a donation -
"symfony" is a trademark of Fabien Potencier. All rights reserved.
