View Full Version : GXT Image Viewer: w/Pan and zoom

31 Aug 2010, 12:30 PM
Has anyone created a GXT compatible Image viewer capable of pan and zoom? I don't really want a "tiled" approach...just something that I can load a 1000x1000 pixel image and then view it inside a 200x200 frame.

Many thanks for any input.

- Bob

24 Nov 2010, 4:22 AM
I did this class to manage images in an any-size content panel, it works for me...

29 Nov 2010, 10:55 AM
I have written a layout and plugins for this very purpose, I just asked my manager if I can post it and I'm waiting for him to discuss it with legal to see what I can post or not. I will start a new thread and link it here if they allow me to.

29 Nov 2010, 11:37 AM
is there a javacsript extjs version of this ;-)

29 Nov 2010, 2:31 PM
Since I haven't gotten a response on what I am or am not allowed to post from our code, here is my Suggestion on how to simply accomplish this pan and zoom image viewer.

you will likely have to build on this idea. (haven't tested this snippet either)
what you would do then, is create a LayoutContainer that is the same size ratio as your image you want to display,
set the layout to a PanZoomLayout, then set the zoom and position of your layout, call layout and it should do the trick.

* Copied from FitLayout mostly
public class PanZoomLayout extends Layout {

Point position = new Point(0, 0);
float zoom = 1.0f;

* Creates a new fit layout instance.
public PanZoomLayout () {
monitorResize = true;

public void setPosition(Point position) {
this.position = position;
setLayoutNeeded(container, true);

public void setZoom(float zoom) {
this.zoom = zoom;
setLayoutNeeded(container, true);

protected void onLayout(Container<?> container, El target) {
if (container.getItemCount() == 0) {
activeItem = activeItem != null ? activeItem : container.getItem(0);
super.onLayout(container, target);

Size size = new Size(target.getStyleSize().width, target.getStyleSize().height);
setItemSize(activeItem, size);
activeItem.el().setPagePosition(-position.x, -position.y);

protected void setItemSize(Component item, Size size) {
if (item != null && item.isRendered()) {
size.width -= getSideMargins(item);
size.height -= item.el().getMargins("tb");
setSize(item, size.width, size.height);


29 Nov 2010, 2:32 PM
thanks. A little futher searching and a found a place to start. above is useful nonetheless.

11 Mar 2011, 1:35 AM
Hi jeroni,
Whats the value of the constant that is used in the attached file ResourcePreview. That is IconStyle.ZOOM_IN, IconStyle.ZOOM_OUT....etc

Don mind plz...


11 Mar 2011, 1:47 AM
Those are just CSS icon styles: IconStyle.ZOOM_IN is "icon-zoom-in". The CSS style is:

.icon-zoom-in {
background-image: url('images/zoom-in.png') !important;

use any icons you like (16x16 pixels)

11 Mar 2011, 2:25 AM
Thanks a lot, will try it out.