PDA

View Full Version : This is REALLY weird



gigas01
14 Sep 2012, 11:25 AM
I can't figure it out what is the problem is.

I can assume that it is cuz of the asynchronous, but i'm not sure how to solve it

Strange thing is, if i turn on the debug mode and see the watch expression for

Ext.getCmp('userEmail').setValue(email);

sometimes it appears and sometimes it says not defined :(

here is my code



Ext.ns("MyApp");


var token;var email;


MyApp.ChangePWForm = {
createForm : function() {


/*
* var userEmail = new Ext.data.Store({ reader: new
* Ext.data.JsonReader({ fields: [ 'email' ], root: 'rows',
* totalProperty: 'results' }), proxy: new Ext.data.HttpProxy({ url :
* 'Controllers?controller=ChangePW&token='+token, method: 'POST',
* success : function(a,b){ console.log("i'm handler"); } }) });
* userEmail.proxy.on('onread', function(a, o, response) { var data =
* Ext.util.JSON.encode(response.responseText);
* console.dir(data.form_items); }); userEmail.load();
*
* userEmail.proxy.on('onread', function(a, o, response) { var data =
* Ext.util.JSON.encode(response.responseText);
* console.dir(data.form_items); });
*
*/


Ext.Ajax.request({
url:'Controllers?controller=ChangePW&token='+token,
method: 'POST',
params : {},
success : function(response) {
console.log("im success");
email = response.responseText;
Ext.getCmp('userEmail').setValue(email);
//alert(response.responseText); // the flow not even come in
// success function
// not able to get any response here
// it should return response here but no response come here. why
// ??
// i want the json data here and i want to store it in one
// variable
// like var data = tag.value or something like that
},
callback : function(response) {
console.log("im callback");
email = response.responseText;
Ext.getCmp('userEmail').setValue(email);
}
});


this.form = new Ext.form.FormPanel(
{


url : 'Controllers?controller=Login&token=' + token,
// frame : false,
// border : false,
// buttonAlign : 'center',
labelAlign : 'top',
width : 300,
height : 150,
autoHeight : true,
bodyStyle : 'padding:10px 10px 30px 10px;',
method : 'POST',
id : 'form',
// bodyStyle : 'padding:10px 10px 15px
// 15px;background:#dfe8f6;',
// y : 0,
defaults : {
anchor : '0'
},
// width : 300,
// labelWidth : 150,
items : [ {
xtype : 'textfield',
fieldLabel : 'Email',
//store : userEmail,
id : 'userEmail',
allowBlank : false,
vtype : 'email',
//emptyText: 'TestTest',
//readOnly: true,
//value: email,
}, {
xtype : 'textfield',
fieldLabel : 'Password',
// name : 'passwordSignup',
id : 'passwordSignup',
allowBlank : false,
inputType : 'password',
vtype : 'passwordlength'
}, {


xtype : 'textfield',
fieldLabel : 'Confirm Password',
id : 'cpassword',


name : 'cpassword',
allowBlank : false,
inputType : 'password',
vtype : 'password'
} ],
keys : [ {
key : [ Ext.EventObject.ENTER ],
handler : function(a) {
a.url = 'Controllers?controller=Login';
console.log("I'm in first : " + a.url);
var form = Ext.getCmp('form').getForm();
if (!form.isValid()) {
Ext.Msg.alert('Validation error',
'Please enter both email and password');
return;
}
form
.submit({


success : function(a, b) {
var response = Ext
.decode(b.response.responseText);
var email = response.email;
// NOW DO SOMETHING WITH THE
// EMAIL VAR
Ext.getCmp('emailfield').setValue(
email);
console.log("here?? : " + a.url);
console.log(token);
Ext.Msg
.alert('Error',
'Account already exists, enter a new email')
// location.href = "login.htm";
},
failure : function(a) {


// Ext.Msg.alert('Succeed',
// 'Succeed!')
// url :
// 'Controllers?controller=Signup',


a.url = 'Controllers?controller=Signup';
console.log("I'm in second : "
+ a.url);
form
.submit(


{
params : {
action : 'save'
},
// url :
// 'Controllers?controller=Signup',
success : function(a) {
a.url = 'Controllers?controller=Login';
Ext.Msg
.alert(
'Succeed',
'New Account!')
location.href = "login.htm";
},
failure : function(a) {
a.url = 'Controllers?controller=Login';


Ext.Msg
.alert(
'Succeed',
'LEVEL2 fail')
}
});
}
});


}
} ],
buttons : [ {
text : 'Register',
handler : function(a) {
a.url = 'Controllers?controller=Login';
console.log("I'm in first : " + a.url);
var form = Ext.getCmp('form').getForm();
if (!form.isValid()) {
Ext.Msg.alert('Validation error',
'Please enter both email and password');
return;
}
form
.submit({


success : function(a) {
console.log("here?? : " + a.url);
Ext.Msg
.alert('Error',
'Account already exists, enter a new email')
// location.href = "login.htm";
},
failure : function(a) {


// Ext.Msg.alert('Succeed',
// 'Succeed!')
// url :
// 'Controllers?controller=Signup',
a.url = 'Controllers?controller=Signup';
console.log("I'm in second : "
+ a.url);
form
.submit(


{
params : {
action : 'save'
},
// url :
// 'Controllers?controller=Signup',
success : function(a) {
a.url = 'Controllers?controller=Login';
Ext.Msg
.alert(
'Succeed',
'New Account!')
location.href = "login.htm";
},
failure : function(a) {
a.url = 'Controllers?controller=Login';


Ext.Msg
.alert(
'Succeed',
'LEVEL2 fail')
}
});
}
});


}


} ]
});


},


onLogin : function() {
var form = this.form.getForm();
if (!form.isValid()) {
Ext.Msg.alert('Validation error',
'Please enter both email and password');
return;
}
form
.submit({
success : function() {
console.log("i'm in success");
location.href = "index.htm";
},
failure : function() {
console.log("i'm in failure");
Ext.Msg
.alert('Error',
'Login service failed. Please retry after a few minutes.')
}
});
},


show : function() {
if (!this.form) {
this.createForm();

}

this.form.render('contentArea');
Ext.getCmp('userEmail').setValue(email);
}
};


Ext.apply(Ext.form.VTypes, {
emailMask : /[a-z0-9_\.\[email protected]\+]/i,
email : function(val, field) {


// var username = Ext.getCmp('email').getValue();
if (val.search('@') == -1 || val.indexOf('.') == -1) { // if there
// isn't char @
Ext.apply(Ext.form.VTypes, {
emailText : "Email format : [email protected]",
});
return false;
} else { // now check for the duplication
return true;
}
/*
* Ext.Ajax.request({ url : 'check_username.php', method : 'POST',
* params : 'username=' + username, success : function(o) { if
* (o.responseText == 0) { setusernamevalidfalse(); } } });
*/


},


password : function(val, field) {


return (val == Ext.getCmp('passwordSignup').getValue());


},
passwordText : 'Passwords do not match',


passwordlength : function(val) {


if (val.length < 5) {
// passwordlengthText : 'Password minimum 5 character'
Ext.apply(Ext.form.VTypes, {
passwordlengthText : 'Password minimum 5 character'
});
return false;
} else {


return true;
}
},
// passwordlengthText : 'Password minimum 5 character'


});


Ext.onReady(function() {
Ext.QuickTips.init();
token = gup('token');
console.log("before show");
MyApp.ChangePWForm.show();
console.log("after show");
Ext.getCmp('userEmail').setValue(email);
})


function gup(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if (results == null)
return "";
else
return results[1];
}

willigogs
14 Sep 2012, 12:08 PM
This could be because your Ajax call completes before the form has been rendered - meaning 'userEmail' doesn't exist yet...

I would recommend moving the Ajax request under the formpanel's render listener.

E.g:


this.form = new Ext.form.FormPanel ({
listeners: {
render: function() {
// Put your Ajax call here
}
}
})

gigas01
14 Sep 2012, 12:10 PM
Thanks man now it works!

willigogs
14 Sep 2012, 12:11 PM
No problem - glad you got it working :)