La primera parte de esta serie de artículos se van a basar en el código de una miniaplicación para gestión de un rudimentario libro de cuentas y que tenéis disponible para evaluar

Este ejemplo muestra cómo hacer varias cosas: cargar datos desde PHP en Extjs, cargar los datos de un FormPanel desde un GridPanel, filtrar un GridPanel desde un formulario externo, cómo obtener los datos de los campos de un FormPanel, etc.

Espero que los artículos que publique estos días os sean de utilidad

Fichero 1: Código Javascript de la miniaplicación

/*
 * Definimos nuestros propios validadores de datos
 * para los formularios
 */
Ext.apply(Ext.form.VTypes, {
    daterange : function(val, field) {
        var date = field.parseDate(val);

        if(!date){
            return;
        }
        if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
            var start = Ext.getCmp(field.startDateField);
            start.setMaxValue(date);
            start.validate();
            this.dateRangeMax = date;
        }
        else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
            var end = Ext.getCmp(field.endDateField);
            end.setMinValue(date);
            end.validate();
            this.dateRangeMin = date;
        }
        return true;
    },
    /**
     * Definimos un nuevo validador: exclusionNotZero
     *
     * Valida un par de campos numéricos para que no puedan tener valor positivo los dos ni
     * valor cero los dos.
     *
     **/
    exclusionNotZero: function(val, field) {
        if (field.exclusionPair) {
            var pair = Ext.getCmp(field.exclusionPair);
            var pairValue = pair.getValue();

            if ((pairValue > 0) && (val > 0)) {
                field.markInvalid('Un movimiento no puede tener a la vez haber y deber');
                return false;
            } else if ((pairValue == 0) && (val == 0)){
                field.markInvalid('Un movimiento no puede tener haber y deber a cero');
                return false;
            } else {
                field.clearInvalid();
                pair.clearInvalid();
                return true;
            }
        }
        return true;
    }
});

