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ó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ñ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ó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();
});
</pre>
Danos tus comentarios