1. #1
    Sencha User robertlight's Avatar
    Join Date
    Nov 2009
    Location
    Boston area
    Posts
    19
    Vote Rating
    0
    robertlight is on a distinguished road

      0  

    Post GXT Image Viewer: w/Pan and zoom

    GXT Image Viewer: w/Pan and zoom


    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

  2. #2
    Sencha User
    Join Date
    Jun 2009
    Posts
    13
    Vote Rating
    0
    jeroni is on a distinguished road

      0  

    Default


    I did this class to manage images in an any-size content panel, it works for me...
    Attached Files
    Last edited by jeroni; 24 Nov 2010 at 4:35 AM. Reason: error uploading classes

  3. #3
    Ext User
    Join Date
    Jun 2008
    Location
    Sunnyvale, California
    Posts
    17
    Vote Rating
    0
    gammagec is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha User
    Join Date
    Nov 2007
    Posts
    50
    Vote Rating
    0
    gurpal2000 is on a distinguished road

      0  

    Default


    is there a javacsript extjs version of this ;-)

  5. #5
    Ext User
    Join Date
    Jun 2008
    Location
    Sunnyvale, California
    Posts
    17
    Vote Rating
    0
    gammagec is on a distinguished road

      0  

    Default


    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.

    Code:
    /**
     * 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);
      }
    
      @Override
      protected void onLayout(Container<?> container, El target) {
        if (container.getItemCount() == 0) {
          return;
        }
        activeItem = activeItem != null ? activeItem : container.getItem(0);
        super.onLayout(container, target);
    
        Size size = new Size(target.getStyleSize().width, target.getStyleSize().height);    
        target.makePositionable();
        setItemSize(activeItem, size);
        activeItem.makePositionable(true);
        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);
        }
      }
    
    }

  6. #6
    Sencha User
    Join Date
    Nov 2007
    Posts
    50
    Vote Rating
    0
    gurpal2000 is on a distinguished road

      0  

    Default


    thanks. A little futher searching and a found a place to start. above is useful nonetheless.

  7. #7
    Sencha User
    Join Date
    Mar 2011
    Posts
    2
    Vote Rating
    0
    naveen.kumar@accelrys.com is on a distinguished road

      0  

    Default


    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...

    Thanks
    Naveen.

  8. #8
    Sencha User
    Join Date
    Jun 2009
    Posts
    13
    Vote Rating
    0
    jeroni is on a distinguished road

      0  

    Default


    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)

  9. #9
    Sencha User
    Join Date
    Mar 2011
    Posts
    2
    Vote Rating
    0
    naveen.kumar@accelrys.com is on a distinguished road

      0  

    Default


    Thanks a lot, will try it out.

Similar Threads

  1. Image Rotate/ Zoom/ Pan
    By durlabh in forum Community Discussion
    Replies: 4
    Last Post: 1 Dec 2010, 9:09 AM
  2. [Ext JS 3+] Ext.ux.grid.plugins.Pan - Pan support for LockingGridView
    By mankz in forum Ext 3.x: User Extensions and Plugins
    Replies: 0
    Last Post: 9 Aug 2010, 4:47 AM
  3. Image zoom-in question
    By Liminality in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 16 Jun 2009, 9:22 AM

Thread Participants: 4

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi