Ext.MesasgeBox.buttonText in-line width set and cannot be changed after - IE7 Only

[rhedgpeth]

This is for 2.2.1

I am changing the value of Ext.MessageBox.buttonText.ok to 'Confirm', which displays perfectly the first time the message box is shown. However, due to some needed logic I am changing Ext.MessageBox.buttonText.ok to 'OK', and once I do this an in-line style width of 20px is applied to the <SPAN> surrounding the button's text and cannot be removed. Meaning that if I set Ext.MessageBox.buttonText back to 'Confirm' only 'Cor' is displayed in the button. This only happens in IE7. Has anyone encountered this before?

function displayAlertMsg(msgText, msg)
{
 Ext.MessageBox.buttonText.ok = msg;
 
 Ext.MessageBox.show({
                title : 'Alert',
                msg : msgText,
                buttons: Ext.MessageBox.OK,
                icon: Ext.MessageBox.WARNING
   });
 return;
}

You can test this function in IE7 by toggling between the following two function calls...

displayAlertMsg('This is a test message!', 'Confirm');
 
displayAlertMsg('This is a test message!', 'OK');

Thank you in advance for any advice on solving this!

[keith204]

I found a solution, and if there is a more elegant solution out there let me know.

The problem is that this.btnEl is undefind in Ext.Button.autoWidth(). The workaround is in red.

Ext.override( Ext.Button, {
  autoWidth:function() {
    if(this.el){
      this.el.setWidth("auto");
      if(Ext.isIE7 && Ext.isStrict){
        var ib = this.btnEl || this.el;
        
        if(ib && ib.getWidth() > 20){
          ib.clip();
          ib.setWidth(Ext.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
        }
      }
      if(this.minWidth){
        if(this.el.getWidth() < this.minWidth){
          this.el.setWidth(this.minWidth);
        }
      }
    }
  }
});