PDA

View Full Version : How do I get accurate dimensions of a component's parent?



xjscrafter
6 Dec 2013, 4:05 PM
I have an ExtJS 4.2.2 app, with a tab panel. The second tab has an image xtype that renders an image.

Because when I request the image from the server I need to specify a width and height, I need to figure out the actual width and height of the container holding the image for that tab content, so I get an image of appropriate size.

But on render of the image, I alert() the container's width and it says 1162, but the actual width of the image ends up being 990px wide. So how (and when ???) can I get the actual width of the container of the image displayed on that tab content?

Thanks!

xjscrafter
6 Dec 2013, 5:20 PM
For now I'm adding 10% to the width, but that seems unnecessary and strange.

Kevin Jackson
10 Dec 2013, 12:57 PM
I'd like to clarify the question, Are you scaling the image dynamically to fit on the server based on the size of the container? I would imagine that you would need to check dimensions afterRender. That becomes a little trickier because in a tab panel, it won't render that content by default until you navigate to it. That means you'd be asking after the fact and then waiting for the image to be processed. You can alter that so it renders everything at instantiation of the tabPanel but then you're adding that weight up front. If you are using getWidth and getHeight they may be allowing for the padding values of the parent.

tobiu
10 Dec 2013, 1:26 PM
take a look at:
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.util.Positionable-method-getBox

i would try:


myImage.el.parent().getBox();


you can pass a selector to the parent call.

xjscrafter
11 Dec 2013, 9:09 AM
Thanks for your input. I'll give these ideas a try.

Basically, to get better performance from charts with large numbers of data points, I'm using Graphite, which returns SVG charts. But as user moves slider to resize panel in border layout container, I need to get a new image from Graphite, and that means knowing what width and height image to request. For that I need to know the container width and height, which I get after the resize.