My solutions (maybe there is some better way to do this):

all:
  doctrine:
    class: sfDoctrineDatabase   # or sfPropelDatabase
    param:
      dsn:      mysql:host=host_name;dbname=database_name
      username: default_user
      password: pass
      encoding: utf8
      attributes: { default_table_collate: utf8_unicode_ci, default_table_charset: utf8 }

And that’s really all.

Configuration and project setup

Information about how to setup new Symfony project and configure it to work well with ExtJS - you can find in this entry - i’m not gonna repeat all steps again. Notice that you should download latest ExtJS version: 3.2 and set up view.yml file to attach neccessary files. You should also load sample data - we need it for our example.

After setting up the environment we can start coding.

ExtJS components

This time i’m going to put all JavaScript code in separate files - it is really good practice for building bigger ExtJS applications than in this example. First i will create grid.js file and put there grid component class and other configuration - i will create my own custom component class: App.country.Grid which inherits from Ext.grid.GridPanel - it’s not really needed now but it will save us time next time. Commnets should help you understand the concept:

// Typical data Store automatically configured with a Ext.data.JsonReader.
var store = new Ext.data.JsonStore({
	// store configs
	url: 'default/list',  // url for retreiving data
    autoLoad: true,
    // reader configs
    totalProperty: 'total',
    successProperty: 'success',  // response status name
    idProperty: 'id',
    root: 'data',
    fields: ['id', 'name', 'description', 'population', 'created_at']
});

// Columns configuration
var columns =  [
    {header: "ID", width: 50, fixed: true, sortable: true, dataIndex: 'id'},
    {header: "Country", width: 50, sortable: true, dataIndex: 'name' },
    {header: "Description", width: 100, sortable: true, dataIndex: 'description' },
    {header: "Population", width: 50, sortable: true, dataIndex: 'population' },
    {header: "Created at", width: 150, fixed:true, sortable: true, dataIndex: 'created_at' }
];

Ext.ns('App', 'App.country');
// my custom grid component
App.country.Grid = Ext.extend(Ext.grid.GridPanel, {

    initComponent : function() {

        // typical viewConfig
        this.viewConfig = {
            forceFit: true,
            emptyText: 'No data found.'
        };

        App.country.Grid.superclass.initComponent.call(this);
    }
});

I think this code do not need additional explanations.

Next step is to create main app.js file - place where i’m going to put my components logic (components initialization) - nothing special so far - simple retrieving data and displaying it in grid. In this example i will place grid into simple window component - for better usability- it’s another good example of using ExtJS components. Code responsible for that:

// when document is ready
Ext.onReady(function() {

	Ext.QuickTips.init();

	// create my custom grid component
    var grid = new App.country.Grid({

        store: store,  // data store for grid
        columns : columns,  //columns configuration
        plugins: [filters],  // additional plugin - Grid Filter Plugin
        bbar: new Ext.PagingToolbar({  //bottom bar configuration
    		pageSize: 15,   // records per page
    		store: store,
    		displayInfo: true
    	})
    });

    // simple window for grid
    var win = new Ext.Window({
        title: 'Advanced data filtering with Grid Filter Plugin',
        height: 410,
        width: 800,
        layout: 'fit',
        items: grid  // just one item
    });

    win.show();  // display window with grid

});

On the server side

There is one more thing to get it to work - we need PHP code on the server side. We can use code from the latest entry or use the following:

  public function executeList(sfWebRequest $request) {

  	 # data retrieved from the request
	$limit = $request->getParameter('limit', 15);
	$page = ($request->getParameter('start', 0)/$limit)+1;
	$dir = $request->getParameter('dir', 'ASC');
	$column = strtolower($request->getParameter('sort', 'name'));

	 # create query object
	$query = Doctrine_Query::create()
		->from('Country c');

	 # conditions for sorting
	if (Doctrine::getTable('Country')->hasColumn($column)) {

		$query->orderBy(sprintf('c.%s %s', Doctrine::getTable('Country')->getFieldName($column), $dir));
	}

	# object responsible for paging
	$pager = new sfDoctrinePager('Country', $limit);

	$pager->setQuery($query);
	$pager->setPage($page);
	$pager->init();

	$result = array();

	 # format result array
	foreach($pager->getResults() as $country) {

		$result[] = $country->toArray();
	}

	# formatted data are returned to the grid
	return $this->renderText(json_encode(array(
		'success'	=> true,
		'total'		=> $pager->getNbResults(),
		'data'		=> $result
	)));
  }

Calling default action of our application we should achieved the following:

Grid Filter plugin

Next step is to apply Grid Filter plugin to our example.

I just only copied Filter plugin folder from Ext/examples/ux to Ext/ux for better code organisation. To add all neccessary JS and CSS files we need to edit view.yml file - final version should looks similar to this:

  stylesheets:
    - ../js/ext-3.2.0/resources/css/ext-all.css
    - ../js/ext-3.2.0/ux/gridfilters/css/GridFilters.css
    - ../js/ext-3.2.0/ux/gridfilters/css/RangeMenu.css

  javascripts:
    - ext-3.2.0/adapter/ext/ext-base-debug.js
    - ext-3.2.0/ext-all-debug.js
    - ext-3.2.0/ux/gridfilters/menu/RangeMenu.js
    - ext-3.2.0/ux/gridfilters/menu/ListMenu.js
    - ext-3.2.0/ux/gridfilters/GridFilters.js
    - ext-3.2.0/ux/gridfilters/filter/Filter.js
    - ext-3.2.0/ux/gridfilters/filter/StringFilter.js
    - ext-3.2.0/ux/gridfilters/filter/DateFilter.js
    - ext-3.2.0/ux/gridfilters/filter/ListFilter.js
    - ext-3.2.0/ux/gridfilters/filter/NumericFilter.js
    - ext-3.2.0/ux/gridfilters/filter/BooleanFilter.js
    - grid.js
    - app.js

