2.) Also, more importantly, why does using 'centered' align, center and scale the panel perfectly horizontally but NOT vertically? It doesn't seem to scale down when the image's vertical size exceeds the Container's. It does recognize the top edge, but not the bottom. Scrolling is not turned on anywhere. Using 'Ext.Img' instead of 'Ext.Panel' behaves identically.

Please help. I have tried many different styling solutions, but can't seem to get it perfect. If anyone has a recommendation I'm all ears.

I've tried using 'background-image', but the Panel doesn't find the image dimensions when initialized, so it only shows up as a black dot in the center of the screen. The image does show up when I set an explicit height and width for the Panel, but that defeats what I'm trying to accomplish which is to display the image in an overlay that is sized to the image.

14 Jun 2012, 7:58 AM

estesbubba

I've done this in a tab panel before with success. You have a panel nested inside a container which you should avoid. Make your panel with the image a component.

I'm not sure where your css goes, but I have a further complication related to the Panel the image resides in.

Each image will be dynamic, because this particular Container (what I've called 'ImagePage') is the detail view pushed from a Navigation View List. Each item on the list loads a different image into this detail view. Also, there need to be buttons attached to the image at particular coordinates on the image, to account for different screen sizes and orientations; I do this by assigning a 'top' and 'left' to each button. (pic attached). The only way I know how to do this is to put them into a Panel or a Container as items.

I am only prototyping my app at the moment, so that is why I'm writing everything inline rather than in my controller.