View Full Version : modified width, height of Panel changes when another object is added

6 Aug 2010, 5:53 AM
I've got a image viewing app where you have a row of thumbnails and a Panel as a viewing area. When you tap on a thumbnail, a Panel is created (I've tried component too, same issue) with some HTML to show the image. This panel is then added to main "viewing area" panel. All that works fine. I've added a slide control to change the width/height of the images in the viewing area panel, that works great too as well. So, the user can drag and resize the images in the viewing area panel.

Let's say there are 2 images in the viewing area, which the user has dragged and resized from their original position and width/height. When a third thumbnail is added to the viewing area, the other 2 images already in the viewing area go back to their width/height that was set when they were added to the viewing area panel. When the user changes the size, I'm resizing via setWidth and setHeight. Everything works fine except they go back to their original width/height that I set when I initially added them to the viewing area pane. Here is the code I'm using to add the image panels to the viewing area panel...thanks.

height = parseInt(imgobj.height) ;
width = parseInt(imgobj.width) ;

var bigpic = new Ext.Panel({
floating: true,
draggable: true,
position: "absolute",
itemId: "tnid" + idx,
html: "<img width='100%' height='100%' id='" + idx + "' src='" + url + "'>"


6 Aug 2010, 7:45 AM
I think I may have found the solution. I've been messing around with a few things, but it's working OK now.
Seems the key thing was 2 fold.

1) use doLayout() instead of update()
2) move the doLayout immediately after the pane2.add(bigpic)

When I do this, and try to resize, it works fine.
When the doLayout is after the setWidth and setHeight, it doesn't work as well. Not sure why, but it works...

6 Aug 2010, 6:31 PM
When the doLayout is after the setWidth and setHeight, it doesn't work as well. Not sure why, but it works...

That's probably because doLayout recalculates the design and therefore change the width and height.