Now we can configure filter component:

var filters = new Ext.ux.grid.GridFilters({
    local: false,   // enable remote filtering
    filters: [{
        type: 'numeric',  // filter type
        dataIndex: 'id'    // column name
    }, {
        type: 'string',
        dataIndex: 'name'
    }, {
        type: 'string',
        dataIndex: 'description'
    }, {
    	type: 'numeric',
        dataIndex: 'population'
    }, {
        type: 'date',
        dataIndex: 'created_at'
    }]
}); 

And enable it in grid:

    var grid = new App.country.Grid({

        store: store,  // data store for grid
        columns : columns,  //columns configuration
        plugins: [filters],  // additional plugin - Grid Filter Plugin
        bbar: new Ext.PagingToolbar({  //bottom bar configuration
    		pageSize: 15,   // records per page
    		store: store,
    		displayInfo: true
    	})
    });

So filter component could work properly we need to write additional PHP code responsible for filtering data. Using symfony and Doctrine Query Language it is really easy. The fallowing code of action.class.php presents complete code:

  public function executeList(sfWebRequest $request) {

  	 # data retrieved from the request
	$limit = $request->getParameter('limit', 15);
	$page = ($request->getParameter('start', 0)/$limit)+1;
	$dir = $request->getParameter('dir', 'ASC');
	$column = strtolower($request->getParameter('sort', 'name'));

	 # create query object
	$query = Doctrine_Query::create()
		->from('Country c');

	 # conditions for sorting
	if (Doctrine::getTable('Country')->hasColumn($column)) {

		$query->orderBy(sprintf('c.%s %s', Doctrine::getTable('Country')->getFieldName($column), $dir));
	}

	 # code resposible for filtering data
	foreach($request->getParameter('filter') as $filter) {

		 # comparison condition
		if (isset($filter['data']['comparison'])) {

			switch($filter['data']['comparison']) {

				case 'eq':

					$comparison = '=';
					break;

				case 'lt':

					$comparison = '<';
					break;

				case 'gt':

					$comparison = '>';
					break;
			}
		}

		 # switch 5 filter types
		switch($filter['data']['type']) {

			case 'boolean':

				$query->addWhere(sprintf('c.%s = ?', $filter['field']), $filter['data']['value']);

				break;

			case 'string':

				$query->addWhere(sprintf('c.%s LIKE ?', $filter['field']), '%'.$filter['data']['value'].'%');

				break;

			case 'numeric':

				$query->addWhere(sprintf('c.%s %s ?', $filter['field'], $comparison), $filter['data']['value']);

				break;

			case 'list':

				$query->whereIn(sprintf('c.%s', $filter['field']), explode(',', $filter['data']['value'])); 

				break;

			case 'date':

				$query->addWhere(sprintf('c.%s %s ?', $filter['field'], $comparison), date('Y-m-d', strtotime($filter['data']['value'])));

				break;

			default:

				break;
		}
	}

	# object responsible for paging
	$pager = new sfDoctrinePager('Country', $limit);

	$pager->setQuery($query);
	$pager->setPage($page);
	$pager->init();

	$result = array();

	 # format result array
	foreach($pager->getResults() as $country) {

		$result[] = $country->toArray();
	}

	# formatted data are returned to the grid
	return $this->renderText(json_encode(array(
		'success'	=> true,
		'total'		=> $pager->getNbResults(),
		'data'		=> $result
	)));
  }

}

Thats all. As a result we should get:

Enyoj!

As a result, i received sfWidgetFormJQueryMultiSelect.

<?php

/**
 * sfWidgetFormJQueryMultiSelect represents a multi choice select widget.
 *
 * @package    symfony
 * @subpackage widget
 * @author     Kamil Adryjanek <kamil.adryjanek@gmail.com>

 */
class sfWidgetFormJQueryMultiSelect extends sfWidgetFormChoice
{
  /**
   * Constructor.
   *
   * Available options:
   *
   *  * choices:          An array of possible choices (required)
   *  * renderer_class:   The class to use instead of the default ones
   *  * renderer_options: The options to pass to the renderer constructor
   *  * renderer:         A renderer widget (overrides the expanded and renderer_options options)
   *                      The choices option must be: new sfCallable($thisWidgetInstance, 'getChoices')
   * @param array $options     An array of options
   * @param array $attributes  An array of default HTML attributes
   *
   * @see sfWidgetFormChoiceBase
   */

  protected function configure($options = array(), $attributes = array())
  {
    $this->addOption('config', '{}');

    parent::configure($options, $attributes);

    $this->setOption('multiple', true);
    $this->setOption('expanded', true);
  }

  /**
   * @param  string $name        The element name
   * @param  string $value       The value selected in this widget
   * @param  array  $attributes  An array of HTML attributes to be merged with the default HTML attributes
   * @param  array  $errors      An array of errors for the field
   *
   * @return string An HTML tag string
   *
   * @see sfWidgetForm
   */
  public function render($name, $value = null, $attributes = array(), $errors = array())
  {
    return parent::render($name, $value = null, $attributes = array(), $errors = array()).
    	   sprintf(<<<EOF
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("#%s").multiSelect(
      %s
   );
 });

</script>
EOF
      ,
      $this->generateId($name),
      $this->getOption('config')
      );
  }
}

How to use it
Include into your application neccessary JavaScripts (jQuery 1.4+ and jQuery UI required) and stylesheets: (for example view.yml):

  stylesheets:    [main.css, ui-lightness/jquery-ui-1.7.2.custom.css, jquery.multiselect.css]

  javascripts:    [jquery.js, jquery-ui.js, jquery.multiselect.js]

Then we need to create simple form and set our widgets:

<?php

class SimpleForm extends sfForm {

	public function configure() {

		$userChoices = array('John', 'Michael', 'Tom', 'Peter');

		$this->setWidgets(array(
			'users'	=> new sfWidgetFormJQueryMultiSelect(array(
				'choices'	=> $userChoices
			))
		));

		$this->setValidators(array(
			'users'	=> new sfValidatorChoice(array(
				'choices'	=> array_keys($userChoices)
			))
		));
	}
} 

