Ventana Login

http://codigo.extjs.mx/extjs4/form/ventanalogin/ventanalogin.rar

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
<pre name="code" class="javascript">
Ext.onReady(function() {
Ext.createWidget('window', {
x: 300, y: 20,
width : 380,
title: 'Autentificaci&oacute;n',
bodyPadding: '5 5 0 5',
collapsible: true,
closable : false,
draggable : true,
resizable: { handles: 's' },
animCollapse: true
//items:[]
}).show();
});
</pre>

Ahora agregaremos un formpanel a la ventana, el cual debe de ir dentro del items, el codigo es el siguiente:
<pre name="code" class="javascript">
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()
})
</pre>
Hasta el momento hemos creado la ventana con su FormPanel. Ahora añadiremos los componentes como son los textfields y los botones al FormPanel.
<pre name="code" class="javascript">
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&ntilde;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);
}
});
}
}
}]
</pre>
Ahora Veamos el ejemplo completo:
<pre name="code" class="javascript">
Ext.onReady(function() {
Ext.createWidget('window', {
x: 300, y: 20,
width : 380,
title: 'Autentificaci&oacute;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&ntilde;a',
tooltip:'Presione para recuperar su contrase&ntilde;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();
});
</pre>


Porqué es importante aprender a programar? ...
El éxito de las estimaciones de recursos en el Software ...
La programación dirigida por eventos también es un paradigma de programación
Consideraciones a tomar para llamarlo el mejor

Danos tus comentarios

Escribe un comentario en el campo de abajo...