PDA

View Full Version : Extending generated FormPanel Code



friedit
12 Aug 2010, 3:42 AM
I just created my first Project with the designer and am now trying to extend the auto generated code with some handlers.

My problem is that I don't know how to access the "getForm()" function in my handler.



Login = Ext.extend(LoginUi, {
initComponent: function() {
Login.superclass.initComponent.call(this);
this.emailFld.fieldLabel = application.translations[request.lang].user.email;
this.passwordFld.fieldLabel = application.translations[request.lang].user.password;
this.loginBtn.text = application.translations[request.lang].login.login;
this.loginBtn.handler = function(){
this.getForm().submit({
method: 'POST',
waitTitle: 'Connecting',
waitMsg: 'Sending data...',
success: function(){
Ext.Msg.alert('Status', application.translations[request.lang].login.login_success, function(btn, text){
if (btn == 'ok') {
var redirect = 'test.asp';
window.location = redirect;
}
});
},
failure: function(form, action){
if (action.failureType == 'server') {
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert(application.translations[request.lang].login.login_failed, obj.ERRORS.REASON);
}
else {
Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText);
}
login.getForm().reset();
}
});
}
}
});


I just found out how to use the autoRef attribute, but I have no clue how to access the parent class functions.
The handler code is copied from the login panel tutorial.

jarrednicholls
12 Aug 2010, 1:06 PM
Hi friedit,

This is an issue of scope. Inside of your handler function, "this" no longer refers to the Login form instance, but it now refers to the handler function itself. Assuming that "loginBtn" is an Ext.Button component, the easiest thing to do is:



this.loginBtn.on('click', function(){
// handler code
}, this);


The Ext.util.Observable (a superclass to all Ext.Component classes) function "on" will attach an event handler to the component...see this doc page for more details (http://dev.sencha.com/deploy/dev/docs/?class=Ext.util.Observable&member=on). The third parameter is the scope you wish to run the handler code in...which will override the default scope to be "this", as in the Login form instance. Now, calling "this.getForm()" means you are calling getForm() on the Login form instance.

While this is completely not recommended, to make your current code work, you would use the helper function "createDelegate", which will return a new version of a function that runs in the specified scope.

for educational purposes only :-)


this.loginBtn.handler = function(){
this.getForm().submit({
method: 'POST',
waitTitle: 'Connecting',
waitMsg: 'Sending data...',
success: function(){
Ext.Msg.alert('Status', application.translations[request.lang].login.login_success, function(btn, text){
if (btn == 'ok') {
var redirect = 'test.asp';
window.location = redirect;
}
});
},
failure: function(form, action){
if (action.failureType == 'server') {
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert(application.translations[request.lang].login.login_failed, obj.ERRORS.REASON);
}
else {
Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText);
}
login.getForm().reset();
}
});
}.createDelegate(this);


Hope that helps!

friedit
13 Aug 2010, 3:20 AM
Thx very much! The on("click", function(), this) approach works great and makes a lot of sense too :)