How does it work (look)
Form should now look similar to that:

Widget should work with Symfony 1.2.X - 1.4.X.

More information about jquery.multiselect plugin can be found on this page.

In the near future I would like to create Symfony widget and put there some of my custom widgets (for example sfWidgetFormJQueryDateTime).

Enjoy

function __(string) {

	 if (typeof(i18n)!='undefined' && i18n[string]) {

		return i18n[string];
	}

	return string;
}

Then i attached another JavaScript file with translations object (before including __() function), for example we can call this file “pl_PL.js” and put there code:

var i18n = {
	'Country.'							: 'Kraj',
	'Description'						: 'Opis',
	'Population'						: 'Populacja',
	'Created at'						: 'Data utworzenia',
	'Symfony 1.2 and Ext.js example'	: 'Przykład wykorzystania Symfony 1.2 i Ext.js '
}

In our ExtJS components (or any other JavaScript code) we just simple call (example code from latest entry):

	//columns structure
	var columns = [
		{id:'name',header: __('Country'), width: 160, sortable: true, dataIndex: 'name'},
		{header: __('Description'), width: 160, sortable: false, dataIndex: 'description'},
		{header: __('Population'), width: 160, sortable: true, dataIndex: 'population'},
		{header: __('Created at'), width: 100, sortable: true, dataIndex: 'created_at'}
	];

	// gridPanel object
	var grid = new Ext.grid.GridPanel({
		title: __('Symfony 1.2 and Ext.js example'),
		loadMask: true,   // mask panel when data is loading
		store: store,
		columns: columns,
		autoExpandColumn: 'name',
		height: 400,
		width: 600,
		renderTo: 'grid-example'  // DOM element
	});

});

For me it’s simple, powerfull and really usefull.

Configuration

The necessary configuration for the tutorial:

• any server with PHP support at least version 5.2.4 + MySql database;
• Symfony framework installed version 1.4.X (latest stable Symfony version is always recommended);
• access to the command line;

At the begining

After setting up the environment we need to create a new Symfony project, generate frontend application (if you use the sandbox is already generated) and a sample module, eg grid.
To do so in the project directory from the command line should be performed sequentially:

symfony generate:project sfExtTest

symfony generate:app frontend

symfony generate:module frontend grid

Connection to the database and test data
For our simple example, we could use static data created in JavaScript, howewer, i would like to show the flow of data between the client application, server and database (ExtJs - Symfony - MySql), so additional configuration is required.

You must configure the connection to database, create tables and load test data. The fallowing code is responsible for the above items (almost the same data have been used previously in this tutorial).

Configuring a database connection:

symfony configure:database mysql:host=localhost;dbname=your_db_name user pass

The structure of the test table:

country:
  actAs: [timestampable]
  columns:
    name:         string(50)
    description:  string(255)
    population:   integer(4)

Test data:

Country:
  Country_:
    name: 'Poland'
    description: 'Description for Poland'
    population: 38130302
  Country_2:
    name: 'Germany'
    description: 'Description for Germany'
    population: 82060000
  Country_3:
    name: 'Brazil'
    description: 'Description for Brazil'
    population: 192098152
  Country_4:
    name: 'USA'
    description: 'Description for USA'
    population: 308147000
  Country_5:
    name: 'Ireland'
    description: 'Description for Ireland'
    population: 6300000
  Country_6:
    name: 'Canada'
    description: 'Description for Canada'
    population: 33874000
  Country_7:
    name: 'India'
    description: 'Description for India'
    population: 1198003000
  Country_8:
    name: 'Italy'
    description: 'Description for Italy'
    population: 60200060
  Country_9:
    name: 'Spain'
    description: 'Description for Spain'
    population: 46661950
  Country_10:
    name: 'Portugal'
    description: 'Description for Portugal'
    population: 10707924
  Country_11:
    name: 'Argentina'
    description: 'Description for Argentina'
    population: 40482000
  Country_12:
    name: 'Estonia'
    description: 'Description for Estonia'
    population: 1340415
  Country_13:
    name: 'Bulgaria'
    description: 'Description for Bulgaria'
    population: 7606551
  Country_14:
    name: 'France'
    description: 'Description for France'
    population: 65073482
  Country_15:
    name: 'Belgium'
    description: 'Description for Belgium'
    population: 10665867
  Country_16:
    name: 'Austria'
    description: 'Description for Austria'
    population: 8356707
  Country_17:
    name: 'Australia'
    description: 'Description for Australia'
    population: 22076000
  Country_18:
    name: 'Japan'
    description: 'Description for Japan'
    population: 127590000
  Country_19:
    name: 'Russia'
    description: 'Description for Russia'
    population: 141909279
  Country_20:
    name: 'Slovakia'
    description: 'Description for Slovakia'
    population: 5379455
  Country_21:
    name: 'Ukraine'
    description: 'Description for Ukraine'
    population: 46011300

Now we need to run from command line sequentially:

  symfony doctrine:build --sql
  symfony doctrine:build --model
  symfony doctrine:build --db
  symfony doctrine:data-load

ExtJS
Next step is to download the latest version (3,0) of ExtJs library from the project official website and unpack it to js/ext directory.

At this point we make changes to the configuration file: view.yml, so that the framework automatically attached the appropriate library js and css (changes should be made to the file: app/frontend/config/view.yml):

  stylesheets:
    - ../js/ext/resources/css/ext-all.css

  javascripts:
    - ext/adapter/ext/ext-base-debug.js
    - ext/ext-all-debug.js

It’s recommended to organize JavaScript code in separate JS file, but in this case, the code responsible for displaying the grid put in the index action view grid module.

To be able to begin to work with the grid component we need to know at least the basis of its architecture and components. GridPanel essentially consists of 4 items:

