La conferencia pretende ser un punto de encuentro entre todos los usuarios de Ext JS, aunque también se aprovechará para hablar de las novedades que el equipo de Ext JS nos tiene preparadas: Ext JS 3.0, Ext GWT 2.0 y Ext Core 1.0.

El precio de la subscripción es de 250$ y si decides hacer noche en el hotel los organizadores han conseguido pactar un precio de 149$ la noche.

La conferencia se ha dividido en 24 sesiones en las que se tratarán diversos temas: novedades en los frameworks, optimización de rendimiento, buenas prácticas en el código, etc. pasando incluso por una sesión dedicada a javascript básico y temas Web 2.0 en general.

Parece ser que Ext JS 3.0 viene cargado de novedades y no sólo estamos hablando de nuevos widgets, sino funcionalidades pensadas a mejorar la estructuración del código y facilitar la integración con servicios de datos.

Os mantendremos informados. De momento podéis consultar más información en los siguientes enlaces:

• http://extjs.com/products/extjs/roadmap.php
• http://www.extjs.com/conference/
• http://extjs.com/blog/2009/02/03/ext-conference-2009/
• http://extjs.com/conference/sessions/

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'
        });
    });

En el API de ExtJS podemos comprobar que cuando asignamos una función al evento ‘rowdbclick’ vamos a recibir tres parámetros: el grid que ha generado el evento, el índice del registro dentro del store y un objeto con datos adicionales del evento

Para quedarnos con el registro, sólo tenemos que solicitarle al store del grid que nos devuelva aquel cuyo índice hemos recibido por parámetro

var movRecord = GestorCuentas.movimientosDataStore.getAt(row);

Ahora en movRecord tendremos el registro y podremos acceder a sus datos para quedarnos con el identificador del registro. Fijáos que en la definición del record del grid hemos incluído la Primary Key del registro en base de datos, aunque no lo estemos mostrando en el propio grid

Fijáos que el formulario que vamos a cargar tiene asignado un reader, de forma que podemos llamar al método load() del mismo para que automáticamente cargue los datos. Obviamente hay que indicarle que registro se va a cargar por lo que le pasamos como parámetro el mov_id del registro que hemos pedido al store

La instancia del formulario se la pedimos al FormPanel mediante el método getForm(). Esto nos devuelve un objeto Ext.form.BasicForm. Este método tiene un método load() al que le pasamos la configuración necesaria para hacer la carga

    GestorCuentas.movForm.getForm().load({
            url : 'cargaMovimiento.php',
            method: 'POST',
            params: {
                // OJO, los datos del registro están en movRecord.data y no directamente en movRecord como podría pensarse
                mov_id: movRecord.data.mov_id
            },
            waitMsg : 'Espere por favor'
        });

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:

Realmente la definición de un formulario que haga su carga de datos y guardado mediante Ajax, no dista mucho de la definición de un grid.

Lo primero que hacemos es definir el registro que contendrá nuestros datos. Como se puede ver en este ejemplo hemos utilizado la misma definición de registro.

    var categoriesRecord = new Ext.data.Record.create([
        {name: 'cad_id', type: 'int'},
        {name: 'cad_name', type: 'string'},
        {name: 'cad_description', type: 'string'}
    ]);

Para la carga de datos y respuestas del servidor, definimos también un reader (al igual que en los grids). Para este ejemplo vamos a seguir utilizando la codificación JSON, aunque podríamos haber elegido un reader XML

    var categoriesFormReader = new Ext.data.JsonReader(
            {
                root : 'data',
                successProperty : 'success',
                totalProperty: 'total',
                id: 'cad_id'
            },categoriesRecord
    );

Como vemos, su definición es prácticamente igual que en el caso del reader del grid, salvo que en esta ocasión hay que definir una propiedad ‘successProperty’ en la respuesta JSON que nos indique si ha tenido éxito o no la operación

Otra novedad respecto al grid, es que podemos indicar a un form desde el servidor si hubo algún error en algún campo. Esto lo podemos utilizar para hacer verificacion de campos en servidor (comprobar duplicados, caracteres no permitidos, etc.). Para ello se define una nueva clase que hereda de JsonReader: JsonErrorReader

Ext.form.JsonErrorReader = function() {
    Ext.form.JsonErrorReader.superclass.constructor.call(this, {
        root : 'data',
        successProperty : 'success',
        totalProperty: 'total'
     },
     [
        {name: 'id'},
        {name: 'msg'}
     ]);
    };

Podemos ver que en este caso, en la definición del reader se cambia el registro por otro nuevo con sólo dos campos: ‘id’ y ‘msg’. En ‘id’ vendrá el identificador del campo en el que hay un error y en ‘msg’ vendrá el error para ese campo. Es importante que activemos los mensajes superpuestos mediante la línea Ext.QuickTips.init();

La definición del form es sencilla. Como en cualquier otro panel, en la propiedad ‘items’ vamos a introducir el array con todos los componentes del formulario, en este campos (texto, áreas de texto, combos, radios, etc.)

var formCategories = new Ext.FormPanel({
        frame : true,
        width : 624,
        height: 346,
        waitMsgTarget : true,
        reader: categoriesFormReader,
        errorReader: new Ext.form.JsonErrorReader(),
        items : [{
                fieldLabel : 'Categoría',
                xtype: 'textfield',
                name : 'cad_name',
                allowBlank:false,
                width : 430
            }, {
                fieldLabel : 'Descripción',
                name : 'cad_description',
                allowBlank:false,
                xtype: 'textarea',
                width : 430,
                height: 225
            }, {
                fieldLabel : 'Fecha',
                name : 'cad_date',
                allowBlank:false,
                xtype: 'datefield',
                renderer: Ext.util.Format.dateRenderer('d/m/Y'),
                width : 430
            }, {
                name : 'cad_id',
                xtype: 'hidden'
            }],
    });

Acto seguido, vamos a añadir un botón. Esta vez en vez de indicarlo en el array de configuración, vamos a utilizar el método addButton y vamos a añadirle un poco de funcionalidad

    var submitFormCategories = formCategories.addButton({
        text : 'Guardar',
        disabled : false,
        handler : function() {
            formCategories.getForm().submit({
                url : 'formSaver.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);
                    formCategories.getForm().load({
                        url : 'formLoader.php',
                        method: 'GET',
                        params: {
                            cat_id: responseData.cat_id
                        },
                        waitMsg : 'Espere por favor'
                    });
                }
            });
        }
    });

En el handler vemos que realizamos una llamda a la función formCategories.getForm().submit(), a la cual le pasamos un array de configuración. Esta llamada lo que hace es llamar al envío del formulario. Éste se configura pasándole una función para el manejo de error, una función para el manejo de una operación correcta y la URL de actualización.

El código todo unido quedaría de la siguiente forma

Ext.onReady(function() {
	Ext.QuickTips.init();
	/*
     * Creamos el registro de datos
     */
    var categoriesRecord = new Ext.data.Record.create([
        {name: 'cad_id', type: 'int'},
        {name: 'cad_name', type: 'string'},
        {name: 'cad_date', type: 'date', dateFormat: 'Y-m-d'},
        {name: 'cad_description', type: 'string'}
    ]);

	var categoriesFormReader = new Ext.data.JsonReader(
            {
                root : 'data',
                successProperty : 'success',
                totalProperty: 'total',
                id: 'cad_id'
            },categoriesRecord
    );

	Ext.form.JsonErrorReader = function() {
    Ext.form.JsonErrorReader.superclass.constructor.call(this, {
        root : 'data',
        successProperty : 'success',
        totalProperty: 'total'
     },
     [
        {name: 'id'},
        {name: 'msg'}
     ]);
    };

    Ext.extend(Ext.form.JsonErrorReader, Ext.data.JsonReader);

    var formCategories = new Ext.FormPanel({
        frame : true,
        width : 624,
        height: 346,
        waitMsgTarget : true,
        reader: categoriesFormReader,
        errorReader: new Ext.form.JsonErrorReader(),
        items : [{
                fieldLabel : 'Categoría',
                xtype: 'textfield',
                name : 'cad_name',
                allowBlank:false,
                width : 430
            }, {
                fieldLabel : 'Descripción',
                name : 'cad_description',
                allowBlank:false,
                xtype: 'textarea',
                width : 430,
                height: 225
            }, {
                fieldLabel : 'Fecha',
                name : 'cad_date',
                allowBlank:false,
                xtype: 'datefield',
                renderer: Ext.util.Format.dateRenderer('d/m/Y'),
                width : 430
            }, {
                name : 'cad_id',
                xtype: 'hidden'
            }],
    });

    var submitFormCategories = formCategories.addButton({
        text : 'Guardar',
        disabled : false,
        handler : function() {
            formCategories.getForm().submit({
                url : 'formSaver.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);
                    formCategories.getForm().load({
                        url : 'formLoader.php',
                        method: 'GET',
                        params: {
                            cat_id: responseData.cat_id
                        },
                        waitMsg : 'Espere por favor'
                    });
                }
            });
        }
    });

    var windowForm = new Ext.Window({
        closable: true,
        resizable: true,
        modal: false,
        border: true,
        plain: true,
        closeAction: 'hide',
        title: 'Layout Tab',
        width: 640,
        height: 380,
        renderTo: 'divRender',
        items: [formCategories]
    });

    formCategories.getForm().load({
        url : 'formLoader.php',
        method: 'GET',
        params: {
            cat_id: 1
        },
        waitMsg : 'Espere por favor'
    });
    windowForm.show();
});

Introduciendo un combo como campo

