Desarrollosweb.net

Después de un puente largo, retomamos los artículos con trucos de ExtJS. En ExtJS tenemos la opción de crear nuestros propios validadores de datos para los campos de los formularios, lo que es útil si tenemos validaciones que se repiten a lo largo de nuestra aplicación.

Muchos estaréis pensando que eso también lo podemos hacer usando una función que llamemos dentro de un handler (lo cual es cierto), pero extendiendo los validadores de ExtJS conseguimos que nuestras reglas se integren automáticamente con los mecanismos de validación de formularios que trae “de serie” ExtJS

Vamos a crear una función de validación que chequee el valor de dos campos de forma que sólo uno de ellos tenga valor mayor que cero. Para ello lo primero que hacemos es añadir a la configuración de los campos del formulario una etiqueta propia ‘exclusionPair’ (que nos indicará el id del otro campo que excluye el valor del actual) e indicamos que queremos usar nuestro validador

{
    fieldLabel : 'Haber',
    xtype: 'numberfield',
    id: 'frm_mov_haber',
    name : 'mov_haber',
    // el campo exclusionPair indica cual es el id del otro campo que excluye a este
    // es un parametro de configuracion que nos hemos inventado
    exclusionPair: 'frm_mov_deber',
    vtype: 'exclusionNotZero', // función de validación que queremos usar
    allowBlank:false,
    width : 175
},{
    fieldLabel : 'Deber',
    xtype: 'numberfield',
    id: 'frm_mov_deber',
    name : 'mov_deber',
    // el campo exclusionPair indica cual es el id del otro campo que excluye a este
    // es un parametro de configuracion que nos hemos inventado
    exclusionPair: 'frm_mov_haber',
    vtype: 'exclusionNotZero', // función de validación que queremos usar
    allowBlank:false,
    width : 175
}

La forma de crear un validador es muy sencilla, lo único que hay que tener en cuenta es que tenemos que devolver un true cuando la validación sea correcta y un false si no ha pasado la validación

/**
 * Extendemos los validadores de ExtJS que están definidos en Ext.form.VTypes
 *
 **/
Ext.apply(Ext.form.VTypes, {
    /**
     * 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) {
        /*
         * Si hay valor en el campo exclusionPair, es que tenemos que hacer la validación
         */
        if (field.exclusionPair) {
            // Nos quedamos con la instancia del objeto indicado en exclusionPair
            var pair = Ext.getCmp(field.exclusionPair);
            // Nos quedamos con el valor del campo
            var pairValue = pair.getValue();

            if ((pairValue > 0) && (val > 0)) {
                /**
                 * Si los dos tienen un valor positivo, la regla de validación no se pasa
                 * marcamos el campo como no válido y un mensaje
                 */
                field.markInvalid('Un movimiento no puede tener a la vez haber y deber');
                return false;
            } else if ((pairValue == 0) && (val == 0)){
                /**
                 * Si los dos tienen un valor cero, la regla de validación no se pasa
                 * marcamos el campo como no válido y un mensaje
                 */
                field.markInvalid('Un movimiento no puede tener haber y deber a cero');
                return false;
            } else {
                /**
                 * Si llegamos aquí es que la regla se ha pasado. Como anteriormente un campo
                 * pudo haberse marcado como no válido, los desmarcamos por si acaso
                 */
                field.clearInvalid();
                pair.clearInvalid();
                return true;
            }
        }
        /**
         * El campo no tiene valor en exclusionPair, devolvemos true para que se valide el campo
         */
        return true;
    }
});

Etiquetas: desarrollo web, extjs, formularios, validación, vTypes