Customizing message boxes

[0zz]

There's various message boxes available in ExtJS and I would like to enquire if these customization are possible?

• Change icon color
• Change background color
• For Confirm > swap the order of Yes and No

If yes, can you direct me to a reference where I can start to learn how to do it?

Thank you.

[scottmartin]

If you load the messagebox into chrome:devtools, you can see all the styles applied for what you want to change if you want to go at it directly.

For the icon, we use font-awesome in Ext6
http://docs.sencha.com/extjs/6.0/cor.../font_ext.html

.myMsgBox .x-window-body-default {
    border-color: #5fa2dd;
    border-width: 1px;
    border-style: solid;
    background: #ff0000;
    color: #000;
    font-size: 20px;
    font-weight: 300;
    font-family: 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
}

Ext.Msg.show({
    title:'Save Changes?',
    message: 'Would you like to save your changes?',
    buttons: Ext.Msg.YESNOCANCEL,
    icon: Ext.Msg.QUESTION,
    
    cls: 'myMsgBox'
});

[albanirneves]

If you load the messagebox into chrome:devtools, you can see all the styles applied for what you want to change if you want to go at it directly.

For the icon, we use font-awesome in Ext6
http://docs.sencha.com/extjs/6.0/cor.../font_ext.html

.myMsgBox .x-window-body-default {
    border-color: #5fa2dd;
    border-width: 1px;
    border-style: solid;
    background: #ff0000;
    color: #000;
    font-size: 20px;
    font-weight: 300;
    font-family: 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
}

Ext.Msg.show({
    title:'Save Changes?',
    message: 'Would you like to save your changes?',
    buttons: Ext.Msg.YESNOCANCEL,
    icon: Ext.Msg.QUESTION,
    
    cls: 'myMsgBox'
});

Ok it works!
What about change the yes button color only?

.myMsgBox .x-btn-default-small {
    background: #ff0000;
}

I tried this but it changes both color.
Thanks

[hakimio]

show() method returns window instance. So, if you just want to do it in one place, you could do the following:

var window = Ext.Msg.show({
    title:'Save Changes?',
    message: 'Would you like to save your changes?',
    buttons: Ext.Msg.YESNOCANCEL,
    icon: Ext.Msg.QUESTION
}),
button = window.down('button[text=Yes]');

button.setStyle({backgroundColor: 'green'});

If you want to do it everywhere, overriding "Ext.window.MessageBox" class might be a better idea.

[albanirneves]

Thanks, it works! How I don't think on that before... thanks!!

show() method returns window instance. So, if you just want to do it in one place, you could do the following:

var window = Ext.Msg.show({
    title:'Save Changes?',
    message: 'Would you like to save your changes?',
    buttons: Ext.Msg.YESNOCANCEL,
    icon: Ext.Msg.QUESTION
}),
button = window.down('button[text=Yes]');

button.setStyle({backgroundColor: 'green'});

If you want to do it everywhere, overriding "Ext.window.MessageBox" class might be a better idea.