sfExtjs2Plugin

Write ExtJS2.0 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
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();
?>

Examples

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.0.2 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

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