El tratamiento de un combo requiere un poco más de trabajo. En este caso vamos a introducir el combo en el formulario como un objeto independiente.

    var categoriesComboWebs = new Ext.form.ComboBox({
        fieldLabel: 'Web',
        hiddenName: 'cad_web', // Este campo es importante, sin él no funciona el combo
        store: new Ext.data.SimpleStore({
            fields: ['cad_web', 'cad_web_text'],
            data : websData,
            id: 0
        }),
        valueField: 'cad_web',
        displayField: 'cad_web_text',
        typeAhead: true,
        mode: 'local',
        triggerAction: 'all',
        emptyText: 'Seleccione una web...',
        selectOnFocus: true,
        width: 430
    });

En este caso hemos hecho que el combo sea local, y que los datos los saque de un Array. Para ello, hemos definido el store del mismo como un Ext.data.SimpleStore. En la propiedad data, hemos indicado cual es la variable javascript que contiene los valores a utilizar, y debe contener valores de la siguiente forma:

var websData = [
        ['1','http://www.3megapixels.com'],
        ['2','http://www.desarrollosweb.net'],
        ['3','http://www.axena.org'],
        ['4','http://www.javiercaride.es']
    ];

Una propiedad importante, para que cuando carguemos los datos se seleccione bien el elemento del combo correspondiente y que además se envíe al servidor la variable correcta, es ‘hiddenName’. Debe estar inicializada al valor del registro que contiene la información, en este caso cad_web

Grid básico

En los grids tenemos que distinguir 3 partes importantes:

• El store de datos
• El modelo de datos de las columnas
• La definición del grid en sí

El store de datos, es el objeto que se encarga de almacenar los datos que se van a mostrar en el grid. Básicamete se tratan de arrays de datos, pero su particularidad es que pueden leer los datos desde diversas fuentes:

• Estáticas: ficheros XML o variables de tipo array
• Dinámicas: servicios de datos XML o JSON

En la definición de un store tenemos que tener en cuenta dos aspectos importantes: el formato de los datos, que nos va a indicar qué tipo de reader necesitamos configurar y si el origen de dato es remoto, configurar el proxy de lectura de datos

El modelo de datos de las columnas nos define qué datos se van a mostrar en el grid, con qué formato, y de donde se extraen los datos. Hay que tener en cuenta que aunque en un registro se lean muchos campos, podemos elegir cuales mostrar y cuales no.

Pasos para configurar un grid

Primero definimos el formato de cada registro, aquí configuramos cuantos campos hay y de que tipo

    /*
     * Creamos el registro de datos
     */
    var categoriesRecord = new Ext.data.Record.create([
        {name: 'cad_id', type: 'int'},
        {name: 'cad_name', type: 'string'},
        {name: 'cad_date', type: 'date', dateFormat: 'Y-m-d'},
        {name: 'cad_description', type: 'string'}
    ]);

Después, configuramos el lector de datos. Como se dijo antes, el lector de datos será diferente dependiendo del formato de los datos que obtengamos. En este caso estamos definiendo que los datos nos vendrán codificados en JSON

    /*
     * Creamos el reader de datos
     */
    var categoriesGridReader = new Ext.data.JsonReader({
        root: 'data',
        totalProperty: 'total',
        id: 'cad_id'},
        categoriesRecord
    );

La configuración del reader es fácil de entender:

• Mediante el campo root, indicamos la etiqueta bajo la que llegarán los datos, en este caso ‘data’
• El campo totalProperty nos indica en qué etiqueta nos llega el número total de registros
• El campo id, nos indica en qué campo nos llega la identificación del registro

Una vez tenemos configurado el registro y el reader, definimos el proxy de datos (para una carga remota de los mismos).

    /*
     * Creamos el proxy para lectura remota de datos
     */
    var categoriesDataProxy = new Ext.data.HttpProxy({
        url: 'scripts/categoriesService.php',   // Servicio web
        method: 'POST'                          // Método de envío
    });

En este caso, vemos que la carga la hacemos a través de un script php.El cual nos debe devolver un JSON como el siguiente:

{
    "total":3,
    "data":[
        {
            "cad_id":1,
            "cad_name":"Categoría 1",
            "cad_description":"Descripción de la primera categoría",
            "cad_date": "2008-10-01"
        },{
            "cad_id":2,
            "cad_name":"Categoría 2",
            "cad_description":"Descripción de la segunda categoría",
            "cad_date": "2008-10-11"
        },{
            "cad_id":3,
            "cad_name":"Categoría 3",
            "cad_description":"Descripción de la tercera categoría",
            "cad_date": "2008-10-20"
        },{
            "cad_id":4,
            "cad_name":"Categoría 4",
            "cad_description":"Descripción de la cuarta categoría",
            "cad_date": "2008-10-21"
        },
    ]
}

Para ello, el php de prueba tiene este contenido