• Store - object responsible for data storing, including communication with server - in our case JsonStore;
• Column model - display configuration for each column (such as rendering options);
• View - special display settings;
• Selection model - optional component, is responsible for operations on columns (onClick, onSelect, onBeforeSelect) - i wiil try to show the use of this comopnent in a separate entry;

To display the basic version of the grid we need the data, the configuration of columns that we want to display and configuration of the view (grid also accepts additional configuration options that are described in detail in the documentation).

The following code is responsible for all the above elements (file: apps/frontend/modules/grid/templates/indexSuccess.php):

<div id="grid-example"> </div>

<script type="text/javascript">

Ext.onReady(function() {

	// component responsible for connection to the server
	var store = new Ext.data.JsonStore({
		root: 'result',
		totalProperty: 'total', // total number of data
		idProperty: 'id',
		id: 'id',
		remoteSort: true,  // server-side sorting
		fields: ['id', 'name', 'description', 'population', 'created_at'],  // field structure
		url: 'grid/list',
		autoLoad: true  // autoloading
	});

	//columns structure
	var columns = [
		{id:'name',header: 'Country', width: 160, sortable: true, dataIndex: 'name'},
		{header: 'Description', width: 160, sortable: false, dataIndex: 'description'},
		{header: 'Population', width: 160, sortable: true, dataIndex: 'population'},
		{header: 'Created at', width: 100, sortable: true, dataIndex: 'created_at'}
	];

	// gridPanel object
	var grid = new Ext.grid.GridPanel({
		title: 'Symfony 1.2 and Ext.js example',
		loadMask: true,   // mask panel when data is loading
		store: store,
		columns: columns,
		autoExpandColumn: 'name',
		height: 400,
		width: 600,
		renderTo: 'grid-example'  // DOM element
	});

});

</script>

To component can work properly we need to create additional action: “list” - for data processing (file: apps/frontend/modules/grid/actions/actions.class.php):

<?php

  public function executeList(sfWebRequest $request) {

	# some static data
	$limit = 15;
	$page = 1;

	# object responsible for paging
	$pager = new sfDoctrinePager('Country', $limit);

	$pager->setPage($page);
	$pager->init();

	$result = array();

	foreach($pager->getResults() as $country) {

		$result[] = $country->toArray();
	}

	# formatted data are returned to the grid
	return $this->renderText(json_encode(array(
		'total'		=> $pager->getNbResults(),
		'result'	=> $result
	)));
  }

?>

At this point you can test the code: http://localhost/application-name/web/grid

We should see a grid similar to that shown in the figure below:

Support for paging and sorting
The current figure of the grid is quite inconvenient, displaying a couple of records on one list it not a problem, but when the database starts to grow, loading all the data and manipulate them, it becomes almost impossible.

PagingToolbar is a component responsible for paging on the ExtJs side. Its key element was defined earlier: store component. Responsible for the paging code is shown below:

var paging = new Ext.PagingToolbar({
	pageSize: 10,  // items per page
	store: store,
	displayInfo: true,
	displayMsg: 'Displaying countries {0} - {1} of {2}',   // messages
	emptyMsg: 'Country list is empty'
});

/ / small modification of the grid code
var grid = new Ext.grid.GridPanel({
	...
	bbar: paging,   // set the bottom panel
	...
});

To paging and sorting work properly, action “list” (in which we build the appropriate query based on request parameters) requires some modifications.

ExecuteList action, also requires modification - we need to add paging support and sorting by the selected column:

<?php

  public function executeList(sfWebRequest $request) {

	# data retrieved from the request
	$limit = $request->getParameter('limit', 10);
	$page = $request->hasParameter('start') ? $request->getParameter('start')/$limit+1 : 1;
	$dir = $request->getParameter('dir', 'ASC');
	$column = strtolower($request->getParameter('sort', 'name'));

	# conditions for sorting
	$query = Doctrine_Query::create()->from('Country c');

	if (Doctrine::getTable('Country')->hasColumn($column)) {

		$query->orderBy(sprintf('c.%s %s', Doctrine::getTable('Country')->getFieldName($column), $dir));
	}

	# object responsible for paging
	$pager = new sfDoctrinePager('Country', $limit);

	# Pager query
	$pager->setQuery($query);
	$pager->setPage($page);
	$pager->init();

	$result = array();

	foreach($pager->getResults() as $country) {

		$result[] = $country->toArray();
	}

	# formatted data is returned to the grid
	return $this->renderText(json_encode(array(
		'total'		=> $pager->getNbResults(),
		'result'	=> $result,
		'page'		=> $page
	)));
  }

?>

Now we only need to refresh the page and verify that all changes have been properly marked - it should looks something like this:

Same prezentacje zapowiadały się bardzo ciekawie. Po wystąpieniach, które miały miejsce w czerwcu (w szczególności przypadło mi do gustu bardzo ciekawe wystąpienie Pana Grzegorza Sławatyńskiego o targetowaniu behawioralnym), liczyłem na więcej. Nie będę się za bardzo rozpisywał - prawdopodobnie już niedługo pojawią się bardziej obszerne recenzje na oficjalnej stronie NetDay.

Tak w skrócie:

