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.');
            }
        });