Sencha Touch 2 - 选项卡式面板中的轮播

Posted 2023-02-25

【中文标题】Sencha Touch 2 - 选项卡式面板中的轮播

【英文标题】：Sencha Touch 2 - Carousel in Tabbed Panel

【发布时间】：2012-08-03 23:24:55

【问题描述】：

我想查看 2 个 v-box 位于两个不同选项卡中的视图。我的代码没有显示错误，但唯一显示在没有选项卡的选项卡式面板中的内容。您可以看到部分编辑了教程 Carousel 并带有相同课程的一些副本，但请忽略它。

Ext.define("caryhartline.view.Carousel", 
    extend : 'Ext.tab.Panel',
    requires : ['Ext.carousel.Carousel'],
    config : [
        tabBarPosition : 'top',
        items : [
            title : 'Business',
            iconCls : 'action',
            layout : 'card',
            config : [
                cls : 'cards',
                layout : 
                    type : 'vbox',
                    align : 'stretch'
                ,
                defaults : 
                    flex : 1
                ,
                items : [
                            xtype : 'carousel',
                            items : [
                                        html : '',
                                        cls : 'card businesstemplatepicture'
                                    , 
                                        html : '',
                                        cls : 'card businesstemplatepicture'
                                    ]
                        , 
                            xtype : 'carousel',
                            ui : 'light',
                            direction : 'vertical',
                            items : [
                                        html : '',
                                        cls : 'card dark businesstemplate2picture'
                                    , 
                                        html : 'And can also use <code>ui:light</code>.',
                                        cls : 'card dark'
                                    , 
                                        html : 'Card #3',
                                        cls : 'card dark'
                                    ]
                        ]
            ]
        ]
    , 
        title : 'Minimalist',
        iconCls : 'action',
        layout : 'card',
        config : 
            cls : 'cards',
            layout : 
                type : 'vbox',
                align : 'stretch'
            ,
            defaults : 
                flex : 1
            ,
            items : [
                        xtype : 'carousel',
                        items : [
                                    html : '',
                                    cls : 'card businesstemplatepicture'
                                , 
                                    html : '',
                                    cls : 'card businesstemplatepicture'
                                ]
                    , 
                        xtype : 'carousel',
                        ui : 'light',
                        direction : 'vertical',
                        items : [
                                    html : '',
                                    cls : 'card dark businesstemplate2picture'
                                , 
                                    html : 'And can also use <code>ui:light</code>.',
                                    cls : 'card dark'
                                , 
                                    html : 'Card #3',
                                    cls : 'card dark'
                                ]
                    ]
        
    ]
);

【参考方案1】：

由于某种原因，将内容放入配置中会导致问题。不知道出了什么问题。我认为当我们不能在类定义中使用嵌套配置时。但这应该可行

Ext.define("App.view.Carousel", 
    extend : 'Ext.tab.Panel',
    requires : ['Ext.carousel.Carousel'],
    config : 
        tabBarPosition : 'top',
        items : [
            title : 'Business',
            iconCls : 'action',
            cls : 'cards',
            layout : 
                type : 'vbox',
                align : 'stretch'
            ,
            defaults : 
                flex : 1
            ,
            items : [
                xtype : 'carousel',
                items : [
                    html : 'Test 1',
                    cls : 'card businesstemplatepicture'
                , 
                    html : 'Test 2',
                    cls : 'card businesstemplatepicture'
                ]
            , 
                xtype : 'carousel',
                ui : 'light',
                direction : 'vertical',
                items : [
                    html : 'Test 3',
                    cls : 'card dark businesstemplate2picture'
                , 
                    html : 'And can also use <code>ui:light</code>.',
                    cls : 'card dark'
                , 
                    html : 'Card #3',
                    cls : 'card dark'
                ]
            ]
        , 
            title : 'Minimalist',
            iconCls : 'action',
            xtype:'panel',            
            layout:'vbox',
            defaults:
                flex:1
            ,
            items:[
                xtype : 'carousel',
                direction:'vertical',
                items:[
                    
                        style:'background-color:blue;'
                    ,
                    
                        style:'background-color:red;'
                    
                ]
            ,
                xtype : 'carousel',
                direction:'horizontal',
                items:[
                    
                        style:'background-color:green;'
                    ,
                    
                        style:'background-color:orange;'
                    
                ]
                
            ]
        ]
    
);