Ext.onReady(function() {
    /*
     * Creamos un espacio de nombres
     */
    Ext.namespace('GestorCuentas');

    /*
     * Definimos el registro para un movimiento
     */
    GestorCuentas.movimientoRecord = new Ext.data.Record.create([
        {name: 'mov_id', type: 'int'},
        {name: 'mov_concepto', type: 'string'},
        {name: 'mov_fecha', type: 'date', dateFormat: 'Y-m-d'},
        {name: 'mov_deber', type: 'float'},
        {name: 'mov_haber', type: 'float'}
    ]);

    /*
     * Creamos el reader para el Grid de movimientos
     */
    GestorCuentas.movimientosGridReader = new Ext.data.JsonReader({
        root: 'data',
        totalProperty: 'total',
        id: 'mov_id'},
        GestorCuentas.movimientoRecord
    );

    /*
     * Creamos el DataProxy para carga remota de los datos
     */
    GestorCuentas.movimientosDataProxy = new Ext.data.HttpProxy({
        url: 'cargaMovimientos.php',
        method: 'POST'
    });

    GestorCuentas.movimientosDataStore = new Ext.data.Store({
        id: 'movimientosDS',
        proxy: GestorCuentas.movimientosDataProxy,
        reader: GestorCuentas.movimientosGridReader
    });

    /*
     * Creamos el modelo de columnas para el grid de movimientos de la cuenta
     */
    GestorCuentas.movimientosColumnMode = new Ext.grid.ColumnModel(
        [{
            header: 'Fecha',
            dataIndex: 'mov_fecha',
            width: 80,
            renderer: Ext.util.Format.dateRenderer('d/m/Y')
        },{
            header: 'Concepto',
            dataIndex: 'mov_concepto',
            width: 200
        },{
            header: 'Haber',
            dataIndex: 'mov_haber',
            width: 90
        },{
            header: 'Deber',
            dataIndex: 'mov_deber',
            width: 90
        }]
    );

    /*
     * Creamos el reader para el formulario de alta/modificación de movimientos
     */
    GestorCuentas.movimientosFormReader = new Ext.data.JsonReader({
        root : 'data',
        successProperty : 'success',
        totalProperty: 'total',
        id: 'mov_id'
        },GestorCuentas.movimientoRecord
    );

    /*
     * Creamos el grid de movimientos
     */
    GestorCuentas.movimientosGrid = new Ext.grid.GridPanel({
        id : 'mov-movimientos-grid',
        store : GestorCuentas.movimientosDataStore,
        cm : GestorCuentas.movimientosColumnMode,
        enableColLock : false,
        width : 750,
        height : 550,
        bbar : new Ext.PagingToolbar({
            pageSize: 20,
            store: GestorCuentas.movimientosDataStore,
            displayInfo: true
        }),
        selModel : new Ext.grid.RowSelectionModel({singleSelect:false})
    });

    /*
     * Creamos el formulario para filtrar el grid
     */
    GestorCuentas.filterForm = new Ext.FormPanel({
        id: 'form-filtro',
        region: 'north',
        split: false,
        frame: true,
        height: 100,
        width: 800,
        items: [{
            xtype: 'datefield',
            width: 200,
            fieldLabel: 'Desde',
            name: 'startdt',
            id: 'startdt',
            vtype: 'daterange',
            endDateField: 'enddt' // id of the end date field
        },{
            xtype: 'datefield',
            width: 200,
            fieldLabel: 'Hasta',
            name: 'enddt',
            id: 'enddt',
            vtype: 'daterange',
            startDateField: 'startdt' // id of the start date field
        }]
    });

    /*
     * Añadimos el botón para borrar el filtro
     */
    GestorCuentas.filterForm.addButton({
        text : 'Borrar filtro',
        disabled : false,
        handler : function() {
            GestorCuentas.filterForm.getForm().reset();
            GestorCuentas.movimientosDataStore.baseParams = {
                dateStart: '',
                dateEnd: ''
            };
            GestorCuentas.movimientosDataStore.load({params: {start:0,limit:20}});
        }
    });

    /*
     * Añadimos el botón para filtrar
     */
    GestorCuentas.filterForm.addButton({
        text : 'Filtrar',
        disabled : false,
        handler : function() {
            var startDate = GestorCuentas.filterForm.findById('startdt').getValue();
            var endDate = GestorCuentas.filterForm.findById('enddt').getValue();

            GestorCuentas.movimientosDataStore.baseParams = {
                dateStart: startDate.dateFormat('Y-m-d'),
                dateEnd: endDate.dateFormat('Y-m-d')
            };
            GestorCuentas.movimientosDataStore.load({params: {start:0,limit:20}});
        }
    });

    /*
     * Creamos el formulario de alta/modificación de movimientos
     */
    GestorCuentas.movForm = new Ext.FormPanel({
        id: 'form-movimientos',
        region: 'west',
        split: false,
        collapsible: true,
        frame: true,
        width: 300,
        minWidth: 300,
        height: 500,
        waitMsgTarget: true,
        reader: GestorCuentas.movimientosFormReader,
        items: [{
            fieldLabel : 'Haber',
            xtype: 'numberfield',
            id: 'frm_mov_haber',
            name : 'mov_haber',
            exclusionPair: 'frm_mov_deber',
            vtype: 'exclusionNotZero',
            allowBlank:false,
            width : 175
        },{
            fieldLabel : 'Deber',
            xtype: 'numberfield',
            id: 'frm_mov_deber',
            name : 'mov_deber',
            exclusionPair: 'frm_mov_haber',
            vtype: 'exclusionNotZero',
            allowBlank:false,
            width : 175
        }, {
            fieldLabel : 'Concepto',
            id: 'frm_mov_concepto',
            name : 'mov_concepto',
            allowBlank:false,
            xtype: 'textarea',
            width : 175,
            height: 225
        }, {
            fieldLabel : 'Fecha',
            id: 'frm_mov_fecha',
            name : 'mov_fecha',
            allowBlank:false,
            xtype: 'datefield',
            renderer: Ext.util.Format.dateRenderer('d/m/Y'),
            width : 175
        }, {
            id: 'frm_mov_id',
            name : 'mov_id',
            xtype: 'hidden'
        }]
    });

    /*
     * Añadimos el botón para borrar el formulario
     */
    GestorCuentas.movForm.addButton({
        text : 'Borrar formulario',
        disabled : false,
        handler : function() {
            GestorCuentas.movForm.getForm().reset();
        }
    });

    /*
     * Añadimos el botón para guardar los datos del formulario
     */
    GestorCuentas.movForm.addButton({
        text : 'Guardar',
        disabled : false,
        handler : function() {
            GestorCuentas.movForm.getForm().submit({
                url : 'salvaMovimientos.php',
                waitMsg : 'Salvando datos...',
                failure: function (form, action) {
                    Ext.MessageBox.show({
                        title: 'Error al salvar los datos',
                        msg: 'Error al salvar los datos.',
                        buttons: Ext.MessageBox.OK,
                        icon: Ext.MessageBox.ERROR
                    });
                },
                success: function (form, request) {
                    Ext.MessageBox.show({
                        title: 'Datos salvados correctamente',
                        msg: 'Datos salvados correctamente',
                        buttons: Ext.MessageBox.OK,
                        icon: Ext.MessageBox.INFO
                    });
                    responseData = Ext.util.JSON.decode(request.response.responseText);
                    GestorCuentas.movForm.getForm().reset();
                    GestorCuentas.movimientosDataStore.load({params: {start:0,limit:20}});
                }
            });
        }
    });

    /*
     * Añadimos el evento doble click en una fila para editar el registro correspondiente
     */
    GestorCuentas.movimientosGrid.on('rowdblclick',function( grid, row, evt) {
        var movRecord = GestorCuentas.movimientosDataStore.getAt(row);
        GestorCuentas.movForm.getForm().load({
            url : 'cargaMovimiento.php',
            method: 'POST',
            params: {
                mov_id: movRecord.data.mov_id
            },
            waitMsg : 'Espere por favor'
        });
    });

    /*
     * Creamos la ventana
     */
    GestorCuentas.contentWindow = new Ext.Window({
            id: 'libro-cuentas',
            title:'Gestor Libro de Cuentas',
            width:860,
            height:600,
            iconCls: 'icon-grid',
            shim:false,
            animCollapse:false,
            constrainHeader:true,
            layout: 'border',
            renderTo: document.body,
            items:[GestorCuentas.filterForm, GestorCuentas.movForm, {
                    id: 'col-grid-movimientos',
                    xtype: 'panel',
                    region: 'center',
                    width: 560,
                    layout: 'fit',
                    items:[GestorCuentas.movimientosGrid]
                }
            ]
    });

    /*
     * Mostramos ventana, la centramos y cargamos los datos iniciales en el grid
     */
    GestorCuentas.contentWindow.show();
    GestorCuentas.contentWindow.center();
    GestorCuentas.movimientosDataStore.load({params: {start:0,limit:20}});
});

