jueves, 17 de junio de 2010

Guardar datos de un formulario en Ext framework

Ext.onReady(function(){ //Inicia la carga de los formulario, datos, etc. cuando el DOM esta listo

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

var login = new Ext.FormPanel({ //declaro un nuevo Formulario
labelWidth:80,
frame:true, //es visible
title:'Ingreso de usuarios',
//width:300,
//default:{autoHeight:true},
defaultType:'textfield',

items:[{ // items que contendra el formulario
fieldLabel:'usuario',
name:'user',
allowBlank:false
},{
fieldLabel:'run',
name:'run',
allowBlank:false
},{
fieldLabel:'password',
name:'pass',
inputType:'password',
allowBlank:false
}],
buttons:[{ //botones dentro del formulario
text:'Guardar',
id: 'btnGuardar',
tooltip:'Guardar datos',
handler:function(){ //le agrego una funcion al boton
login.getForm().submit({
method:'POST', //le indico el metodo por el cual entregará los datos (siempre con mayusculas)
waitTitle:'Conectando',
waitMsg:'Enviando datos...',
url:'putdatos/', //direccion la cual realizara la accion, en este caso para guardar datos en djago
success:function(){ //funcion si el servidor devuelve confirmacion sin errores
//var url = 'main.html';
//window.location = url;
Ext.Msg.alert('Exito', 'Datos guardados'); //mensaje como alert de javascript
},
failure:function(form, action){
if(action.failureType == 'server'){
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Oops!', obj.errors.reason);
}else{
Ext.Msg.alert('Oops!', 'Authentication server is unreachable');
}
login.getForm().reset(); //limpia el formulario
}
});
}
}]
});

login.render('formulario'); // dibuja el formulario dentro del div 'formulario'
});