1. #21
    Sencha User
    Join Date
    Mar 2012
    Posts
    6
    Vote Rating
    0
    Cacofoniks is on a distinguished road

      0  

    Default


    dphunkt, that worked like a charm thank you very so much

    Have you tested it in an Android device? The pinch doesn't work in my Desire (Android 2.2), is that how it is supposed to be?

    Thanks again!!

    Petros

  2. #22
    Sencha User
    Join Date
    Dec 2011
    Posts
    99
    Vote Rating
    0
    Perdiga is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by Cacofoniks View Post
    dphunkt, that worked like a charm thank you very so much

    Have you tested it in an Android device? The pinch doesn't work in my Desire (Android 2.2), is that how it is supposed to be?

    Thanks again!!

    Petros
    i am testing in my galaxy tab and works fine ...

    now how can i centralize the image?

  3. #23
    Sencha User
    Join Date
    Mar 2012
    Posts
    6
    Vote Rating
    0
    Cacofoniks is on a distinguished road

      0  

    Default


    ...from what I understand the issue of central image is still to be resolved.

    Is there any way that we can embed a standard JS-framework agnostic solution for pinch-zoom in Sencha, like the Zynga Scroller for example?

    Thanks...

  4. #24
    Sencha User
    Join Date
    Oct 2007
    Posts
    585
    Vote Rating
    0
    bhomass is on a distinguished road

      0  

    Default


    Hi, great class.

    I have it all working except for image size.

    when I use flex:1, the image if hard coded to 0 width and 0 height. I can see the style:"width:0px; height:0px; !important" attribute in the source.

    when I use width: 320, height:440
    it works but is the wrong format, and when I rotate the phone to a landscape orientation, the width does not adjust.

    question: is flex:1 suppose to let the image display at the full size of the screen? why do I get hard coded size of 0,0? when you set a fixed width and height, are you suppose to detect the browser container size first? how do you adjust when the phone rotates?

  5. #25
    Sencha User
    Join Date
    Oct 2007
    Posts
    585
    Vote Rating
    0
    bhomass is on a distinguished road

      0  

    Default


    I played with various width and height settings. it seems as long as I set the width to be sames as the landscape phone width, it looks decent in either direction. However, there is problem panning to the bottom of the page. Everytime I tried move the page up to see the bottom section, it snaps back by itself. any ideas?

  6. #26
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    45
    Vote Rating
    0
    SButts is on a distinguished road

      0  

    Default


    Quote Originally Posted by Cacofoniks View Post
    dphunkt, that worked like a charm thank you very so much

    Have you tested it in an Android device? The pinch doesn't work in my Desire (Android 2.2), is that how it is supposed to be?

    Thanks again!!

    Petros

    I think the pinch event is only supported on iOS and Android 3+.

  7. #27
    Sencha User
    Join Date
    Oct 2007
    Posts
    585
    Vote Rating
    0
    bhomass is on a distinguished road

      0  

    Default


    pinch works on my Samsung Galaxy Nexus. only problem is pan to the bottom of the image.

  8. #28
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    45
    Vote Rating
    0
    SButts is on a distinguished road

      0  

    Default


    Quote Originally Posted by bhomass View Post
    pinch works on my Samsung Galaxy Nexus. only problem is pan to the bottom of the image.
    Doesn't that phone have Android 4?

  9. #29
    Sencha User
    Join Date
    Oct 2007
    Posts
    585
    Vote Rating
    0
    bhomass is on a distinguished road

      0  

    Default


    yes, is Android 4.

    no one else sees the same problem? why would the image snap back and refuses to reach the bottom?

  10. #30
    Sencha User
    Join Date
    Dec 2011
    Posts
    99
    Vote Rating
    0
    Perdiga is an unknown quantity at this point

      0  

    Default


    i implement this class and improve

    ItemCarousel.js
    Code:
    Ext.define('App.ext.carousel.ItemCarousel', {
        extend: 'Ext.Container',
        xtype: 'itemcarousel',
    
    
        config: {
            src: null,
            id: null,
            initWidth: null,
            initHeight: null,
            layout: 'vbox',
            scrollable: {
                direction: 'both',
                directionLock: false,
                indicators: false,
                momentumEasing: {
                    momentum: {
                        acceleration: 60,
                        friction: 0.3
                    },
                    bounce: {
                        acceleration: 30,
                        springTension: 0.3
                    }
                }
            },
            listeners: {
                painted: function () {
                    this.load();
                },
                resize:function(){
                    console.log(arguments,'resize')
                }
            }
    
    
        },
        load: function () {
            this.removeAll();
            this.add({
                xtype: 'image',
                cls: 'carousel-item-img',
                width: this.getInitWidth(),
                height: this.getInitHeight(),
                style: {
                    '-webkit-background-size': 'contain',
                    '-webkit-backface-visibility': 'hidden',
                    '-webkit-perspective': '1000',
                    '-webkit-transform': 'translate3d(0, 0, 0)'
                },
                src: this.getSrc(),
                listeners: {
                    load: function (img, e, eOpts) {
                        img.setWidth(img.imageObject.naturalWidth);
                        img.setHeight(img.imageObject.naturalHeight);
                    }
                }
            });
        },
    });
    PinchCarousel
    Code:
    Ext.define('App.ext.carousel.PinchCarousel', {
        extend: 'Ext.Carousel',
        xtype: 'slideshow',
    
    
        onItemAdd: function (item, index) {
            var scale, perc, size,
                el = item.element;
    
    
            el.on({
                doubletap: function (e, node, options, eOpts) {
                    size = el.down('.carousel-item-img').getSize();
                    newScale = item.parent.itemLength / size.width
    
    
                    width = size.width * newScale,
                    height = Math.round(size.height * newScale),
    
    
                    console.log(width, height, newScale)
    
    
                    el.down('.carousel-item-img').setSize(width, height);
                },
    
    
                pinchstart: function (e, node, options, eOpts) {
                    size = el.down('.carousel-item-img').getSize();
                },
                pinch: function (e, node, options, eOpts) {
                    var newScale = e.scale,
                        scroller = item.getScrollable().getScroller(),
                        width = size.width * newScale,
                        height = size.height * newScale,
                        pos = scroller.getMaxPosition();
    
    
                    if (height > 1920 || width > 1200 || height < 350 || width < 350) return;
    
    
                    el.down('.carousel-item-img').setSize(width, height);
                    //keeps it centered but jumpy
                    scroller.scrollTo(pos.x / 2, pos.y / 2);
                },
                pinchend: function () {
                    //item.getScrollable().getScroller().refresh();
                },
            });
    
    
            this.callParent(arguments);
        },
        onDragStart: function (e) {
            var scroller = this.getActiveItem().getScrollable().getScroller();
            //ensure the image component is scrolled all the way to the edge of its scrollable container
            if (e.targetTouches.length == 1 && (e.deltaX < 0 && scroller.getMaxPosition().x === scroller.position.x) || (e.deltaX > 0 && scroller.position.x == 0)) {
                this.callParent(arguments);
            }
        },
        onDrag: function (e) {
            //console.log(this.getActiveItem().getScrollable().getScroller().position.x);
            if (e.targetTouches.length == 1)
                this.callParent(arguments);
        },
        onDragEnd: function (e) {
            if (e.targetTouches.length < 2)
                this.callParent(arguments);
        }
    });
    how to use
    Code:
    var img = Ext.create('App.ext.carousel.ItemCarousel', {   
                                    src:result.Result[i].uri,
                                    id:'image'+i,
                                });
                                mySlideShow.add(img);
    i need now centralize the image.. any suggestions?