Can we implement the user based theme in extJS?

[sanjayarrk1]

Hi,

I have a requirement where I have to load the theme based on the user data available in data base.

How i can do that? Is extJS supporting the user based theme selection?

Any help will be highly appreciated.

[mitchellsimoens]

Ext JS 3 or 4?

[sanjayarrk1]

Its ExtJS 4

[mitchellsimoens]

I will move this to the appropriate forum.

Have you seen the theme example? It replaces the theme with another.

[sanjayarrk1]

Hi, I have implemented it in a different way. This way i can achieve that.




ScriptLoaderMgr = function() {
this.loadCss = function(scripts) {
var id = '';
var file;


if (!Ext.isArray(scripts)) {
scripts = [scripts];
}
for (var i = 0; i < scripts.length; i++) {
file = scripts[i];
id = '' + Math.floor(Math.random() * 100);
Ext.util.CSS.createStyleSheet('', id);
Ext.util.CSS.swapStyleSheet(id, file);
}
};
};


LoadMgr = new ScriptLoaderMgr();


/* To get the User details from data base server & changing the theme based on user data*/
Server.getUserDetails(function(res) {
if (res != null) {
DSHB.userDetails = res;
/*Added to load the theme based on user data*/
if (DSHB.userDetails.theme == CONSTANTS.get('THEME_GRAY')) {
LoadMgr.loadCss(['resources/css/my-ext-theme.css', 'itemSelector.css', 'dashboard.css', 'TabScrollerMenu.css']);
} else if (DSHB.userDetails.theme == CONSTANTS.get('THEME_BLACK')) {
LoadMgr.loadCss(['resources/css/accessibility-theme.css', 'itemSelector.css', 'dashboard.css', 'TabScrollerMenu.css']);
}
} else {
Ext.Msg.alert('Error', 'No User Details are configured.');
}
});