$retValue = array(
    'total' => 4,
    'data' => array(
        array(
            'cad_id' => 1,
            'cad_name' => 'Categoría 1',
            'cad_description' => 'Descripción de la primera categoría',
            'cad_date' => '2008-10-01'
        ),
        array(
            'cad_id' => 2,
            'cad_name' => 'Categoría 2',
            'cad_description' => 'Descripción de la segunda categoría',
            'cad_date' => '2008-10-11'
        ),
        array(
            'cad_id' => 3,
            'cad_name' => 'Categoría 3',
            'cad_description' => 'Descripción de la tercera categoría',
            'cad_date' => '2008-10-20'
        ),
        array(
            'cad_id' => 4,
            'cad_name' => 'Categoría 4',
            'cad_description' => 'Descripción de la cuarta categoría',
            'cad_date' => '2008-10-21'
        )
    )
);
echo json_encode($retValue);

En el caso de scripts php, primero hay que crear en un array la estructura que queramos devolver y después codificar mediante al función json_encode (PHP5), o bien (en PHP4) utilizar la librería de codificación JSON que provee PEAR

Hay que tener en cuenta una cosa JSON, trabaja únicamente en UTF-8, por lo que si los datos los extraemos por ejemplo de una base de datos configurada en ISO-8859-1, HAY QUE CONVERTIRLOS A UTF-8, obligatoriamente.

Ahora ya tenemos todos los elementos necesarios para configurar el store del grid:

    /*
     * Creamos el datastore donde se van a almacenar los datos de la tabla
     */
    var categoriesDataStore = new Ext.data.Store({
        id: 'categoriesDS',
        //Indicamos de donde se va a leer los datos, en este caso un servicio web
        proxy: categoriesDataProxy,
        // Parámetros base que se enviarán al script
        baseParams: {
            language: "es_ES"
        },
        // Indicamos el reader, es decir el procesador de los datos
        reader: categoriesGridReader
    });

Ya por último, antes de definir el grid en sí, definimos cuales van a ser nuestras columnas, su tipo, ancho, etc.

    var categoriesColumnMode = new Ext.grid.ColumnModel(
        [{
            header: '#',
            dataIndex: 'cad_id',
            width: 50,
            hidden: false
        },{
            header: 'Categoría',
            dataIndex: 'cad_name',
            width: 150
        },{
            header: 'Descripción',
            dataIndex: 'cad_description',
            width: 300
        },{
            header: 'Fecha',
            dataIndex: 'cad_date',
            width: 90,
            renderer: Ext.util.Format.dateRenderer('d/m/Y')
        }]
    );

Ahora ya tenemos todos los elementos necesarios para configurar el grid:

    var categoriesGrid = new Ext.grid.GridPanel({
        id: 'cat_categoriesGrid',
        store: categoriesDataStore,
        cm: categoriesColumnMode,
        enableColLock:false,
        selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
    });

Sólo nos falta poner todo dentro de un bloque Ext.onReady y definir una ventana para poder visualizar el grid.

Grid editable

Además de los grids básicos, ExtJS permite definir grids en los que se puedan editar valores. Para convertir un grid no editable a uno editable, tenemos que hacer cambios en dos lugares: en el ColumnModel y en la definición del grid En el Column mode, hay que incluir una etiqueta ‘editor’ en aquellas columnas que queramos hacer editables. En esta etiqueta los que se pone es la definición de un campo editable cuyo objeto puede ser cualquiera de los que hay disponibles para los formularios (cajas de texto, combos, fechas, tiempo…)

    var categoriesColumnMode = new Ext.grid.ColumnModel(
        [{
            header: '#',
            dataIndex: 'cad_id',
            width: 50,
            hidden: false
        },{
            header: 'Categoría',
            dataIndex: 'cad_name',
            width: 150,
            editor: new Ext.form.TextField({})

        },{
            header: 'Descripción',
            dataIndex: 'cad_description',
            width: 300,
            editor: new Ext.form.TextField({})
        },{
            header: 'Fecha',
            dataIndex: 'cad_date',
            width: 90,
            renderer: Ext.util.Format.dateRenderer('d/m/Y'),
            editor: new Ext.form.DateField({})
        }]
    );

La modificación del grid es “más fácil”. En este caso sólo hay que heredar de otra clase distinta: EditorGridPanel

    var categoriesGrid = new Ext.grid.EditorGridPanel({
        id: 'cat_categoriesGrid',
        store: categoriesDataStore,
        cm: categoriesColumnMode,
        enableColLock:false,
        selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
    });

Al ejecutar el ejemplo, podemos ver que al hacer doble click en cualquiera de los campos editables, se nos permite cambiar el valor del campo y que dicho cambio queda marcado en la esquina superior izquierda con un pequeño icono rojo

Tratando los cambios en un grid editable

De nada nos sirve tener un grid editable si no tratamos los datos, pues todos los cambios que se hagan en un grid editable son cambios en el store local.

