Jump to content
uniGUI Discussion Forums
merolarosa

How can I use this in TUnimHTMLFrame? Important !!!

Recommended Posts

Hi all,

 

I am trying to test having a carousel in mobile app with pinch to zoom functionality. I found this amazing example:

 

https://github.com/SunboX/ST2_ImageViewer

 

https://www.sencha.com/forum/showthread.php?197903-Pinch-Image-with-carousel-and-working-fine

 

But I can't get it to work with unigui mobile or desktop

 

I changed files paths in .js or html to correct "files/..." to work correctly with unigui, also added this code to BeforeScript property in UnimHTMLFrame1:

Ext.Loader.setConfig({
    enabled: true,
    paths: {
        'Ext.ux': 'files/ux'
    }
});

Ext.define('Demo.Viewport', {
    extend: 'Ext.Carousel',
    xtype : 'my-viewport',
    config: {
        items: [
            {
                xtype: 'imageviewer',
                style: {
                    backgroundColor: '#333'
                },
                imageSrc: 'files/images/Desert.jpg'
            },
            {
                xtype: 'imageviewer',
                style: {
                    backgroundColor: '#333'
                },
                imageSrc : 'files/images/Hydrangeas.jpg'
            },
            {
                xtype: 'imageviewer',
                style: {
                    backgroundColor: '#333'
                },
                imageSrc: 'files/images/Chrysanthemum.jpg'
            }
                ],
        listeners: {
            activeitemchange: function(container, value, oldValue, eOpts) {
                if (oldValue) {
                    oldValue.resetZoom();
                    this.getActiveItem().resize();
                }
            },
            resize: function(component, eOpts) {
                this.getActiveItem().resize();
            }
        }
    },
    onDragStart: function(e) {
        var scroller = this.getActiveItem().getScrollable().getScroller();
        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) {
        if (e.targetTouches.length == 1)
            this.callParent(arguments);
    },
    onDragEnd: function(e) {
        if (e.targetTouches.length < 2)
            this.callParent(arguments);
    }
});

Ext.define('Demo.ViewportPanel', {
    extend: 'Ext.Panel',
    xtype : 'my-viewport-panel',
    config: {
        fullscreen: true,
        layout: 'fit',
        items: [{
            xtype: 'titlebar',
            docked: 'top',
            items: [
                {
                    text: 'ZoomIn',
                    listeners: {
                        tap: function() {
                            Ext.getCmp('myCarousel').getActiveItem().onZoomIn();
                        }
                    }
                },
                {
                    text: 'ZoomOut',
                    align: 'right',
                    listeners: {
                        tap: function() {
                            Ext.getCmp('myCarousel').getActiveItem().onZoomOut();
                        }
                    }

                }
            ]
        }, {
            xtype: 'my-viewport',
            id: 'myCarousel'
        }]
    }
});

Ext.application({

    name  : 'ImageViewer Carousel Demo',
    views : [
        'Ext.ux.ImageViewer'
    ],
    launch: function() {

        Ext.Viewport.add({
            xtype: 'my-viewport-panel'
        });
    }
});

or this for single image viewer

Ext.Loader.setConfig({
    enabled: true,
    paths: {
        'Ext.ux': 'files/ux'
    }
});

Ext.application({

    name  : 'Simple ImageViewer Demo',
    views : [
        'Ext.ux.ImageViewer'
    ],
    launch: function() {

        Ext.Viewport.add({
            xtype: 'imageviewer',
            style: {
                backgroundColor: '#333'
            },
            imageSrc: 'files/desert.jpg'
        });
    }
});
All I get is the "loading..." the carousel radio buttons are working but images are not sliding and the two buttons on the top panel (zoomin/zoomout) are working too.
 
Sorry to bother you guys but I am not good with html/css or js so i can fix this on my own
 
Any help will be appreciated 
 
Thanks in advance

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×