Sencha Touch 2.2.1 Carousel not inizialized

0
votes

I'm back on the project of catalogue viewer app, and after updating to the last sencha release, I have the same problem I had a couple of month ago...the carousel don't recognize the onTap event or, it won't load correctly.

The app is quite simple, the structure is the following:

  • company name
    • list of catalogues
      • detailcard with the catalogue pages (3 per row)
        • carousel starting from the page tapped

The fact that when I use the app NOT compiled with sencha cmd, it work very smoothly, and problemless, but when I build the app (also production and packaging) with sencha cmd, it won't work.

The dataview show all the image, and when I click one of them, it pop-up the carousel, but empty. I tried to debug, and it won't do the initialize, but why only in the build version?

The code that I use is the following:

Ext.define('CIAM_app.view.Cataloghi', {
extend: 'Ext.NestedList',
xtype: 'cataloghi',
requires: ['Ext.data.TreeStore', 'Ext.carousel.Carousel'],
fullscreen: true,
config: {
    iconCls: 'doc',
    iconMask: true,
    title: 'Cataloghi',
    styleHtmlContent: true,
    store: 'lista_cataloghiStore',
    variableHeights: true,
    listConfig: {
        itemTpl: '<tpl if="leaf == false"><img src="{icon}" alt="{text}" class="cataloghi_img" /></tpl><tpl if="leaf == true"><p class="cataloghi_p">{text}</p></tpl>',
    },
    listeners: {
        leafitemtap: function(nestedList, list, index, target, record) {
            var detailCard = nestedList.getDetailCard();
            var pagina = record.get('immagini_catalogo');
            var n = record.get('pagine_catalogo');
            items = [];
            if (detailCard.getData() != null) {
                detailCard.getStore().removeAll(true, true);
            }
            for (i = 1; i <= n; i++) {
                items.push({
                    src: 'gallery/' + pagina + '/' + i + '.jpg',
                });
            }
            detailCard.setData(items);
            detailCard.refresh();
        },
    },
    detailCard: {
        xtype: 'dataview',
        itemTpl: '<img src="{src}">',
        cls: 'immagine_catalogo',
        listeners: {
            itemtap: function(dataView, index, target, record, e, eOpts) {
                Ext.Viewport.add({
                    xtype: 'carousel',
                    extend: 'Ext.Carousel',
                    defaultType: 'image',
                    initialize: function() {
                        this.setItems(dataView.getData());
                        this.setActiveItem(index);
                        this.callParent();
                        this.element.on('tap', this.onTap, this);
                    },
                    onTap: function(e, t) {
                        this.fireEvent('tap', this, e, t);
                        this.hide();
                    },
                    style: {
                        'background': 'rgba(206,203,203,0.87)'
                    },
                    indicator: false,
                    width: '100%',
                    height: '100%',
                    centered: true,
                    fullscreen: true,
                    modal: true,
                    hideOnMaskTap: true,
                    showAnimation: {
                        type: 'popIn',
                        duration: 250,
                        easing: 'ease-out'
                    },
                    hideAnimation: {
                        type: 'popOut',
                        duration: 250,
                        easing: 'ease-out'
                    },
                }).show();
            }
        }
    }
}
});

If you want to see the webapp, here's the link: http://www.ciamcostruzioni.it/CIAM_app/not_compiled/

Thanks in advance.

1
sencha-touch-2carouselsencha-cmd

1 Answers

0
votes

I have made some changes in your code. Check it:

http://jsfiddle.net/JCarlesVilaseca/NZj3N/

Ext.define('CIAM_app.view.Cataloghi', {
    extend: 'Ext.NestedList',
    xtype: 'cataloghi',
    requires: ['Ext.data.TreeStore', 'Ext.carousel.Carousel'],
    fullscreen: true,
    config: {
        iconCls: 'books',
        iconMask: true,
        title: 'Cataloghi',
        styleHtmlContent: true,
        store: Ext.create('CIAM_app.store.lista_cataloghiStore'),
        variableHeights: true,
        listConfig: {
            itemTpl: '<tpl if="leaf == false"><img src="http://www.ciamcostruzioni.it/CIAM_app/not_compiled/{icon}" alt="{text}" class="cataloghi_img" /></tpl><tpl if="leaf == true"><p class="cataloghi_p">{text}</p></tpl>'
        },
        listeners: {
            leafitemtap: function(nestedList, list, index, target, record) {
                var detailCard = nestedList.getDetailCard();
                var pagina = record.get('immagini_catalogo');
                var n = record.get('pagine_catalogo');
                items = [];
                if (detailCard.getData() !== null) {
                    detailCard.getStore().removeAll(true, true);
                }
                for (i = 1; i <= n; i++) {
                    items.push({
                        src: 'http://www.ciamcostruzioni.it/CIAM_app/not_compiled/gallery/' + pagina + '/' + i + '.jpg'
                    });
                }
                detailCard.setData(items);
                detailCard.refresh();
            }
        },
        detailCard: {
            xtype: 'dataview',
            itemTpl: '<img src="{src}">',
            cls: 'immagine_catalogo',
            listeners: {
                itemtap: function(dataView, index, target, record, e, eOpts) {
                    Ext.Viewport.add({
                        xtype: 'catalogues_carousel',
                        listeners: {
                            initialize: function() {
                                this.setItems(dataView.getData());
                                this.setActiveItem(index);
                            }
                        }
                    }).show()
                }
            }
        }
    }
});

Ext.define('CIAM_app.view.Cataloghi_carousel', {
    extend: 'Ext.Carousel',
    xtype: 'catalogues_carousel',   
    requires: ['Ext.carousel.Carousel'],

    config: {
        fullscreen: true,

        defaultType: 'image',

        style: {
            'background': 'rgba(206,203,203,0.87)',
            'z-index':10
        },
        indicator: false,
        modal: true,
        showAnimation: {
            type: 'popIn',
            duration: 250,
            easing: 'ease-out'
        },
        hideAnimation: {
            type: 'popOut',
            duration: 250,
            easing: 'ease-out'
        }
    },

    initialize: function() {
        this.element.on('tap',function() {
            this.hide();
        });
    }
});