• na pierwszy ogień poszedł Googlemon. Tomasz Frelik raczej nie specjalnie zaciekawił zgromadzoną publiczność. Nie jestem specjalnie zaznajomiony z SEO, ale nawet dla mnie rzeczy o których mówił Tomek były oczywiste. Osobiście odebrałem to wystąpienie raczej jako reklamę niezbyt dopracowanego serwisu (nigdy wcześniej o Nim nie słyszałem). Sam pomysł jest ciekawy - jednakże jego autor musi nad Nim jeszce popracować - jak sam zresztą przyznaje.
• następnie zaprezentował się Jarosław Bielecki z Mint Media. Wystąpienie zdecydowanie ciekawsze i dużo lepiej przemyślane. MintMedia to nowo powstała sieć internetowa świadcząca usługi w zakresie reklamy internetowej. Prezentacja opierała się na wyjaśnieniu zasad działania tego typu reklamy i możliwości jakie oferuje zarówno potencjalnym klientom, jaki i współpracującym wydawcom.
• wystąpienie Michała Krawczyka, osoby odpowiedzialnej za marketing internetowy UM Lublin, wzbudziło najwięcej emocji. Prezentacja dotyczyła prowadzonych ostatnio kampanii promujących Lublin w sieci. Ciekawe wystąpienie wywołało żywą dyskusję wśród zgromadzonych. Wprawdzie o wspomnianych reklamach (z wyjątkiem jednej: “Przeżyj studia. Studiuj w Lublinie”) nigdy wcześniej nie słyszałem, cieszyć może fakt, że Lublin w końcu w sieci zaistniał. W tym momencie, jak dowiadujemy się z od Pana Michała, priorytetem jest reklama Lublina poza granicami naszego miasta, jednakże w przyszłorocznym budżecie nie zabraknie miejsca dla promocji inicjatyw lokalnych.

Niestety z przyczyn ode mnie niezależnych nie mogłem uczestniczyć w pozostałych wystąpieniach.

Podsumowując, 4 spotkanie lubelskiej branży internetowej pozostawiło pewien niedosyt. Na przyszłość przydałoby się więcej wystąpień dotyczących konkretnych zagadnień związanych np z marketingiem w wyszukiwarkach, e-commerce czy chociażby o trendach wśród developerów. Uważam, że ciekawym i przyszłosciowym pomysłem byłoby utworzenie swojego rodzaju kategorii/dziedzin do których moznaby zapraszac prelegentów. Spotkania napewno byłby ciekawsze i mniej monotematyczne.

W niniejszym wpisie chciałbym na prostym przykładzie zademonstrować możliwości jednego z komponentów tego potężnego frameworka - GridPanel . Jeszcze nie wiem czy będzie to część większego cyklu kursów o extjs i czy pojawi się on także w wersji angielskiej (wersja angielska - dodatkowo zaktualizowana dla Symfony 1.4 i Doctrine), ale narazie w planie mam wpisy dotyczące integracji z zaawansowanym systemem filtrów (ExtJS filter plugin) i dodawania/edytowania elementów do grida za pomocą modalnych okien - o ile oczywiście tematyka tego wpisu spotka się z zainteresowaniem.

Konfiguracja

Niezbędna konfiguracja dla tutoriala:

• dowolny serwer z obsługa PHP w wersji co najmniej 5.2.4 + baza danych MySql;
• zainstalowany framework Symfony w wersji 1.2.X (nic nie stoi na przeszkodzie by wypróbować sf 1.3) lub ewentualnie sandbox do pobrania (piaskownica Symfony- wstępnie skonfigurowany framework gotowy do pracy od zaraz);
• dostęp do wiersza poleceń;

Rozpoczynamy prace
Mając tak przygotowane środowisko należy utworzyć nowy projekt, wygenerować aplikacje frontendu (w przypadku korzystania z piaskownicy jest już wygenerowana) i przykładowy moduł, np: grid. By tego dokonać w katalogu projektu z wiersza poleceń należy wykonać kolejno:

symfony generate:project sfExtTest

symfony generate:app frontend

symfony generate:module grid

Połączenie z bazą danych i dane testowe
Dla naszego prostego przykładu moglibyśmy wykorzystać statyczne dane utworzone w JavaScript, jednakże chce pokazać przepływ danych między aplikacją klienta, a serwerem i bazą danych (między framewrokiem ExtJS, a Symfony i bazą danych), także niezbędna będzie dodatkowa konfiguracja.

Należy skonfigurować połączenie z bazą danych, utworzyć testowe tabele i wczytać do nich dane testowe. Poniższy kod odpowiada za wymienione powyżej elementy (poniższe dane zostały już wcześnie wykorzystane w tutorialu).

Konfiguracja połączenia z bazą danych:

symfony configure:database “mysql:host=localhost;dbname=twojaBazaDanych” uzytkownik haslo

Struktura tabeli testowej:

propel:
  country:
    _attributes: { phpName: Country }
    id:
    name: varchar(50)
    description: varchar(255)
    created_at:

Dane testowe:

Country:
  Country_1:
    name: 'Poland'
    description: 'Description for Poland'
  Country_2:
    name: 'Germany'
    description: 'Description for Germany'
  Country_3:
    name: 'Brazil'
    description: 'Description for Brazil'
  Country_4:
    name: 'USA'
    description: 'Description for USA'
  Country_5:
    name: 'Ireland'
    description: 'Description for Ireland'
  Country_6:
    name: 'Canada'
    description: 'Description for Canada'
  Country_7:
    name: 'India'
    description: 'Description for India'
  Country_8:
    name: 'Italy'
    description: 'Description for Italy'
  Country_9:
    name: 'Spain'
    description: 'Description for Spain'
  Country_10:
    name: 'Portugal'
    description: 'Description for Portugal'
  Country_11:
    name: 'Argentina'
    description: 'Description for Argentina'
  Country_12:
    name: 'Estonia'
    description: 'Description for Estonia'
  Country_13:
    name: 'Bulgaria'
    description: 'Description for Bulgaria'
  Country_14:
    name: 'France'
    description: 'Description for France'
  Country_15:
    name: 'Belgium'
    description: 'Description for Belgium'
  Country_16:
    name: 'Austria'
    description: 'Description for Austria'
  Country_17:
    name: 'Australia'
    description: 'Description for Australia'
  Country_18:
    name: 'Japan'
    description: 'Description for Japan'
  Country_19:
    name: 'Russia'
    description: 'Description for Russia'
  Country_20:
    name: 'Slovakia'
    description: 'Description for Slovakia'
  Country_21:
    name: 'Ireland'
    description: 'Description for Ireland'

