Ext.onReady(function(){
    Ext.QuickTips.init();
 
	// Create a variable to hold our EXT Form Panel. 
	// Assign various config options as seen.	 
    var login = new Ext.FormPanel({ 
        labelWidth:150,
        url:'cadastro.asp', 
        frame:true, 
        title:'Logon', 
        defaultType:'textfield',
		monitorValid:true,
	// Specific attributes for the text fields for username / password. 
	// The "name" attribute defines the name of variables sent to the server.
        items:[{ 
                fieldLabel:'Nome/Empresa', 
                name:'nome', 
                allowBlank:false 
            },{ 
                fieldLabel:'Email', 
                name:'email',
				vtype: 'email',
                allowBlank:false
			},{
                fieldLabel:'Telefone', 
                name:'telefone', 
                allowBlank:false 
			},{
                fieldLabel:'Area de Atuação', 
                name:'area', 
                allowBlank:false 
			},{
                fieldLabel:'Tipo de Receptor GPS', 
                name:'gps', 
                allowBlank:false
            }]
		,buttons:[{ // All the magic happens after the user clicks the button     
					text:'Cadastrar',
					formBind: true,	 
					// Function that fires when user clicks the button 
					handler:function(){ 
						login.getForm().submit({ 
							method:'POST', 
							waitTitle:'Conectando..', 
							waitMsg:'Enviando Dados!!...',
	 
				// Functions that fire (success or failure) when the server responds. 
				// The one that executes is determined by the 
				// response that comes from login.asp as seen below. The server would 
				// actually respond with valid JSON, 
				// something like: response.write "{ success: true}" or 
				// response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}" 
				// depending on the logic contained within your server script.
				// If a success occurs, the user is notified with an alert messagebox, 
				// and when they click "OK", they are redirected to whatever page
				// you define as redirect. 
	 
							success:function(){ 
								Ext.MessageBox.show({
										id: "msg2"
										,title:'Confirmação'
										,msg: 'Cadastrado com Sucesso!'
										,buttons: Ext.MessageBox.OK
										,fn: Resposta
										,icon: Ext.MessageBox.INFO
								});
							},
	 
				// Failure function, see comment above re: success and failure. 
				// You can see here, if login fails, it throws a messagebox
				// at the user telling him / her as much.  
	 
							failure:function(form, action){ 
								if(action.failureType == 'server'){ 
									obj = Ext.util.JSON.decode(action.response.responseText); 
									Ext.Msg.alert('Falha no Cadastro!', obj.errors.reason); 
								}else{ 
									Ext.Msg.alert('Warning!', 'Erro: ' + action.response.responseText); 
								} 
								Ext.Msg.alert('Falha no Cadastro!', obj.errors.reason); 
								login.getForm().reset(); 
								win.hide();
							} 
						}); 
					}
				},{
					text:'Cancelar',
					formBind: false,
					handler:function(){ 
						login.getForm().reset(); 
						win.hide();
					}
			}]
	    });
 
 
	// This just creates a window to wrap the login form. 
	// The login object is passed to the items collection.       
    var win = new Ext.Window({
        layout:'fit',
        width:325,
        height:210,
        closable: false,
        resizable: false,
        plain: true,
        border: true,
        items: [login]
	});

	var botao1 = Ext.get("botao1");
	botao1.on("click",function(e){
		win.show();
	});

	function Resposta(event){
		login.getForm().reset(); 
		win.hide();
	}

});