We are using extjs 3.2.1 JavaScript Framework. In one of the grid panel have an action menu on top. Based on the value retrieved from the database, I need to show or hide the menu. I can use the hidden property of the menu for that purpose.
The problem is the function I use to retrieve the value from database runs asynchronously and takes time to retrieve the value and by the time it returns the menu is already initialized. Here are both methods.
employeeProfile: function(profileType) {
CR.Controllers.Employee.GetProfile(function(result) {
if (CR.CRError.ParseResult(result)) {
switch (profileType) {
case "IsStandardAllowed":
return result.IsStandardAllowed === 1 ? true : false;
case "IsUploadAllowed":
return result.IsUploadAllowed === 1 ? true : false;
case "IsCopyAllowed":
return result.IsCopyAllowed === 1 ? true : false;
default:
return true;
}
}
return true;
}, this);
},
getMenuActions:
function() {
return [
// add button
new CR.EmployeePanelAction({
text: this.lang_newFromStandard,
tooltip: this.lang_tipNewFromStandard,
handler: this.onNewFromTemplate,
hidden: this.EmployeeProfile("IsStandardAllowed")
scope: this
}),
new CR.EmployeePanelAction({
text: this.lang_newFromUpload,
tooltip: this.lang_tipNewFromUpload,
handler: this.onNewFromUpload,
hidden: this.employeeProfile("IsUploadAllowed"),
scope: this
}),
new CR.EmployeePanelAction({
text: this.lang_newFromCopy,
tooltip: this.lang_tipNewFromCopy,
handler: this.onNewFromCopy,
hidden: this.employeeProfile("IsCopyAllowed"),
scope: this
})
];
},
The problem is I didn't understand JavaScript Callback and Scope. I passed the callback method to the database retrieval method along with scope and it is working fine. Here is the method that I use to retrieve successfully.
isImageActionAllowed: function(setImageActions, scope) {
MVC.Controllers.Users.GetUserProfile(function(result) {
if(MVC.Error.ParseResult(result)) {
setImageActions.call(scope, result);
}
}, this);
},