Ventana Login

A pesar de que puede conllevar varias validaciones, una ventana de iniciar sesión puede construirse de manera muy sencilla. Estamos hablando solamente de un formulario con dos campos de captura y botones para accionar el registro. Se requiere validar algunos detalles de igual forma cuando se trata de un formulario para nuevos usuarios.Lo que restaría es un espacio para un mensaje de confirmación dependiendo lo que ha resuelto el servidor.

Creado el Lunes 29 de abril, 2013

Vista previa Descargar

Compartelo:
El dia de hoy realizaremos una ventana de logueo. El cual contendra a un formulario que debe de rellenarse, cuando el usuario de click en el boton aceptar en ese momento se enviaran sus datos por post.
El siguiente codigo nos sirve para crear la ventana
                                                    Ext.onReady(function() {
                                                        Ext.createWidget('window', {
                                                            x: 300, y: 20,
                                                            width   : 380,
                                                            title: 'Autentificación',
                                                            bodyPadding: '5 5 0 5',
                                                            collapsible: true,
                                                            closable   : false,
                                                            draggable  : true,
                                                            resizable: { handles: 's' },
                                                            animCollapse: true
                                                            //items:[]
                                                        }).show();
                                                    });
                                                    


Ahora agregaremos un formpanel a la ventana, el cual debe de ir dentro del items, el codigo es el siguiente:
                                                    Ext.create('Ext.form.Panel', {
                                                              bodyPadding: 5,
                                                              width: 350,
                                                              // The form will submit an AJAX request to this URL when submitted
                                                              url: 'Aqui va tu archivo de php',
                                                              // Fields will be arranged vertically, stretched to full width
                                                              layout: 'anchor',
                                                              defaults: {
                                                                   anchor: '100%'
                                                              }
                                                              //items:[]
                                                              renderTo: Ext.getBody()
                                                              })    
                                                    

Hasta el momento hemos creado la ventana con su FormPanel. Ahora añadiremos los componentes como son los textfields y los botones al FormPanel.
                                                     items: [{
                                                    	fieldLabel: 'Usuario',
                                                    	xtype:'textfield',
                                                    	name: 'user',
                                                    	id:'usuario'+this.id,
                                                    	allowBlank: false
                                                    	},{
                                                    	fieldLabel: 'Password',
                                                    	name: 'pass',
                                                    	xtype:'textfield',
                                                    	inputType: 'password',
                                                    	id:'password'+this.id,
                                                    	allowBlank: false
                                                    	},{
                                                    	fieldLabel: 'Email',
                                                    	name: 'email',
                                                    	xtype:'textfield',
                                                    	vtype: 'email',
                                                    	id:'email'+this.id,
                                                    	setVisible:false,
                                                    	hidden:true
                                                    	}
                                                    	],
                                                    	// Reset and Submit buttons
                                                    buttons: [{
                                                    	text: 'Recuperar Contraseña',
                                                    	handler: function() {
                                                    		this.up('form').down('textfield[name=email]').show();
                                                    		this.up('form').getForm().reset();
                                                    		}
                                                    	},{
                                                    	text: 'Aceptar',
                                                    	formBind: true, //only enabled once the form is valid
                                                    	disabled: true,
                                                    	handler: function() {
                                                    	    this.up('form').down('textfield[name=email]').hide();
                                                    	    var form = this.up('form').getForm();
                                                    	    if (form.isValid()) {
                                                    		var post='';
                                                    		post='Datos a enviarse por post 
                                                    ';
                                                    		post+='user: '+this.up('form').down('textfield[name=user]').getValue()+'
                                                    ';
                                                    		post+='pass: '+this.up('form').down('textfield[name=pass]').getValue()+'
                                                    ';
                                                    		post+='email: '+this.up('form').down('textfield[name=email]').getValue()+'
                                                    ';
                                                    		Ext.Msg.alert(post);
                                                    		form.submit({
                                                    			success: function(form, action) {
                                                    			       Ext.Msg.alert('Success', action.result.msg);
                                                    			},
                                                    		        failure: function(form, action) {
                                                    				    Ext.Msg.alert('Failed', action.result.msg);
                                                    			}
                                                    			});
                                                                }
                                                           }
                                                          }]
                                                    

Ahora Veamos el ejemplo completo:
                                                    Ext.onReady(function() {
                                                        Ext.createWidget('window', {
                                                            x: 300, y: 20,
                                                            width   : 380,
                                                            title: 'Autentificación',
                                                            bodyPadding: '5 5 0 5',
                                                            collapsible: true,
                                                            closable   : false,
                                                            draggable  : true,
                                                            resizable: { handles: 's' },
                                                            animCollapse: true,
                                                            items: [
                                                                Ext.create('Ext.form.Panel', {
                                                                    bodyPadding: 5,
                                                                    width: 350,
                                                                    // The form will submit an AJAX request to this URL when submitted
                                                                    url: 'autentificar.php',
                                                                    // Fields will be arranged vertically, stretched to full width
                                                                    layout: 'anchor',
                                                                    defaults: {
                                                                        anchor: '100%'
                                                                    },
                                                                    items: [{
                                                                        fieldLabel: 'Usuario',
                                                                        xtype:'textfield',
                                                                        name: 'user',
                                                                        id:'usuario'+this.id,
                                                                        allowBlank: false
                                                                    },{
                                                                        fieldLabel: 'Password',
                                                                        name: 'pass',
                                                                        xtype:'textfield',
                                                                        inputType: 'password',
                                                                        id:'password'+this.id,
                                                                        allowBlank: false
                                                                    },
                                                                    {
                                                                        fieldLabel: 'Email',
                                                                        name: 'email',
                                                                        xtype:'textfield',
                                                                        vtype: 'email',
                                                                        id:'email'+this.id,
                                                                        setVisible:false,
                                                                        hidden:true
                                                                    }
                                                                    ],
                                                                    // Reset and Submit buttons
                                                                    buttons: [{
                                                                        text: 'Recuperar Contraseña',
                                                                        tooltip:'Presione para recuperar su contraseña',
                                                                        handler: function() {
                                                                            this.up('form').down('textfield[name=email]').show();
                                                                            this.up('form').getForm().reset();
                                                                        }
                                                                        }, {
                                                                        text: 'Aceptar',
                                                                        formBind: true, //only enabled once the form is valid
                                                                        disabled: true,
                                                                        handler: function() {
                                                                            this.up('form').down('textfield[name=email]').hide();
                                                                            var form = this.up('form').getForm();
                                                                            if (form.isValid()) {
                                                                                var post='';
                                                                                post='Datos a enviarse por post 
                                                    ';
                                                                                post+='user: '+this.up('form').down('textfield[name=user]').getValue()+'
                                                    ';
                                                                                post+='pass: '+this.up('form').down('textfield[name=pass]').getValue()+'
                                                    ';
                                                                                post+='email: '+this.up('form').down('textfield[name=email]').getValue()+'
                                                    ';
                                                                                Ext.Msg.alert(post);
                                                                                form.submit({
                                                                                    success: function(form, action) {
                                                                                        Ext.Msg.alert('Success', action.result.msg);
                                                                                    },
                                                                                    failure: function(form, action) {
                                                                                        Ext.Msg.alert('Failed', action.result.msg);
                                                                                    }
                                                                                });
                                                                            }
                                                                        }
                                                                    }],
                                                                    renderTo: Ext.getBody()
                                                                })
                                                    
                                                        ]
                                                        }).show();
                                                    });