Sencha Touch 2 - 选项卡式面板中的传送带

Question

我想查看两个不同选项卡中的两个v-box。我的代码显示没有错误，但唯一显示在没有选项卡的选项卡式面板中。你可以看到，部分修改了相同类的一些副本的教程传送带，但忽略了这一点。

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' 
           }] 
        }] 
     } 
    }] 
}); 

Answer 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;' 
        } 
       ] 
       } 
      ] 
     }] 
    } 
});