ExtJS no ofrece ningún mecanismo para automatizar el guardado de datos, dejando a elección del programador la elección del método. Por ejemplo, podemos hacer actualizaciones campo a campo, capturando el evento de cambio de una celda, o bien podemos enviar todos los cambios de una vez mediante la acción en algún botón o componente

Qué método utilizar queda a elección del desarrollador según las circunstancias en las que se encuentre. En este caso vamos a explicar cómo se haría un envío de todos los cambios. Para ello vamos a coger el ejemplo anterior y primeramente añadir un botón de actualización de cambio situado en una barra de herramientas superior

    var categoriesGridTopbar = new Ext.Toolbar({
        id: 'categoriesGridTopbarId',
        items: [
            '->',
            {
                xtype:'button',
                text:'Guardar Cambios',
                id: 'portadas_ToolbarTop_btn0',
                handler:categoriesGridTopbarHnd,
                type:'button'
            }
        ]
    });

Como se puede ver, se a asignado un handler al botón, que será el que tenderá la petición de guardado de cambios y que contendrá toda la lógica de actualización

En el handler, lo que hemos hecho es crear una llamada Ajax que envíe al servidor todos los cambios, para ello se pide al store un array con todos los registros que han cambiado, se recorre y se almacena en un array los datos necesarios para enviar. Este array se codifica en JSON y se envía como una variable POST normal. Después es tarea del script php (o Java, o lo que sea) de tratar el array de cambios y realizar las actualizaciones pertinentes.

    var failureAjaxFn = function(response, request) {
        Ext.Msg.show({
            title: 'Error',
            msg: 'Cambios no guardados. Status:' + response.status,
            buttons: Ext.Msg.OK,
            animEl: 'elId',
            icon: Ext.MessageBox.ERROR
        });
    }

    var successAjaxFn = function(response, request) {
        /*
         * En response.responseText tenemos la respuesta del script, en este caso
         * la salida del script PHP es JSON con lo que tenemos que decodificarlo
         */
        var jsonData = Ext.util.JSON.decode(response.responseText);

        if (true == jsonData.success) {
            Ext.Msg.show({
                title: 'Operación completada',
                msg: jsonData.message,
                buttons: Ext.Msg.OK,
                animEl: 'elId',
                icon: Ext.MessageBox.INFO
            });

            /*
             * PASO IMPORTANTE
             * Para indicar al store que los cambios se han realizado correctamente
             * y eliminar los indicadores de que hay cambios pendientes de guardar
             * hay que llamar
             */
            categoriesDataStore.commitChanges();

        } else {
            Ext.Msg.show({
                title: 'Error',
                msg: jsonData.message,
                buttons: Ext.Msg.OK,
                animEl: 'elId',
                icon: Ext.MessageBox.ERROR
            });
        }
    }
var categoriesGridTopbarHnd = function (e,o) {
    	/*
    	 * Pedimos al store que nos devuelva los registros modificados
    	 */
        var modifiedRecords = categoriesDataStore.getModifiedRecords()

        if (modifiedRecords.length > 0) {
        	/*
             * Creamos un array con los datos de los registros que han cambiado
             */
        	var changes = new Array();
            for (var i=0; i < modifiedRecords.length; i++){
                changes.push(modifiedRecords[i].data);
            }

            /*
             * Codificamos los cambios en JSON
             */
            changes = Ext.util.JSON.encode(changes);

            Ext.Ajax.request({
                url: 'salvarDatos.php',
                method: 'POST',
                success: successAjaxFn,
                failure: failureAjaxFn,
                timeout: 30000,
                params: {
                    operation: 'update',
                    changes: changes
                }
            });
        }
    }

Grids paginados

Uno de las barras de herramientas más utilizadas con los grids es la de paginación. Su utilización es
bastante sencilla. Primero creamos la barra de paginación:

    var categoriesPagingBar = new Ext.PagingToolbar({
        pageSize: 10,
        store: categoriesDataStore,
        displayInfo: true
    });

Su uso es sencillo, sólo tenemos que indicar cual es el store, y el tamaño de página. Después de definirlo
se lo asociamos al grid, para lo que sólo tenemos que indicar en la configuración
lo siguiente “bbar: categoriesPagingBar”:

    var categoriesGrid = new Ext.grid.EditorGridPanel({
        id: 'cat_categoriesGrid',
        store: categoriesDataStore,
        cm: categoriesColumnMode,
        enableColLock:false,
        tbar: categoriesGridTopbar,
        bbar: categoriesPagingBar,
        selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
    });

Después en la carga inicial de datos, indicamos que queremos cargar la primera página de resultados
y el número de ellos

categoriesDataStore.load({params: {start: 0, limit: 10}});

Y después de esto ya no nos tenemos que preocupar de nada más, pues cada vez que hagamos click en los botones el store nos enviará dos variables nuevas: start y limit, al estilo de las paginaciones clásicas

