Tag: ajax

Capturing User details for re-using throughout a Sencha app

For a simple Extjs app it would be desirable to have a dedicated User class which captures the logged in user details so that certain components that should be visible/hidden based on the user roles. So we can define such a User class and initialize the user’s roles and other details just after login. Below is one way to implement such a functionality where user details are captured and re-used for checking current logged in user roles.

1. Create a new singleton Extjs User class (User.js).

2. Get the User rights through ajax call (this can be done at the app startup in the launch method, or just after a successful login) and save them for reuse (app.js).

3. Use saved user to check whether logged in user has certian role or not. Lets say we want to show certain menu items based on roles (usage.js)

Ext.Ajax.request({
url: 'userEndpointUrl',
failure: function(data, operation) {
console.log('failure while trying to fetch roles for user..');
console.log(operation);
},
success: function(data, operation) {
console.log('success fetching roles....');
var response = Ext.JSON.decode(data.responseText);
// initialize User in the app
User.initUser(response.userName, response.rights);
}
});
view raw app.js hosted with ❤ by GitHub
onMenuPanelRenderer : function() {
var hasWebRole = User.hasRole(Config.role.web);
var hasAdminRole = User.hasRole(Config.role.admin);
if (hasWebRole) {
// set mentu item visible true based on role
}
if (hasAdminRole) {
// set mentu item visible true based on role
}
}
view raw Usage.js hosted with ❤ by GitHub
Ext.define('AppName.app.User', {
singleton: true,
alternateClassName: ['User'],
constructor: function(config) {
this.initConfig(config);
},
config: {
username: null,
rights: null
// probably some more details
},
initUser : function(username, rights) {
this.username = username;
this.rights = rights;
return this;
},
getRights: function() {
return this.rights;
},
hasRole: function(role) {
var rights = User.getRights();
for (i = 0; i < rights.length; i++) {
if (rights[i] === role) {
return true;
}
}
return false;
}
});
view raw User.js hosted with ❤ by GitHub

Setting global default ajax timeout in sencha app

Most of the times we need to configure a timeout for all the ajax calls fired from anywhere in the sencha application. This can be done by simply setting up some properties for the Ext.Ajax, Ext.data.proxy and Ext.data.connection classes during application startup.

You may add a function setup to Application through Sencha Architect just to keep this code in a separate function (otherwise you may add the code to launch method as well. Below is the configuration required for setting global default ajax timeouts

Ext.data.proxy.Server.override ({
timeout: 300000
});
Ext.data.Connection.override({
withCredentials: false,
useDefaultXhrHeader: false,
disableCaching:false,
timeout: 300000
});
Ext.Ajax.setWithCredentials(false);
Ext.Ajax.setUseDefaultXhrHeader(false);
Ext.Ajax.setDisableCaching(false);
Ext.Ajax.setTimeout(300000);
view raw app.js hosted with ❤ by GitHub

Above code sets the timeout to 300000 ms and additionally disables the default xhr headers to false (disabling this might save you some time in case you face any issues when the headers provided to your ajax calls seems to be changed)

 

Edit 05-01-2017: For Extjs 6.2 just adding below to launch method should handle the default timeout for ajax in your application :

Ext.override(Ext.data.proxy.Ajax, {
timeout: 60000
});