PDA

View Full Version : [SOLVED] Unable to add component to GroupTabPanel after AJAX call



PV-Patrick
4 May 2010, 12:39 PM
I am trying to only display a "page" to an authorized user via the GroupTabPanel and I believe I am running in to maybe a scope problem? Essentially, I am calling an AJAX post to the server to retrieve authorization on the event "beforeRender". For some reason it all works perfect if I include the AJAX call inside the function for the listener and not in an "external function", for example:

This works:

... },{
title : 'Staff Management',
layout : 'fit',
id : 'tab-staff-management',
listeners : {
'beforeRender' : {
fn : function(p) {
Ext.Ajax.request({
url: '/staff/check_access',
method: 'POST',
failure:function(response,options){
return false;
},
success:function(response,options){
var data = Ext.util.JSON.decode(response.responseText);
if(! data.success) {
Ext.Msg.show({
title : 'Access Denied',
msg : 'You do not have access to view this page!',
buttons : Ext.Msg.OK,
icon : Ext.MessageBox.WARNING,
minWidth: 400
});
return false;
} else {
var sp = new Panel.StaffContainer();
p.add(sp);
p.doLayout();
}
}
});
}
}
},
items : []
},{ ...
However, if I were to place the AJAX call into a function, it doesn't work. From what I can tell it adds the panel to the tabpanel, but it's like the doLayout() does nothing.



listeners : {
'beforeRender' : {
fn : this.onStaffTabClick,
scope:this // -- Does not appear to have any effect on the outcome whether here or not
}
},
.....

onStaffTabClick : function(p) {

Ext.Ajax.request({
url: '/staff/check_access',
method: 'POST',
failure:function(response,options){
return false;
},
success:function(response,options){
var data = Ext.util.JSON.decode(response.responseText);
if(! data.success) {
Ext.Msg.show({
title : 'Access Denied',
msg : 'You do not have access to view this page!',
buttons : Ext.Msg.OK,
icon : Ext.MessageBox.WARNING,
minWidth: 400
});
return false;
} else {
var sp = new Panel.StaffContainer();
p.add(sp);
p.doLayout();
console.log('ajax success');
}
}
});
return false;
},
Any suggestions on what is causing this? I am sure it will be something simple that I am just overlooking. Thanks in advance!

EDIT: I figured out a better way to go about this and just have the relevant access permissions loaded into a store on first load and then just check against the data store. Not sure why I didn't think of this sooner but it has solved my problem and achieved my ultimate goal.