[HELPED]Default console theme

[SASIT]

Is there a way to default the login theme to grey only? have tried using the hook.js with the follwoing however I appear to still get all the available themes for selection


.......
navtoolbarready : function(toolbar){
},
poll : function(rsp){
},
settingsapplied : function(){
Ext.apply(Portal.config.Settings,{

allowThemeSelection : true,
themeUrls : {
gray : '/extjs4/resources/css/ext-all-gray.css'
},


..........
});
}

[sean.lanktree]

Do you want to default the theme to gray or only have gray theme as the only option?

[SASIT]

I would like the to have only the gray theme as the only option if possible

[sean.lanktree]

If they will only have one choice I would set "allowThemeSelection" to false (no point in outputting it if there is only one choice). Last, rename the index.html file under the portal/desktop folder to index_old.html (or similar). Now rename index-gray.html to index.html and now the gray theme will always be loaded.

[SASIT]

Thanks Sean.

Is there a way to define this in the hook.js so I don't have to remember to change this if we upgrade Valence at a later date and the core files are overwritten?

[Johnny Major]

SASIT,

Below is an example hook.js that will force the portal to use the Gray theme if its not already being used. I have bolded the added code.

Ext.define('Portal.Hook',{
    singleton : true,
    config    : {
        forceThemeChange : false
    },
    constructor : function(){
        Portal.getApplication().on({
            scope : this,
            beforeenvironmentset : function(user,env){
                // return false to prevent setting of environment...
            },
            beforelogin : function(params){
                // return false to prevent login attempt...
            },
            beforelogout : function(user){
                // return false to prevent logout...
            },
            beforepoll : function(params){
            },
            closeapp : function(app){
            },
            componentrender : function(cmp){
                var me = this;
                //if login form handle theme requirements
                //
                if (cmp.xtype === 'loginform'){
                    var themeCb = cmp.down('#theme');
                    //make sure we disable the theme combo so the 
                    // user cant change it
                    //
                    themeCb.disable();
                    
                    //determine if we need to force the gray theme
                    //
                    if (me.getForceThemeChange()){
                        if (!themeCb.rendered){
                            themeCb.on({
                                scope  : me,
                                render : function(cmp){
                                    me.forceGrayTheme(cmp);
                                }
                            });
                        } else {
                            me.forceGrayTheme(themeCb);
                        }
                    }
                }
            },
            environmentset : function(user,env){
            },
            launchapp : function(app){
            },
            login : function(user,sid){
            },
            loginfailure : function(user){
            },
            logout : function(user){
            },
            navtoolbarready : function(toolbar){
            },
            poll : function(rsp){
            },
            settingsapplied : function(){                
                //determine if gray theme is being used and if not flag the force theme
                //
                var theme = Ext.getUrlParam('theme');
                if (Ext.isEmpty(theme) || theme !== 'gray'){
                    this.setForceThemeChange(true);
                }
            }
        });
    },
    
    forceGrayTheme : function(cmp){
        var me = this;
        
        //set the theme to gray
        //
        cmp.setValue('gray');
        me.setForceThemeChange(false);
        
        //fire the select event so the page reloads with the 
        // gray theme
        //
        cmp.fireEvent('select',cmp);
    }
});

[SASIT]

Thanks Johnny!

Just out of curiousity, if I only wanted to default to gray on the login form, is there a hook.js setting that can be used?

[Johnny Major]

SASIT,

So you want to default to the gray theme however allow the users to change it? The above example I gave earlier defaults the portal to gray if its not already gray and then disables the theme combo so that cant change it.

Thanks

[SASIT]

Hi Johnny,

I was more curious if there was a hook.js keyword that sets the default theme. Like the keyword that you can use to disable the combo drop down. Rather than having to code as you have shown, such as in a situation where I want to only use one theme, say gray, with no combo dropdown.

Cheers