Extjs - Custom message box layout

Question

I would like to create a custom message box layout to my application.

enter image description here

I want the header to hold the icon next to the window title.

I want the header to have a bottom border ( this can be achieved by CSS I think)

I want this layout to be on all of my message boxes.

Where do I determined the layout of the window ?

I have looked for the window TPL but could not find it...

Look at http://docs.sencha.com/extjs/4.2.2/#!/guide/theming and create your custom theme. — Lorenz Meyer, Oct 27 '13 at 10:56
this is not a theme issue, it is a layout change that is required... — AMember, Oct 27 '13 at 10:58
So what's the difference between layout and theme ? Aside: in ExtJs a layout is not at all what you are talking about http://docs.sencha.com/extjs/4.2.2/#!/guide/layouts_and_containers. — Lorenz Meyer, Oct 27 '13 at 21:02

Lorenz Meyer · Accepted Answer · 2013-10-27T21:49:00.760

To show the icon in the header next to the title, instead of using the icon configuration, use the iconCls configuration. While the icon config is overridden in Ext.window.MessageBox, iconCls is not.

The bottom border and the icon, you will define them in your own css file. I'm not sure if you can limit the bottom border only to messageboxes, and not have the in other windows.

An example css can look like this:

.x-window-header .x-box-inner {
    border-bottom: 1px solid #333;
}
.msg-question {
    background-image: url('questionmark-icon.png');
}

Your message box would be like:

Ext.Msg.show({
     title:'Save Changes?',
     msg: 'Would you like to save your changes?',
     buttons: Ext.Msg.YESNOCANCEL,
     iconCls: 'msg-question'
});

Extjs - Custom message box layout

1 Answers1