Search code examples
extjsextjs4extjs4.2

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?

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

    or

    anchorTo() docs

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

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

    Edit

    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.

    Example:

    Ext.Function.createDelayed(windowRef.anchorTo,50)(Ext.getBody(),'t-t',[-100,0]);