24

Integración de Symfony + ExtJS

April 10, 2008

Publicidad / Advertisement

Pequeño tutorial sobre cómo usar la librería de JavaScript ExtJS con Symfony.

Cómo integrar Symfony y ExtJS

El objetivo es usar ExtJS 2.0 en proyectos Symfony. Existe un plugin de
ExtJS2 y un tema ExtJS para el administrador generado automaticamente con
propel-init-admin.

*Primer intento.*

Lo primero es añadir el Plugin de ExtJS2 a nuestro proyecto Symfony.
Para ello, la instalación se hace via SVN. Desde nuestra carpeta del
proyecto:

svn export http://svn.symfony-project.com/plugins/sfExtjs2Plugin/trunk/./plugins

Si estamos en Linux, desde la carpeta web/ crear el enlace al plugin:
ln -s ../plugins/sfExtjs2Plugin/web/ sfExtjs2Plugin

Si estamos en Windows: copiaremos el directorio del plugin directamente al
web/

Consultar:http://trac.symfony-project.com/wiki/sfExtjs2Plugin

Tambien instalamos el plugin sfExtjsThemePlugin:
svn co http://svn.symfony-project.com/plugins/sfExtjsThemePlugin/./plugins/s

Si estamos en Linux, desde la carpeta web/ crear el enlace al plugin:
ln -s ../plugins/sfExtjsThemePlugin/web/ sfExtjsThemePlugin

Si estamos en Windows: copiaremos el directorio del plugin directamente al
web/

Ya tenemos instalado en Symfony la funcionalidad de ExtJS lista para usar.
Para usarlo de manera práctica vamos a hacer un editor generado con
propel-init-admin al que le haremos funcionar con el tema de ExtJS. Lo
primero es generar un esquema de base de datos con unas tablas, luego crear
la base de datos, iniciar el modulo de administracion para cada tabla y
crear unos registros de ejemplo.

generar config/schema.yml

> symfony propel-build-all
> symfony propel-init-admin nombre_app nombre_modulo nombre_clase

*NOTA: No olvidar crear la base de datos vacía y actualizar el fichero
config/databases.yml con ese nombre de base de datos.*

configurar el generator.yml de los modulos: El archivo generator.yml es la
clave de los módulos generados automáticamente. Permite configurara
completamente el contenido, las opciones y el aspecto gráfico de las vistas
list y edit. Sin utilizar ni una sola línea de código PHP.

*NOTA: Consultar el libro oficial, Capitulo 14, acerca de todos los detalles
de configuracion del generator.yml.*

Para configurar el generator.yml de manera que use ExtJS, hacemos los
siguientes cambios:

– class: donde pone ‘sfPropelAdminGenerator’, ponemos
‘sfExtjsPropelAdminGenerator’
– theme: donde pone ‘default’ ponemos ‘extjs’

Ya tenemos el tema de ExtJS funcionando. Desafortunadamente, el resultado no
es el esperado, ni en gráfica ni en funcionalidad.

*Segundo intento.*

Usar los componentes EXTJS de manera externa. Para ello, lo primero es
bajarse ExtJS2.0 de la pagina oficial.
Download ext-2.0.zip <http://extjs.com/deploy/ext-2.0.zip>
y decomprimirlo dentro de nuestro proyecto symfony, en el directorio web/

En el archivo layout.php (apps/nombre_app/templates/) añadimos el
adaptador.Podemos elegir entre Prototype, Jquery y YUI.

<?php $sfExtjs2Plugin = new sfExtjs2Plugin(array('adapter'=>'yui')); ?>
<?php $sfExtjs2Plugin->load(); ?>

y ademas añadimos añadimos los javascript y estilos genericos de ExtJS:

$extjsdir = '/symfony/editores/web/ext-2.0/';
sfContext::getInstance()->getResponse()->addJavascript($extjsdir.'adapter/ext/ext-base.js');
sfContext::getInstance()->getResponse()->addJavascript($extjsdir.'ext-all-debug.js');
sfContext::getInstance()->getResponse()->addStylesheet($extjsdir.'resources/css/ext-all.css');
sfContext::getInstance()->getResponse()->addStylesheet($extjsdir.'resources/css/xtheme-gray.css');

Ahora creamos un modulo para obtener datos de una tabla.
> symfony init-module nombre_app nombre_modulo

y programamos la acción index para obtener los datos en forma de arrays. El
fichero es actions/actions.class.php:
Con esta acción, en la template tendremos accesible la variable $results con
el array de datos.

public function executeIndex()
{
$this->results = array();
$rs = nombre_moduloPeer::doSelectRS(new Criteria);
while($rs->next())
{
$result['campo_1'] = $rs->getInt(1);
$result['campo_2'] = $rs->getString(2);
.
.
$this->results[] = $result;

}
}
}

Después, vamos al template de la acción del módulo, en este caso,
templates/indexSuccess.php
donde incluiremos el js con el código ExtJS y el div que usara ese codigo.
Como ejemplo, vamos a pintar un Grid con el array de datos obtenidos en la acción.

<script src=’path_to_js_dir/mygrid.js’ >
<div id=’mygrid’></div>

Ya sólo queda crear el fichero mygrid.js, donde programamos el componente ExtJS.

Espero que os sea de utilidad, Saludos.

Este post lo publiqué primeramente  en el grupo de symfony en español de google Groups.

http://groups.google.com/group/symfony-es/msg/70def8001ba47596

Publicidad / Advertisement

 

Topics: Desarrollo web, Symfony Framework | 2 Comments »

2 Responses to “Integración de Symfony + ExtJS”

  1. Fernando Says:
    May 18th, 2010 at 8:11 pm

    Hola.

    ¿Tienes planteada una actualización del post?

    El plugin sfExtjs2Plugin es para sf 1.0 y existe, por ejemplo, el plugin laiguadmintheme que genera modulos admin utilizando ajax via extjs

    Salu2
    Fernando

  2. Abel Machado Says:
    October 10th, 2012 at 7:14 pm

    necesito saber como integrar Extjs 2.2 o Extjs 3 con Symfony

Comments