Como la mayoría de los contenedores, Ext.Tabpanel deriva de Ext.Panel, con lo que hereda todas sus funcionalidades básicas. Realmente se comporta como un panel en el que el contenido se puede dividir en varios tabs, donde cada uno de ellos es un panel con su correspondiente layout

Ventanas

También Ext.Window deriva de Ext.Panel, y como cualquier contenedor puede contener otros elementos de ExtJS: sólo tienen que incluirse en el bloque ‘items’. En el ejemplo vemos cómo incluir dentro de una ventana un Ext.Tabpanel.

Además aprovechamos para ver que en el bloque items no es obligatorio definir los componentes que queremos introducir, sino que se pueden incluir los nombres de los objetos definidos aparte. De esta forma, cuando tenemos muchos componentes encadenados se mejora la legibilidad del código, aunque, hay que tener cuidado de que los objetos que añadimos estén definidos en el ámbito (scope) de nuestro objeto.

Ext.onReady(function () {
	var backendViewport = new Ext.Panel({
        layout: 'fit',
        width: 625,
        height: 448,
        border: false,
        items: [{
            xtype: 'tabpanel', // En vez de instanciar directamente el objeto, utilizamos la notación del xtype
            height: 450,
            bodyStyle: 'padding:10px',
            activeTab: 0,
            enableTabScroll:true,
            plain: true,
            items: [{
                xtype: 'panel',
                title: 'Tab #1',
                layout: 'fit',
                items: [{
                    /*
                    * Panel con layout 'column'
                    */
                    xtype: 'panel',
                    layout:'column',
                    items: [{
                        title: 'Col 1',
                        columnWidth: .333
                    },{
                        title: 'Col 2',
                        columnWidth: .333
                    },{
                        title: 'Col 3',
                        columnWidth: .333
                    }]
                }]
            },{
                xtype: 'panel',
                title: 'Tab #2',
                layout: 'form',
                width: 300,
                minWidth: 300,
                autoScroll: true,
                split: true,
                items: [{
                        xtype: 'hidden',
                        id: 'gal_id_hidden',
                        name: 'gal_id'
                    },{
                        xtype: 'textfield',
                        name: 'gal_cat_id',
                        anchor: '90%',
                        fieldLabel: 'Categoría'
                    },{
                        xtype: 'textfield',
                        name: 'gal_weight',
                        anchor: '90%',
                        fieldLabel: 'Peso Galería'
                    },{
                        xtype: 'datefield',
                        name: 'gal_date',
                        anchor: '90%',
                        fieldLabel: 'Fecha Alta'
                    },{
                        xtype: 'textfield',
                        name: 'gal_relative_path',
                        anchor: '90%',
                        fieldLabel: 'Directorio'
                    },{
                        xtype: 'textfield',
                        name: 'gal_pho_id',
                        anchor: '90%',
                        fieldLabel: 'Imágen representativa'
                    }
                ]
            },
            {
                xtype: 'panel',
                title: 'Tab #3',
                layout: 'accordion',
                layoutConfig: {
                    titleCollapse: false,
                    animate: false,
                    activeOnTop: false
                },
                items: [{
                    title: 'Subpanel 1',
                    html: 'Contenido subpanel 1'
                },{
                    title: 'Subpanel 2',
                    html: 'Contenido subpanel 2'
                },{
                    title: 'Subpanel 3',
                    html: 'Contenido subpanel 3'
                }]
            }]
        }
        ]
    });

	var windowExample = new Ext.Window({
	    closable: true,
	    resizable: true,
	    modal: false,
	    border: true,
	    plain: true,
	    closeAction: 'hide',
	    title: 'Ventana con paneles',
	    width: 640,
	    height: 480,
	    renderTo: 'divRender',
	    /*
	     * Aprovechamos para ver otro tipo de asignación de items,
	     * en vez de definirlos en el bloque 'items' lo asignamos
	     * desde una variable
	     */
	    items: [backendViewport]
	});

	windowExample.show();
});

Podéis ver el ejemplo en el siguiente enlace

Ext.onReady(function() {
    var backendViewport = new Ext.Viewport({
        layout: 'fit',
        items: [{
            /*
             * Panel tipo accordion
             */
            region: 'center',
            xtype: 'panel',
            layout: 'accordion',
            defaults: {
                bodyStyle: 'padding:15px'
            },
            layoutConfig: {
                titleCollapse: false,
                animate: false,
                activeOnTop: false
            },
            items: [{
                title: 'Subpanel 1',
                html: 'Contenido subpanel 1'
            },{
                title: 'Subpanel 2',
                html: 'Contenido subpanel 2'
            },{
                title: 'Subpanel 3',
                html: 'Contenido subpanel 3'
            }]
        }]
    });
});

En el viewport también tenemos disponibles los mismos layouts que para Ext.Panel, con lo que podemos generar aplicaciones a pantalla completa igual de complejas que con un Ext.Panel, por ejemplo aplicándole el layout ‘border’.

