Results 1 to 5 of 5

Thread: Customizing message boxes

  1. #1
    Sencha Premium Member
    Join Date
    Jul 2015
    Posts
    22

    Question Answered: Customizing message boxes

    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.

  2. 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

    Code:
    .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;
    }
    Code:
    Ext.Msg.show({
        title:'Save Changes?',
        message: 'Would you like to save your changes?',
        buttons: Ext.Msg.YESNOCANCEL,
        icon: Ext.Msg.QUESTION,
        
        cls: 'myMsgBox'
    });

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    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

    Code:
    .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;
    }
    Code:
    Ext.Msg.show({
        title:'Save Changes?',
        message: 'Would you like to save your changes?',
        buttons: Ext.Msg.YESNOCANCEL,
        icon: Ext.Msg.QUESTION,
        
        cls: 'myMsgBox'
    });

  4. #3

    Default

    Quote Originally Posted by scottmartin View Post
    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

    Code:
    .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;
    }
    Code:
    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?

    Code:
    .myMsgBox .x-btn-default-small {
        background: #ff0000;
    }
    I tried this but it changes both color.
    Thanks
    Thanks
    Albanir Neves

  5. #4
    Sencha User
    Join Date
    Apr 2013
    Posts
    913
    Answers
    105

    Default

    show() method returns window instance. So, if you just want to do it in one place, you could do the following:
    Code:
    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.

  6. #5

    Default

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

    Quote Originally Posted by hakimio View Post
    show() method returns window instance. So, if you just want to do it in one place, you could do the following:
    Code:
    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.
    Thanks
    Albanir Neves

Similar Threads

  1. customizing a success message
    By dlstrawn in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 30 Apr 2010, 6:18 AM
  2. customizing a success message
    By dlstrawn in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 26 Apr 2010, 9:14 PM
  3. Message boxes look ugly in IE6!
    By innovator2 in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 17 Apr 2009, 3:16 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •