View Full Version : Aligning buttons in messagebox

15 Mar 2012, 4:33 AM

I need to align the OK button of the message box to the right. I am using the Ext.MessageBox class to display my messagebox. I have tried using buttonAlign but that doesnt work. Also tried to create a custom button and attach a class to it but this button is not being displayed. Any ideas please?

title: 'Error',
msg: "This is a message", //getting the value
buttonAlign:'right', //doesnt work
buttons: Ext.MessageBox.OK,
icon: infoType

15 Mar 2012, 10:43 AM
You can update the layout of the toolbar the buttons live in. Right now it has pack : 'center'

16 Mar 2012, 10:22 AM

Thanks a lot for the help. I am very new to extjs. Could you please direct me to the js file which would have this. Thanks again.

16 Mar 2012, 10:25 AM
The MessageBox source is in the src/window/MessageBox.js file.

16 Mar 2012, 11:03 AM
Made a change to this part of MessageBox.js file. Thanks again.

getDialog : function(titleText){
var btns = [];

buttons = {};
Ext.each(buttonNames, function(name){
btns.push(buttons[name] = new Ext.Button({
text: this.buttonText[name],
handler: handleButton.createCallback(name),
hideMode: 'offsets'
}, this);
dlg = new Ext.Window({
autoCreate : true,

4 Jan 2013, 9:29 AM
If you have a moment, an example that doesn't require modifying the ExtJS source would be much appreciated. I tried a few approaches to building up my own toolbar in Ext.MessageBox.show, but I'm fairly new to the object model and am clearly missing something.

FWIW, "buttonAlign" seems like it'd be a great option if it worked. I see it's no longer even in the ExtJS 4.1.3 source, although it still appears in the documentation.

30 Jul 2013, 7:14 AM
The MessageBox source is in the src/window/MessageBox.js file.

And if you're pulling from the CDN?

8 Dec 2014, 1:03 PM
This works for a specific instance of MessageBox without changing the JS file. Fiddle here (https://fiddle.sencha.com/#fiddle/eni).

var message = Ext.MessageBox.show({
title: "Title",
msg: "message",
buttons: Ext.Msg.OKCANCEL
message.dockedItems.items[1].layout.pack = "end";

To align the buttons left instead of right, set the pack to "start".

It does seem like there should be a config for this though, to avoid the additional doLayout call.