Fichero 2: PHP de carga de datos del grid

require_once 'Zend/Loader.php';
Zend_Loader::registerAutoload();

require_once 'Config/ConfigCuentas.php';

$db->setFetchMode(Zend_Db::FETCH_OBJ);

if (!empty($_POST['dateStart']) && !empty($_POST['dateEnd'])) {
    $filterClause = "WHERE (mov_fecha >= '".$_POST['dateStart']."' AND mov_fecha <= '".$_POST['dateEnd']."')";
} else {
    $filterClause = ' ';
}

if (!empty($_POST['limit']) && !empty($_POST['start'])) {
    $limit = $_POST['limit'];
    $start = $_POST['start'];
    $limitClause = "LIMIT $start,$limit";
} else {
    $limitClause = ' ';
}

$query = "SELECT * FROM mov_movimientos $filterClause ORDER BY mov_fecha ASC $limitClause";

$result = $db->fetchAssoc($query);

$resultados = array();

foreach ($result as $record) {
    $resultados[] = $record;
}

$retValue = array (
    'total' => count($result),
    'data' => $resultados
);

echo json_encode($retValue);

Fichero 3: PHP de carga de datos del formulario

require_once 'Zend/Loader.php';
Zend_Loader::registerAutoload();

require_once 'Config/ConfigCuentas.php';

$query = "SELECT * FROM mov_movimientos WHERE mov_id=" . $_POST['mov_id'];

$db->setFetchMode(Zend_Db::FETCH_OBJ);
$result = $db->fetchAssoc($query);

$record = $result[$_POST['mov_id']];

$resultados = array();
$retValue = array (
    'total' => count($result),
    'success'=>true,
    'data' => array (
        array(
            'mov_id' => $_POST['mov_id'],
            'mov_concepto' => $record['mov_concepto'],
            'mov_haber' => $record['mov_haber'],
            'mov_deber' => $record['mov_deber'],
            'mov_fecha' => $record['mov_fecha']
        )
    )
);
echo json_encode($retValue);

Fichero 4: PHP de guardado de datos desde el formulario

require_once 'Zend/Loader.php';
Zend_Loader::registerAutoload();

require_once 'Config/ConfigCuentas.php';

if (is_null($_POST['mov_id']) || empty($_POST['mov_id'])) {
    $query = "INSERT INTO mov_movimientos(mov_fecha,mov_concepto,mov_haber,mov_deber) "
            ."VALUES(STR_TO_DATE('". $_POST['mov_fecha'] ."', '%d/%m/%Y'),'". $_POST['mov_concepto'] ."',".$_POST['mov_haber'].",".$_POST['mov_deber'].")";
} else {
    $query = "UPDATE mov_movimientos SET "
            ."mov_fecha = STR_TO_DATE('". $_POST['mov_fecha'] ."', '%d/%m/%Y'),"
            ."mov_concepto = '" . $_POST['mov_concepto'] ."',"
            ."mov_haber = " . $_POST['mov_haber'] . ","
            ."mov_deber = " . $_POST['mov_deber'] . " "
            ."WHERE mov_id = " . $_POST['mov_id'];
}

$db->setFetchMode(Zend_Db::FETCH_OBJ);
$result = $db->query($query);
$lastInsert = $db->lastInsertId();

$resultados = array();

$retValue = array (
    'total' => count($result),
    'success'=>true,
    'data' => array (
        array(
            'mov_id' => $mov_id
        )
    )
);

echo json_encode($retValue);

A pesar de la comodidad de tener el depurador integrado en el entorno de desarrollo, muchas veces se hace un poco engorroso tener que iniciar una sesión de depuración cada vez que quieres saber qué datos están pasando por tus variables

Pues bien, para facilitar la vida a los desarrolladores tenemos disponible un nuevo complemento para firefox: FirePHP. Este componente nos permite depurar directamente nuestros scripts PHP en la consola del firebug

La herramienta se basa en enviar unas ciertas cabeceras HTTP desde nuestros scripts PHP y que son capturadas por el plugin. De esta forma, la salida de nuestros scripts no se ve alterada (perfecto para llamadas AJAX que devuelvan un XML o un JSON) y ganamos rapidez en la depuración

FirePHP está ganando popularidad rápidamente entre los desarrolladores y de hecho muchos frameworks como Zend Framework o Symphony están incorporando en su API llamadas para depurar con esta herramienta

Si no estamos usando ninguno de estos frameworks, el equipo de desarrollo de FirePHP nos ofrece una pequeña librería en PHP5 que podemos integrar fácilmente en nuestros scripts

Lo primero que tenemos que hacer es instalar la extensión FirePHP en nuestro Firefox. Luego descargamos FirePHPCore, descomprimimos el contenido en el directorio donde estemos almacenando las librerías que usamos y ya sólo nos queda hacer las llamadas pertinentes tal y como se nos explica en este tutorial

Si estamos usando Zend Framework y su Modelo Vista Controlador (MVC) también podemos integrar FirePHPCore de forma fácil, si por un casual no nos gustase el API que nos ofrece el propio framework

Primero registramos el logger en el bootstrap.php de nuestra aplicación:

//Incluímos la librería
require_once('FirePHPCore/FirePHP.class.php');

// Instanciamos el logger y lo registramos
$firebugLogger = FirePHP::getInstance(true);
Zend_Registry::set('firebugLogger',$firebugLogger);

Luego en cualquier parte de nuestro código podemos invocar al logger, como por ejemplo en una acción de un controlador:

    public function indexAction() {
        // Obtenemos la instancia del logger previamente registrada
        // en el bootstrap.php
        $fbLogger = Zend_Registry::get('firebugLogger');

        // Mensajes de log
        $fbLogger->log('Mensaje');
        $fbLogger->info('Mensaje nivel INFO');
        $fbLogger->warn('Mensaje nivel WARNING');
        $fbLogger->error('Mensaje niverl ERROR');

        // Mensaje de log con etiqueta adicional
        $fbLogger->log('Mensaje','Etiqueta Opcional');

        // Podemos mostrar una tabla de datos
        $table   = array();
        $table[] = array('Columna 1','Columna 2');
        $table[] = array('1:1','1:2');
        $table[] = array('2:1','2:2');
        $table[] = array('3:1','3:2');
        $fbLogger->table('Tabla de datos', $table);  // or FB::

        // También podemos mostrar información de traza
        $fbLogger->trace('Trace Label');
    }

Aquí podemos ver cómo queda la salida en la consola del Firebug: