Sencha Touch 2.2.1 Carousel未初始化

Question

我回到了目录查看器应用程序的项目，在更新到最后一个sencha版本之后，我遇到了几个月前的问题...轮播无法识别onTap事件或者，它无法正确加载。

该应用程序非常简单，结构如下：

• 公司名称
  • 目录列表
    • 详细信息卡与目录页面（每行3个）
      • 旋转木马从页面开始点击

当我使用不使用sencha cmd编译的应用程序时，它工作非常顺利，并且没有问题，但是当我使用sencha cmd构建应用程序（也是生产和打包）时，它将无法正常工作。

数据视图显示所有图像，当我点击其中一个时，它会弹出轮播，但是空了。我试图调试，它不会进行初始化，但为什么只在构建版本？

我使用的代码如下：

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();
            }
        }
    }
}
});

如果您想查看网络应用，请点击以下链接：http://www.ciamcostruzioni.it/CIAM_app/not_compiled/

提前致谢。

Answer 1

我在代码中做了一些更改。检查一下：

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();
        });
    }
});