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

[merolarosa]

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

[merolarosa]

Could someone please help me with this !!!