ExtJS – Ext.Msg box dynamic height and width

I have a message box that I create like so:

Ext.Msg.show({
  title: 'title',
  msg: 'some message',
  buttons: Ext.Msg.OKCANCEL,
  icon: Ext.Msg.WARNING
});

The message content is of variable length and sometimes it breaks into two lines. My requirement is to get the message into a single line so I hard-coded a width for the message box like so:

Ext.Msg.show({
      title: 'title',
      msg: 'some message',
      buttons: Ext.Msg.OKCANCEL,
      icon: Ext.Msg.WARNING,
      minWidth: 900,
      width: 900
    });

This increased the width of the box and my message could now fit into a single line for most cases which is sufficient for my requirements. However, this introduced a new problem.

enter image description here

As you can see, there is now an empty space that gets added to the bottom of the box. This space increases with each new entry if it is greater than a certain length ( I think this length is the original width calculated for the box by the framework).

What I think is happening is, the framework initially calculates a height and a width based on the data provided. But then the width gets overridden by the new value I set, increasing the horizontal length of the box. But as the height never gets adjusted accordingly, it is left at its initially calculated value, resulting in the above behavior.

Some help to sort this out would be highly appreciated! Thanks.

Update: The ExtJS version in use is 4.1.1

Working fiddle here

Answer

Actually, when show method of msgbox is get called, one inner function doAutoSize called by framework but at that time our width (900) is not applied to topContainer (which contains msg part) of the msgbox that’s why it is taking higher height.

To resolve this issue, we can call setHeight method after show method like below :-

msg.setHeight(msg.header.getHeight()+msg.topContainer.getHeight()+msg.bottomTb.getHeight());

Working Fiddle

Note: For more details please go through show method of framework.

Hope this will help/guide you.

Leave a Reply

Your email address will not be published. Required fields are marked *