Teraz wystarczy z poziomu lini komend wywołać kolejno:

  symfony propel:build-sql
  symfony propel:build-model
  symfony propel:insert-sql
  symfony propel:data-load

ExtJS
Następnym krokiem jest pobranie najnowszej wersji (3,0) biblioteki ExtJs. Całość ściągamy z oficjalnej strony EXTa i wypakowujemy do katalogu ext.

W tym momencie warto dokonać konfiguracji pliku view.yml, tak by framework automatycznie załączył odpowiednie biblioteki js i css (zmian należy dokonoać w pliku app/frontend/config/view.yml):

stylesheets:
- ../js/ext/resources/css/ext-all.css

javascripts:
- ext/adapter/ext/ext-base-debug.js
- ext/ext-all-debug.js

Zalecane jest by kod JavaScript organizować w osobnych plikach JS, jednakże w tym wypadku kod odpowiedzialny za wyświetlanie grida umieścimy w widoku akcji index modułu Grid.

By móc w ogóle przystąpić do pracy z komponentem grida trzeba poznać przynajmniej podstawy jego budowy i elementy składowe. Zasadniczo na GridPanel składa się 4 elementy:

• Store - obiekt odpowiedzialny za przechowywanie danych, w tym komunikację z serwerem - w naszym przypadku JsonStore;
• Column model - konfiguracja wyświetlania poszczególnych kolumn (m.in. opcje renderowania);
• View - specyficzne ustawienia efektów wyświetlania;
• Selection model - element nieobowiązkowy, odpowiada za operacje na kolumnach (zaznaczanie, pobieranie zaznaczonych) - postaram się pokazać zastosowanie tego komponentu w osobnym wpisie;

Także aby wyświetlić podstawową wersję grida potrzebujemy danych, konfiguracji kolumn, które chcemy wyświetlić i konfiguracji widoku (grid przyjmuje również dodatkowe opcje konfiguracyjne opisane szczegółowo w dokumentacji).

Poniższy kod odpowiada za wszystkie wyżej wymienione elementy (kod pliku: apps/frontend/modules/grid/templates/indexSuccess.php):

<div id="grid-example"> </div>

<?php javascript_tag(); ?>

Ext.onReady(function() {

	// komponent odpowiadający za połączenie z serwerem
 	var store = new Ext.data.JsonStore({
		root: 'result',
		totalProperty: 'total', //całwkoita ilość zwracanych danych
		idProperty: 'id',
		id: 'id',
		remoteSort: true,  // sortowanie po stronei serwera
		fields: ['id', 'name', 'description', 'created_at'],  // struktura zwracanych elementów
		url: 'grid/list',  // adres url na serwerze
		autoLoad: true  // automatyczne ładowanie danych
	});

	//struktura kolumn
	var columns = [
            {id:'name',header: 'Państwo', width: 160, sortable: true, dataIndex: 'name'},
            {header: 'Opis', width: 160, sortable: false, dataIndex: 'description'},
            {header: 'Data utworzenia', width: 100, sortable: true, dataIndex: 'created_at'}
        ];

    // obiekt grida
    var grid = new Ext.grid.GridPanel({
    	title: 'Symfony 1.2 and Ext.js example',
    	loadMask: true,   //maskowanie ładowania danych
        store: store,
        columns: columns,
        autoExpandColumn: 'name',
        height: 400,
        width: 600,
        renderTo: 'grid-example'  // element DOM do którego ma być załadowany grid
    });

});

<?php end_javascript_tag(); ?>

By całość mogła poprawnie działać nalezy utowrzyć dodatkową akcje “list”, z której komponent store będzie pobierał dane do grida (kod pliku: apps/frontend/modules/grid/actions/actions.class.php):

<?php

   public function executeList(sfWebRequest $request) {

  	 // tymczasowe dane ustawione na sztywno
  	$limit = 15;
    $page = 1;

     // pomocniczy obiekt odpowiedzialny za stronicowanie
  	$pager = new sfPropelPager('Country', $limit);

    $pager->setPage($page);
    $pager->init();

    $result = array();

    foreach($pager->getResults() as $country) {

    	$result[] = $country->toArray(BasePeer::TYPE_FIELDNAME);
    }

     // sformatowane dane są zwracane do grida
    return $this->renderText(json_encode(array(
    	'total'		=> $pager->getNbResults(),
    	'result'	=> $result
    )));
  }

?>

W tym momencie można sprawdzić działanie kodu wywołując w przeglądarce adres:
http://localhost/nazwa-aplikacji/web/grid

Powinniśmy ujrzeć grida podobnego do tego przedstawionego na rysunku poniżej:

Obsługa stronicowania i sortowania

Obecna postac grida jest dość niewygodna, o ile w przypadku kilkunastu rekordów wyświetlanie ich na jednej stronie nie jest zbyt kłopotliwe, to w momencie gdy baza zacznie się rozrastać ładowanie wszystkich danych i operowanie na nich staje się niemal niemożliwe.

Za stronicowanie po stronie ExtJS odpowiada component: PagingToolbar. Jego kluczowym elementem jest zdefiniowany wcześniej komponent store. Kod odpowiedzialny za stronicowanie widoczny jest poniżej:

	paging = new Ext.PagingToolbar({
		pageSize: 10,  // ilość elementów
		store: store,  // obiekt magazynujący dane
		displayInfo: true,  //wyśweitlanie dodatkowych informacji
		displayMsg: 'Wyświetlanie państw {0} - {1} z {2}',   // komunikaty
		emptyMsg: "Lista państw jest pusta"  

	});

         //małą modyfikacja kodu grida
	var grid = new Ext.grid.GridPanel({
        	...
		bbar: paging,   // ustawiamy dolny panel grida
		...
	});

By stronicowanie i sortowanie działało prawidłowo modyfikacji wymaga akcja list, w której musimy zbudować odpowiednie zapytanie na podstawie parametrów żądania.

Modyfikacji wymaga też sama akcja executeList - musimy dodać do Niej obsługę stronicowania i sortowania po wybranej kolumnie:

<?php

  public function executeList(sfWebRequest $request) {

  	 // dane pobierane z żądania
  	$limit = $request->getParameter('limit', 10);
    $page = $request->hasParameter('start') ? $request->getParameter('start')/$limit+1 : 1;
    $dir = $request->getParameter('dir', 'asc');
    $column = strtolower($request->getParameter('sort', 'name'));

     # warunki dla sortowania
    $c = new Criteria();
   	if (in_array($column, CountryPeer::getFieldNames(BasePeer::TYPE_FIELDNAME))) {

   		$column = CountryPeer::translateFieldName($column, BasePeer::TYPE_FIELDNAME, BasePeer::TYPE_COLNAME);
   		if ($dir == "ASC") {

   			$c->addAscendingOrderByColumn($column);
   		} else {

   			$c->addDescendingOrderByColumn($column);
   		}
   	}

     # pomocniczy obiekt odpowiedzialny za stronicowanie
  	$pager = new sfPropelPager('Country', $limit);

  	 # kryteria dla pagera
  	$pager->setCriteria($c);
    $pager->setPage($page);
    $pager->init();

    $result = array();

    foreach($pager->getResults() as $country) {

    	$result[] = $country->toArray(BasePeer::TYPE_FIELDNAME);
    }

     # sformatowane dane są zwracane do grida
    return $this->renderText(json_encode(array(
    	'total'		=> $pager->getNbResults(),
    	'result'	=> $result,
    	'page'		=> $page
    )));
  }

?>

Teraz wystarczy tylko odświeżyć stronę i sprawdzić czy wszystkie zmiany zostały poprawnie naniesione - całość powinna wyglądać mniej więcej tak:

The Good:

• dealing with forms: how to create, customize and submit the form. Also shows how to use sfExtraFormPlugins widgets for JavaScript/Ajax integration;
• plugins: installing and creating new plugins;
• security: dealing with user credentials;
• creating custom form formatters;
• creating and customizing admin area;
• internationalization: explained really well;
• delopoyment: preparing and transferring application to server;

The Bad:

• dealing with e-mail: intergartion with SwiftMailer in sf 1.3;
• it would be nice to see Zend Framework integration in practice;
• starting project with sf 1.3 and Propel - i really like Propel but sf 1.3 has much more better support for Doctrine;
• nothing about new installer option;
• nothing about updated form methods - useFields;
• some irritating inline css;

What i really like about this book:

• dealing with Symfony and memcache;
• optimization: templates caching

For me, it’s not enough. I think the Jobeet tutorial is better introduction to Symfony then Milkshake shop. So if we want to be introduced to all new Symfony 1.3 features - we would have to wait for some book upgrade or read the Symfony 1.3 documentation. My rate is 3 out of 5, i can recommend this book for beginners.

Poniżej krótka lista najważniejszych wg mnie zmian:

- E-mail. Dodano domyślny system odpowiadający za wysyłanie e-maili oparty o SwiftMailer 4.1. Nie miałem okazji testować tego mailera, także nie mogę podać żadnych konkretnych argumentów “za”, bądź “przeciw”. Wiem natomiast, że nowym Project Managerem tego projektu został Fabien Potencier, także o jego dalszy rozwój i wsparcie możemy być spokojni. Do tej pory w swoich projektach z powodzeniem wykorzystywałem Zend_Mail, a SwiftMiailera postaram się przetestować przy najbliższej okazji. Poniżej przykład wykorzystania zintergorwanego z Symfony SwiftMailera:

<?php

$message = $this->getMailer() ->compose('od@przyklad.pl', 'do@przyklad.pl', 'Temat wiadomości', 'Treść')->attach(Swift_Attachment::fromPath('/sciezka/do/pliku'));

$this->getMailer()->send($message);

?>

- Doctrine jako domyślny ORM. Pomimo tego, że pomału przekonuję się do tego ORMa, w większych projektach wciąż zostaje przy Propelu - budowanie zapytań z wykorzystaniem obiektów Criteria bardziej przypadło mi do gustu. Wg zapowiedzi wsparcie dla Propela ma się zakończyć wraz z pojawieniem się sf 2.0, jednakże ostatnio przewodzenie na projektem Propel objął François Zaninotto (były pracownik Sensio, autor wielu pluginów i części dokumentacji), co mam nadzieje zaowocuje reaktywacją projektu (wersja 1.4 ma ukazać się w  październiku). Wracając do samego Doctrine - dodano nowe opcje dla definiowania struktury bazy danych w pliku YAML, a także nowe komendy dla generatorów (m.in: doctrine:build, doctrine:reload-data, doctrine:create-model-tables, doctrine:delete-model-tables, doctrine:clean-model-files).

- Formularze. Przede wszystkim dodano metodę useFields (mój odopwiedniki unsetAllExcept, przykład poniżej), klasy: BaseForm (klasa nadrzędna dla wszystkich formularzy) i sfFormSymfony (przydatna przy implementacji zdarzeń na formularzach). Ponadto dodano brakujące metody takie jak: setDefault(), setLabel(), setIdFormat(), setHidden() dla komponentów wykorzystywanych w formularzach.

<?php
  class UserForm extends BaseUserForm
  {
    public function configure()
    {
      $this->useFields(array(
        'name',
        'surname',
        'email'
      ));
    }
  }

?>

- innym ciekawym dodatkiem do nowej wersji sf jest możliwość tworzenia własnego skryptu instalatora. By tego dokonać należy podczas tworzenia nowego projektu użyć opcji –installer i zadać odpowiedni parametr skryptu (przykład poniżej).

Z poziomu wiersza poleceń:

    php symfony generate:project --installer=custom_installer.php

