PDA

View Full Version : Ext.Button.setText() sizing failure in IE7



bloudon
13 Apr 2007, 9:40 AM
This is pretty minor, but it gave me some annoyance.

Code: Ext 1.0 beta 2

When creating an instance of Ext.Button or one of its subclasses with the following conditions being true:


The constructor option 'text' is omitted or set to an empty value
The constructor option 'cls' is set to 'x-btn-text-icon'


... the width of the button will not be changed to accommodate a new text value passed to it through the setText method when running in IE7. This problem does not occur in Firefox or Safari. IE6's behavior is unknown.

A simple test case:


<div id="button"></div>

<script type="text/javascript">
var btn = new Ext.Button('button', {cls: 'x-btn-text-icon'});
btn.setText('Button text');
</script>

The sizing failure does not occur when the manner of specification of the class name is changed to the following:


<div id="button"></div>

<script type="text/javascript">
var btn = new Ext.Button('button');
btn.getEl().addClass('x-btn-text-icon');
btn.setText('Button text');
</script>

tryanDLS
13 Apr 2007, 9:59 AM
Does this behavior change based on whether the doctype is strict or not? There are a couple checks for IE7 and strict and how autoWidth is called.

bloudon
13 Apr 2007, 11:35 AM
Changing between the following document types causes no difference:


XHTML 1 Strict
XHTML 1 Transitional
HTML 4 Strict
HTML 4 Transitional


I noted in these tests that IE7 was running in strict mode. Rerunning the tests with IE7 forced into quirks mode causes the resizing to mostly work properly. The end result is an appropriately sized button, but for a brief moment it is wider than it needs to be before resizing back down.

The following example illuminates this new resizing behavior. While the alert box is open the button remains in its extra-wide state.


<div id="button"></div>

<script type="text/javascript">
var btn = new Ext.Button('button', {cls: 'x-btn-text-icon'});
btn.setText('Button text');
alert(document.compatMode);
</script>

I forced quirks mode by inserting a comment before the DOCTYPE.