En el siguiente ejemplo, podéis ver la misma distribución en pantalla que en el ejemplo anterior, con la salvedad de que hemos instanciado un Ext.Viewport en lugar de un Ext.Panel

Básicamente, un Ext.Panel es una región rectangular en la que podemos insertar otros componentes. Además de eso un panel puede contener una barra de herramientas superior, otra inferior, botones, etc. además de ciertos métodos que ayudan a su manejo. Como siempre, la mejor forma de ver todas las propiedades y métodos disponibles es consultar el API de ExtJS

Los contenedores Ext.Panel, admiten diversos ‘layouts’, es decir, configuraciones visuales para incluir los distintos componentes en su interior. Aunque existe una gran variedad de layouts (ver API de ExtJS, sección Ext.Layout), los más utilizados en aplicaciones son los siguientes:

• Layout ‘border’: divide el panel en 5 subpaneles (norte, sur, este, oeste y central)
• Layout ‘accordion’: divide el panel verticalmente en distintos paneles, pero sólo uno puede ser mostrado a la vez
• Layout ‘form’: configuración pensada especialmente para alojar formularios
• Layout ‘fit’: mediante esta configuración todos los elementos que contenga el panel se ajustarán en ancho y alto para ocupar el tamaño del panel
• Layout ‘column’: permite distribuir el/los contenidos en columnas

En el siguiente ejemplo podemos ver una composición de Ext.Panel relativamente compleja. En primer lugar tenemos un Ext.Panel con un layout ‘border’, que es el que contiene a todos los demás

• En la región norte (region: ‘north’) tenemos únicamente un contenido html decorado por CSS
• En la región central (region: ‘center’) hemos colocado un Ext.Panel con layout ‘accordion’, conteniendo a su vez 3 subpaneles
• En la región izquierda (region: ‘west’) tenemos un formulario, o lo que es lo mismo un Ext.Panel con layout ‘form’
• Por último en la región derecha (region: ‘east’) tenemos un panel con layout column

Como podéis ver en el ejemplo componer la aplicación con Ext.Panel no es más que configurarlos de forma que se adapten a lo que buscamos visualmente

Ext.onReady(function() {
	/**
	 * Panel principal, con layout border
	 */
    var backendViewport = new Ext.Panel({
    	layout: 'border',
        renderTo: 'divRender',
        width: 800,
        height: 600,
        items: [{
            region: 'north',
            xtype: 'panel',
            autoHeight: true,
            border: false,
            margins: '0 0 5 0',
            html: '
Test

'
        },{
        	/*
        	 * Panel tipo accordion
        	 */
            region: 'center',
            xtype: 'panel',
            layout: 'accordion',
            defaults: {
                bodyStyle: 'padding:15px'
            },
            layoutConfig: {
                titleCollapse: false,
                animate: false,
                activeOnTop: false
            },
            items: [{
                title: 'Subpanel 1',
                html: 'Contenido subpanel 1'
            },{
                title: 'Subpanel 2',
                html: 'Contenido subpanel 2'
            },{
                title: 'Subpanel 3',
                html: 'Contenido subpanel 3'
            }]
        },{
        	/*
        	 * Panel con layout 'form'
        	 */
            region: 'west',
            collapsible: true,
            title: 'Panel izquierdo',
            xtype: 'panel',
            layout: 'form',
            width: 300,
            minWidth: 300,
            autoScroll: true,
            split: true,
            items: [{
                    xtype: 'hidden',
                    id: 'gal_id_hidden',
                    name: 'gal_id'
                },{
                    xtype: 'textfield',
                    name: 'gal_cat_id',
                    anchor: '90%',
                    fieldLabel: 'Categoría'
                },{
                    xtype: 'textfield',
                    name: 'gal_weight',
                    anchor: '90%',
                    fieldLabel: 'Peso Galería'
                },{
                    xtype: 'datefield',
                    name: 'gal_date',
                    anchor: '90%',
                    fieldLabel: 'Fecha Alta'
                },{
                    xtype: 'textfield',
                    name: 'gal_relative_path',
                    anchor: '90%',
                    fieldLabel: 'Directorio'
                },{
                    xtype: 'textfield',
                    name: 'gal_pho_id',
                    anchor: '90%',
                    fieldLabel: 'Imágen representativa'
                }
            ],
            buttons:[{
                text: 'Enviar'},
            {
                text: 'Cancelar'
            }]
        },{
        	/*
             * Panel con layout 'fit'
             */
            region: 'east',
            collapsible: true,
            title: 'Panel derecho',
            xtype: 'panel',
            layout: 'fit',
            width: 250,
            items: [{
            	/*
                * Panel con layout 'column'
                */
            	xtype: 'panel',
                layout:'column',
                items: [{
                    title: 'Col 1',
                    columnWidth: .333
                },{
                    title: 'Col 2',
                    columnWidth: .333
                },{
                    title: 'Col 3',
                    columnWidth: .333
                }]
            }]
        }]
    });
});

]]> http://www.desarrollosweb.net/2008/11/13/contenedores-en-extjs-extpanel/feed/ 0 http://www.desarrollosweb.net/2008/11/13/introduciendo-extjs-llamadas-ajax/ http://www.desarrollosweb.net/2008/11/13/introduciendo-extjs-llamadas-ajax/#comments Thu, 13 Nov 2008 07:48:55 +0000 Javier Caride http://www.desarrollosweb.net/?p=26 ExtJS facilita una colección de objetos para manejar las llamadas Ajax. Su utilización es bastante sencilla y a todos aquellos desarrolladores que hayan utilizado jQuery, les sonará la sintaxis.

