Username
Password

Plugin Information License Installation Readme All Releases Changelog Contribute

sfExtjs2Plugin 0.5.0beta for sf 1.0 MIT

Description

This plugin makes it possible to write Ext JS code in PHP

Leads

Name	Email
Benjamin Runnels	gro.nevark <<ta>> nevark
Jérôme Macias	ten.erehwemos <<ta>> emorej
Leon van der Ree	ln.nomed.em4nuf <<ta>> noeL
Wolfgang Kubens	ten ]tod[ xmg ]ta[ snebuk.gnagflow

Version	License	API	Released
0.5.0beta	MIT	0.5.0beta	01/08/2008

Show source | Show as Markdown

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

sfExtjs2Plugin - 0.5.0

This is a wrapper plugin arround the Ext JS javascript framework.

Signin

Tools

Stats

Module plugins

Description

Categories

Leads

Releases for sf 1.0

Join this plugin team

Changelog for release 0.5.0 - 01/08/2008

Other releases

Release 0.5.0 - 01/08/2008

Installation for sf 1.0

PEAR

Repository

sfExtjs2Plugin

sfExtjs2Plugin

Installation

Single Checkout

Automatic Checkout

Create the link

Usage - A short Tutorial

Preparation

Accessing Ext2

JavaScript output through sfExtjs2Plugin

Create the Application

Write the closing Tag

Create a custom class

Variables

Methods

The Constructor

Anonymous Classes

Normal Classes

Singletons

Using XTemplate

Examples

A complete grid example

A complete data grid with paging

Notes

Bugs

Bugfix

Learning Extjs2

!ToDo in this tutorial