Sencha Touch 2.2.1 Carousel 未初始化

Posted 2023-02-25

【中文标题】Sencha Touch 2.2.1 Carousel 未初始化

【英文标题】：Sencha Touch 2.2.1 Carousel not inizialized

【发布时间】：2013-07-01 07:56:09

【问题描述】：

我回到了目录查看器应用程序的项目中，在更新到上一个 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"  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();
            
        
    

);

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

提前致谢。

【参考方案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"  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();
        );
    
);

【讨论】：

轮播没有得到z-index值，导航菜单在它上面，所以我从样式中删除并直接放入'catalogues_carousel'zIndex：10的配置中，我还将模态更改为false。唯一让我无法工作的是淡出动画，没什么大不了的，但它很吸引人。