View Full Version : hideMode changes how items are rendered

6 Oct 2010, 6:51 PM

I describe two weird bugs in this post.

1) I've hit an interesting problem that is solved in all browsers but IE (of course) by just changing the hideMode of a container.

I have a panel that is initially hidden with two elements inside it. If the hideMode is set to 'offsets' for the panel, when the panel is shown (and I call doLayout on its parent) it is sized correctly and all elements are visible.

Under IE; the elements are sized correctly but some elements are not visible even though they are when viewing the page source using IE's dev tools.

If I interact with a combobox on the page (by just clicking it to see its options) the elements become visible immediately.

It looks like in this case that IE is simply forgetting to *render* these items to the screen until I cause something else to happen - very strange. FF/Chrome do not have this problem. This is intermittent.

2) If I put hideMode back to the default of 'display' to resolve Bug #1, I see different sizing behavior of the panel's child components.

One of the child components (who has flex: 1 set) has a child component of its own with no set height or flex setting.

This child's child component appears to render with no height under hideMode: 'display'. With hideMode: 'offsets' it renders with its height. The component is just a container for a textbox and some buttons in a hbox layout.

I assume because 'display' hide mode is used, ExtJS never gets given a default height for the component (since its invisible) where-as with 'offsets' mode its rendered off site and so it appears fine.

A fix appears to be explicitly set a height for this component.

Has anyone encountered problems similar to Bugs 1 and 2 above? Any thoughts on these subtle issues between browsers?