PDA

View Full Version : Ext JS Scope question



cflynn07
13 Feb 2012, 8:19 PM
I'm still getting then hang of scope in EXT JS. I'm having a bit of trouble with getting a callback function to invoke a function that is a property of a controller object.


Essentially I want to invoke the 'submit' function that is a property of my 'CS.controller.Login' object (relevant code highlighted in red). But what I'm actually getting for a scope is the Ext.util.KeyNav object that intercepts my enter keystroke that submits the form.
31680


Ext.define('CS.controller.Login',{ extend: 'Ext.app.Controller',

views: [
'ViewLogin'
],

init: function(){

this.control({
'viewport': {
afterrender: function(viewport, opts){

viewport.add([{
xtype: 'viewlogin',
itemId: 'viewlogin'
}]);

}
},
'viewlogin button[text = Submit]': {

click: this.loginFormSubmit

},
'viewlogin button[text = Reset]': {

click: function(btn, e, eOpts){
btn.up('form').getForm().reset();
}

},
'viewlogin': {

afterrender: function(viewlogin, options){

this.keyNav = Ext.create('Ext.util.KeyNav', viewlogin.el, {
enter: this.loginFormSubmit
});

}

}
});

},

/**
* Callback handles authentication attempt
*/
loginFormSubmit: function(){

var me = this;

var form = Ext.ComponentQuery.query('#viewlogin_form');

if(form.length == 0)
return;
form = form[0].getForm();

var msg_panel = Ext.ComponentQuery.query('#viewlogin_message');

if(msg_panel.length == 0)
return; //error
msg_panel = msg_panel[0];

msg_panel.update('<img src="http://themis.dev/ccms/cs_resources/global/images/ajax.gif" alt="Authenticating..." />');
msg_panel.setVisible(true);

form.submit({
success: function(form, action){

console.log(this);

this.login();

},
failure: function(form, action){

msg_panel.update(action.result.msg);

},
scope: me
});

},

/**
* Processess a successful login event. Loads dashboard
* application environment and corresponding user applications
*
* @return null
*/
login: function(){

var viewport = Ext.ComponentQuery.query('viewport');
viewport = viewport[0];
viewport.remove('viewlogin');
viewport.add({xtype: 'dashboard'});

}

});

vietits
13 Feb 2012, 11:14 PM
Hope the following fix (in red color) will help to solve your problem.


Ext.define('CS.controller.Login',{
extend: 'Ext.app.Controller',

views: [
'ViewLogin'
],

init: function(){

this.control({
'viewport': {
afterrender: function(viewport, opts){
viewport.add([{
xtype: 'viewlogin',
itemId: 'viewlogin'
}]);
}
},
'viewlogin button[text = Submit]': {
click: this.loginFormSubmit
},
'viewlogin button[text = Reset]': {
click: function(btn, e, eOpts){
btn.up('form').getForm().reset();
}
},
'viewlogin': {
afterrender: function(viewlogin, options){
this.keyNav = Ext.create('Ext.util.KeyNav', viewlogin.el, {
enter: this.loginFormSubmit,
scope: this
});
}
}
});
},
...

cflynn07
13 Feb 2012, 11:16 PM
Ah I see, I just need to move the scope reference one step up, thanks! I'll give that a try.