getWidth method in YAHOO.ext.Element
May I suggest that you add the following "|| this.dom.width". If the element is not attached to the document and you:
It will display 0 even though "width" is 100. So, in my code, if offsetWidth is 0 then it will return the value of "width".Code:elem.setWidth(100) alert(elem.getWidth());
Thanks!Code:getWidth : function(contentWidth){ var w = this.dom.offsetWidth || this.dom.width; return contentWidth !== true ? w : w-this.getBorderWidth('lr')-this.getPadding('lr'); },
0 is the correct return value. An element that is not in the document has a 0 width.
width is not 0 and it should not return 0.
If the element is not attached to the document it can still have a width. It doesn't have an "offsetWidth" but it can still have a "width".
A call to setWidth(100) and then a subsequent call to getWidth() should not return 2 different values so long as the units are not a percentage type or width is not blank or auto.
This is an important distinction especially when using your button class. If the button is not appened to the document body before rendering, it will be drawn incorrectly. My suggested fix may be a little immature in that you should test for units prior to deciding which width value to return.
Of course this goes for setHeight as well.
Oh... I meant dom.style.width not dom.width before
A still stand by what I said. An element that is not part of the document is not rendered, and therefore doesn't have a width (or height). It doesn't have a clientWidth or clientHeight either (properties that don't have to do with offsets).
If what you want is the value of height in the style, then you can fetch that value with getStyle very easily.
The reason I am banlking on this is 4 part:
1 and most important) The value returned by the style is NOT the correct width a lot of the time. If you append the element to the document and then call getWidth() it will return a different value if the element has any borders and padding. This is bad.
2) (less important) the spec is that an element that is not part of the document has no dimensions.
If you are going to argue standards... neither clientWidth nor offsetWidth are defined by the W3c. They are both a Microsoft invention. If anyone is interested thsi document explains how width is supposed to be calculated... though in the real world this isn't so: http://www.w3.org/TR/REC-CSS2/visude...width-property
The only time offsetWidth will be 0 is:
1) the style width is set to 0
2) width is set to a percentage unit and its parent's width is 0
Given this... If you want a truly accurate width you should implement the fix I suggested with the style.width units check.
It don't need to call getStyle. This is all internal to your things. Right now I am running the patch I suggested and everything works great. Though, this should be a temporary solution.
Specifically your button class is affected because you call setWidth and then immediatly call getWidth (a couple lines later in the same function). getWidth will always return 0 and your button will draw incorrectly.
If you don't want to do this, you may consider a fix to your button class. I will look into this... perhaps I can help you.
A call to setWidth and then a call to getWidth will indeed fail. This has nothing to do with Ext though. All major browsers implement "lazy styling" and don't actually perform a "reflow" until the JS thread is completed. This is a common problem in all JS and the way around it is to use defer() or setTimeout(). Fetching the style attribute is not the way to get the width of an element. Let me explain:
A div element has a border 1px, padding 2px.
You call div.setWidth(100)
Then you call getWidth() and lets say as you suggested, I return the width style attribute. In standards compliant browsers, the width returned will be 94px. In IE it will be 100px. This is unacceptable. I would rather return 0, so you know you need to change your logic then return incorrect/inconsistent values. getWidth() should always return the same value in all browsers.
In my experience, "auto correcting" stuff results in bugs that are difficult to trace. If I was developing something that was highly sensitive to a 6px difference (like a BorderLayout component) imagine the time that I would spend trying to figure out why my widths were off by 6 pixels.
Just wanted to let you know, in the next rev of Ext 1.0 Alpha, there are two functions getComputedWidth/getComputedHeight which return the offsetHeight/offsetWidth if available OR return the style width adjusted by borders and padding where needed to simulate offsets. It has a note that it won't always work (e.g. div that has display:none and auto width in IE).
Posting Permissions
Reply With Quote