Przykładowy skrypt instalatora (na podstawie “Symfony 1.3 + Doctrine 1.2″):

  if (!$this->askConfirmation('Czy jestes pewien, ze chcesz rozpoczac instalacje?')) {

    return ;
  }

  $this->installDir(dirname(__FILE__) . '/skeleton');

  $this->runTask('plugin:publish-assets');

  $validator = new sfValidatorEmail(array(), array('invalid' => 'Podano nie prawidlowy adres e-mail'));

  $email = $this->askAndValidate('Prosze podac swoj adres e-mail:', $validator);

  $this->runTask('configure:author', sprintf("'%s'", $email));

  $secret = $this->ask('Prosze podac unikalny ciag znakow dla ochrony CSRF:');

  $this->runTask('generate:app', 'frontend --escaping-strategy=true --csrf-secret=' . $secret);

  $this->runTask('plugin:install', 'sfDoctrineGuardPlugin');

  $this->reloadTasks();

  $this->runTask('guard:create-user', 'kamil haslo');

  $this->runTask('clear:cache');

Migracja do nowej wersji nie powinna przysporzyć problemów - instrukcja dostępna jest na stronie projektu.

“JQuery Layout plug-in was inspired by the extJS border-layout, and recreates that functionality as a jQuery plug-in. The UI.Layout plug-in can create any UI look you want - from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms, etc.”

What i really like about the admin generator is its… generator feature. After a couple of minutes we have all the basic actions for our models. We can also add custom actions and modify templates. The missing component for me is navigation. We can create some simple navigation between modules alone, we can also use nice Symfony plugin: sfAdminDashPlugin or jQuery plugin: layout. The picture below shows the final result of what i’m going to do in this tutorial.

First we need to create new project and for example new backend application. In this example we are going to use database so database configuration is necessary. For this tutorial i have chosen Propel but it doesn’t matter which ORM you are going to use - both provide admin generator feature.

<?php

    symfomy generate:project sfLayout
    symfomy generate:app backend
    symfomy configure:database "mysql:host=localhost;dbname=sf_layout" user pass

?>

I will also install and configure sfGuardPlugin ( sfGuard plugin installation and configuration ) for some custom data:

    symfony plugin:install sfGuardPlugin

I don’t want to create any other model class for such simple tutorial - You can do it for practice.

After that we need to download latest jQuery Core and jQuery layout plugin version and put it in web/js/jQuery directory. We can add those scripts through view.yml file in config dir of backend appliaction. My view.yml

default:
  stylesheets:    [admin.css, jQuery/smoothness/jquery-ui-1.7.1.custom.css]

  javascripts:    [jQuery/jquery-1.3.2.min.js, jQuery/jquery-ui-1.7.1.custom.min.js, jQuery/jquery.layout.min.js]

  has_layout:     on
  layout:         layout

After that all we have to do is to setup the layout. Layout plugin configuration depends on modules you want to use for you backend appliaction. In my example i have added page module to show you how usefull accordion navigation could be. My layout.php file looks:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <?php include_http_metas() ?>
    <?php include_metas() ?>
    <?php include_title() ?>
    <?php include_javascripts() ?>
    <?php include_stylesheets()	?>

    <link rel="shortcut icon" href="/favicon.ico" />

    <?php javascript_tag(); ?>

	var outerLayout; // init global vars

	$(document).ready( function() {

		// PAGE LAYOUT
		outerLayout = $('body').layout({
			applyDefaultStyles:	true
			// AUTO-RESIZE Accordion widget when west pane resizes
		,	west__onresize:		function () { $("#accordion").accordion("resize"); }
		,	west__size:			280
		,	east__size:			340
		});

		// ACCORDION - inside the West pane
		var accor = $("#accordion").accordion({
			fillSpace: true,
			header: "h3",
			animated: 'bounceslide',
			active: false,
			navigation: true
		});

		<?php switch($this->getModuleName()):

			case 'sfGuardUser': ?>
			<?php case 'sfGuardPermission': ?>

			 	$("#accordion").accordion( 'activate' , 0 );

				<?php break; ?>

	 		<?php case 'page': ?>

	 			$("#accordion").accordion( 'activate' , 1 );

	 			<?php break; ?>	 		

		<?php endswitch; ?>
	});

	<?php end_javascript_tag(); ?>

  </head>
  <body>

    <div class="ui-layout-west">
		<div id="accordion" class="basic">

			<h3><a href="#">Users</a></h3>
			<div>
				<p> Manage users, groups and permissions. </p>
				<ul>
					<li> <?php echo link_to('Users list', 'sfGuardUser/index') ?> </li>
					<li> <?php echo link_to('Add user', 'sfGuardUser/new') ?> </li>
					<li> <?php echo link_to('Groups list', 'sfGuardGroup/index') ?> </li>
					<li> <?php echo link_to('Permissions list', 'sfGuardPermission/index') ?> </li>
				</ul>
			</div>

			<h3><a href="#">Static pages</a></h3>
			<div>
				<p> Manage static page content.  </p>
				<ul>
					<li> <?php echo link_to('Pages list', 'page/index') ?> </li>
					<li> <?php echo link_to('Add page', 'page/new') ?> </li>
				</ul>
			</div>

		</div>
	</div>

	<div class="ui-layout-center">

		<?php echo $sf_content ?>
	</div>

	<div class="ui-layout-north">

		<div class="left">
			Back to <strong><a href=#" > website </a></strong>
		</div>

		<div class="right">
			Logged in as: <strong> <?php echo $sf_user->getGuardUser()->getUsername() ?> </strong>
			<?php echo link_to('Sign out', 'sfGuardAuth/signout') ?>
		</div>
	</div>

	<div class="ui-layout-south">
		<div class="left">
			Footer
		</div>

	</div>

  </body>
</html>

I think that there is some better way to set the active tab in navigation but this one is also working well. For advance use we can also modify admin generator layout structure and put for example list filters in east panel so it could be toggleable as any other panel.

Nice to see your comments, enjoy.