Position a constrained Window relative from the center and top of the constraining container


We need to position a constrained Window (like in this example) relative from the top and the center of the container where it is constrained to. But in the config we only found x and y which would require to calculate the center on each document change.

Isn't there any other way to archive this?

Best Solution

You could use

alignTo() docs

alignTo(element, [position], [offsets], [animate] )

Aligns the element with another element relative to the specified anchor points. If the other element is the document it aligns it to the viewport. The position parameter is optional, and can be specified in any one of the following formats:

Blank: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl"). One anchor (deprecated): The passed anchor position is used as the target element's anchor point. The element being aligned will position its top-left corner (tl) to that point. This method has been deprecated in favor of the newer two anchor syntax below. Two anchors: If two values from the table below are passed separated by a dash, the first value is used as the element's anchor point, and the second value is used as the target's anchor point. In addition to the anchor points, the position parameter also supports the "?" character. If "?" is passed at the end of the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to the viewport if necessary. Note that the element being aligned might be swapped to align to a different position than that specified in order to enforce the viewport constraints. Following are all of the supported anchor positions... for more info see the docs


anchorTo() docs

anchorTo(element, [position], [offsets], [animate], [monitorScroll], [callback])

Anchors an element to another element and realigns it when the window is resized.


If you do something of this in a early state the positioning may fail. I would try to add a delay to the alignment by using Ext.Function.createDelayed. Try something between 10-50 as delay.


Related Question