Combo Fecha, validando los días del mes

Las dependencias entre los componentes puede ser muy variada. Los ejemplos prácticos de dependencia de componentes se encuentran fácilmente dentro de formularios. Los campos de captura pueden cambiar de valores, tamaños o validaciones dependiendo como el usuario va llenando estos campos. Este ejemplo demuestra las dependencias y aplicación de validaciones de acuerdo a la elección del usuario.

Creado el Lunes 29 de abril, 2013

Vista previa Descargar

Compartelo:
En el siguiente formulario, se aprecia el campo Fecha de Nacimiento, el cual esta constituida por día, mes y año, pero resulta que ciertos meses varian de cantidad de dias, el ejemplo mas claro que es el mes de febreroque solo tienen 28 días a diferencia del resto de los meses, es por ello que este ejemplo, se enfoca en validar los dias que corresponden a cada mes, en caso de teclear 29 en el mes de febrero, se marcara como un dato invalidado.

Vemos el ejemplo:
                                                    Ext.onReady(function() {
                                                    Ext.tip.QuickTipManager.init();
                                                       var storeFecha= new Ext.data.ArrayStore({
                                                         fields: ['id', 'name'],
                                                            data : [
                                                            [0,  'Enero'],
                                                            [1,  'Febrero'],
                                                            [2,  'Marzo'],
                                                            [3,  'Abril'],
                                                            [4,  'Mayo'],
                                                            [5,  'Junio'],
                                                            [6,  'Julio'],
                                                            [7,  'Agosto'],
                                                            [8,  'Septiembre'],
                                                            [9,  'Octubre'],
                                                            [10, 'Noviembre'],
                                                            [11, 'Diciembre']]
                                                       });
                                                    
                                                    Ext.create("Ext.FormPanel",{
                                                       renderTo:'simpleCombo',
                                                       heigth: 200,
                                                       title:'Formularios con Combo',
                                                       width:410,
                                                       frame: true,
                                                       fieldDefaults:{
                                                         labelWidth: 120,
                                                         msgTarget: 'side'
                                                       },
                                                    
                                                       defaultType:'textfield',
                                                    
                                                       defaults:{
                                                        width:400
                                                       },
                                                       items:[{
                                                         fieldLabel:'* Nombre ',
                                                         name:'nombre',
                                                         allowBlank: false
                                                      }, {
                                                        fieldLabel:'* Apellidos',
                                                        name:'apellidos',
                                                        allowBlank: false
                                                      },{
                                                        fieldLabel:'Email',
                                                        name:'email',
                                                        vtype:'email'
                                                      },{
                                                        xtype:'container',
                                                        layout:'column',
                                                        items: [{
                                                           labelWidth: 120,
                                                           columnWidth:.50,
                                                           xtype:'numberfield',
                                                           fieldLabel:'Fecha de Nacimiento',
                                                           maxValue:31,
                                                           id: "dia"+this.id,
                                                           minValue :1,
                                                           allowNegative:true,
                                                           emptyText: 'Día'
                                                         },{
                                                           columnWidth: .30,
                                                           xtype:'combobox',
                                                           valueField:'id',
                                                           queryMode: 'local',
                                                           displayField:'name',
                                                           emptyText: 'Mes',
                                                           store:storeFecha,
                                                           listeners:{
                                                           scope:this,
                                                           select:function(cb,record){
                                                            cambiardia(record[0].get("id"));
                                                            }
                                                          }
                                                         },{
                                                           columnWidth: .20,
                                                           xtype:'numberfield',
                                                           minValue:1940,
                                                           maxValue:2006,
                                                           id:"anio"+this.id,
                                                           allowNegative:true,
                                                           emptyText: 'año',
                                                           hideTrigger: true
                                                         }]
                                                      }]
                                                    });
                                                    
                                                    var cambiardia= function(mes){
                                                     switch(mes){
                                                       case 0:
                                                       case 2:
                                                       case 4:
                                                       case 7:
                                                       case 9:
                                                       case 11:
                                                       Ext.getCmp("dia"+this.id).setMaxValue(31)
                                                       break;
                                                    
                                                       case 1:
                                                       Ext.getCmp("dia"+this.id).setMaxValue(28)
                                                       break;
                                                       case 3:
                                                       case 5:
                                                       case 6:
                                                       case 8:
                                                       case 10:
                                                       Ext.getCmp("dia"+this.id).setMaxValue(30)
                                                       break;
                                                      }
                                                     }
                                                    });