En el ejemplo podemos ver que a la llamada ajax se le pueden asignar dos funciones, una para cuando la llamada Ajax se ha ejecutado con éxito, y otra para cuando hubo algún error en la llamada.

Sobre los errores hay que realizar una pequeña aclaración. Una cosa son los errores de la llamada (un timeout en la llamada, un error 404, un error 500 en el servidor, etc.) de los errores que la lógica de nuestro programa quiera comunicar a la aplicación ExtJS.

Los primeros entrarán a traves de la función asignada a la propiedad failure, mientras que las llamadas que se han realizado correctamente (ya nos quieran comunicar un error o un éxito) a través de la función asignada al ‘success’, pues la llamada ha tenido éxito.

Lo mejor para entender como funcionan las llamadas Ajax en ExtJS es ver el siguiente ejemplo comentado:

Ext.onReady(function() {
    /*
     * Funcion que se ejecuta cuando hay un error al realizar la llamada Ajax
     */
    var failureAjaxFn = function(response, request) {
    	// Nos quedamos con el divEjemplo
        var objDiv = Ext.get('divEjemplo');

        // Construimos el mensaje de error con datos de la petición y la respuesta
        var errMessage = 'Error en la petición ' + request.url + ' '
                       + ' status ' + response.status + ''
                       + ' statusText ' + response.statusText + ''
                       + ' responseText ' + response.responseText + '';

        // Modificamos el contenido del div
        objDiv.update(errMessage);
        objDiv.replaceClass('backgroundYellow','backgroundRed');
    }

    /*
     * Funcion que se ejecuta cuando la llamada Ajax se realiza correctamente
     */
    var successAjaxFn = function(response, request) {
    	/*
    	 * En response.responseText tenemos la respuesta del script, en este caso
    	 * la salida del script PHP es JSON con lo que tenemos que decodificarlo
    	 */
        var jsonData = Ext.util.JSON.decode(response.responseText);

        // Nos quedamos con el divEjemplo
        var objDiv = Ext.get('divEjemplo');

        /*
         * Al decodificar el JSON, tenemos un objeto javascript. En función del
         * valor de la variable booleana 'success' (que nos indica si la acción
         * que tenía que realizar el script ha tenido éxito o no) realizamos
         * una u otra operación.
         */

        if (true == jsonData.success) {
            objDiv.update(jsonData.data.message + ' desde ' + request.url);
            objDiv.replaceClass('backgroundYellow',jsonData.data.cssClass);
        } else {
            Ext.get('divEjemplo').update(jsonData.data.message + ' desde ' + request.url);
            objDiv.replaceClass('backgroundYellow',jsonData.data.cssClass);
        }
    }

    /*
     * Handler del evento click realizado sobre el div
     */
    var eventHandlerClick = function(event) {
        // Mostramos mensaje de cargando
        var objDiv = Ext.get('divEjemplo');
        if (objDiv.hasClass('backgroundBlue'))
            objDiv.replaceClass('backgroundBlue','backgroundYellow');
        else if (objDiv.hasClass('backgroundRed'))
            objDiv.replaceClass('backgroundRed','backgroundYellow');
        else
            objDiv.replaceClass('backgroundGreen','backgroundYellow');
        Ext.get('divEjemplo').update('Realizando llamada Ajax... por favor espere');

        // Petición básica
        Ext.Ajax.request({
            url: 'loadDataAjax.php',
            method: 'POST',
            success: successAjaxFn,
            failure: failureAjaxFn,
            timeout: 10000,
            headers: {
                'cabecera-propia': 'prueba'
            },
            params: {
                operation: 'load'
            }
        });
    };

    /*
     * Asignación del manejador de evento al DIV
     */
    Ext.get('divEjemplo').on('click',eventHandlerClick);
});

El script PHP ‘loadDataAjax.php’, no hace gran cosa. Para que podáis ver los distintos estados de la aplicación con ExtJS, genera aleatoriamente respuestas con la propiedad ‘success’ a true, a false y fuerza el vencimiento del timeout de la llamada Ajax. Podéis verlo en funcionamiento aquí

]]> http://www.desarrollosweb.net/2008/11/13/introduciendo-extjs-llamadas-ajax/feed/ 2