CODEWITHSUNDEEP
extjsextjs4extjs4.2
JJR
JJR

Reputation: 773

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?

Upvotes: 2

Views: 8564

Answers (2)

Grant Humphries
Grant Humphries

Reputation: 3016

I think Ext.window.Window's showBy method provides the easiest way to do this as it doesn't require the window to be rendered, etc. before it can be applied. A solution that uses the body of the app as the parent container looks like this:

let appBody = Ext.getBody();
Ext.create({
    xtype: 'window'
}).showBy(appBody, 't-t', [-100, 0])

See the Ext docs for more info on the showBy method (here are links for Ext 4 and 6)

Upvotes: 1

sra
sra

Reputation: 23983

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]);

Upvotes: 2

Related Questions