Sencha Touch 2 带有工具栏的轮播？答案

【问题标题】：Sencha Touch 2 Carousel with toolbar?Sencha Touch 2 带有工具栏的轮播？
【发布时间】：2013-02-01 22:13:15
【问题描述】：

您好，我如何创建带有工具栏的轮播，希望可以选择点击切换视图并滑动切换视图，这是我的代码，当我运行它时，工具栏内的 xtypes 没有显示在工具栏中？

谢谢

Ext.define("NF.view.tablet.MainH", {
   extend: 'Ext.tab.Panel',
   requires: ['Ext.TitleBar'],


   config: {
   tabBar: {
      hidden: true},    

    items: [

    {
        xtype : 'toolbar',
        docked: 'top',
        title: '',
        layout:'hbox',
        items:[ 

               {xtype: 'home'} ,
               {xtype:'tablet-placesContainer'},
                {xtype:'tablet-About'},
               {text: 'contact'},
               { xtype: 'contactpage'},
                {xtype: 'home3'} ,
               ],

    },  



    {
    xtype:'carousel',
    layout:'fit',
    iconCls: 'home',
        items:[

        {xtype: 'home'} ,

        {xtype:'tablet-placesContainer'},

        {xtype:'tablet-About'},

        {xtype: 'gallery'},

        { xtype: 'contactpage'},

        {xtype: 'home3'} ,

        ]
   }]
   }

});

    When I run this the toolbar info is not showing up.

【问题讨论】：

标签： sencha-touch-2 carousel

【解决方案1】：

我可能误解了你的问题，但也许你最好的选择是

1) 使每个工具栏项成为一个简单的按钮，带有 html 的轮播项名称

2) 给轮播命名

3) 只需为设置正确活动项的每个工具栏项设置一个点击事件：

Ext.define("NF.view.tablet.MainH", {
   extend: 'Ext.tab.Panel',
   requires: ['Ext.TitleBar'],


   config: {
   tabBar: {
      hidden: true},    

items: [

{
    xtype : 'toolbar',
    docked: 'top',
    title: '',
    layout:'hbox',
    items:[ 

           {xtype:'button',text: 'home', handler:function(){Ext.getCmp('carousel_name').setActiveItem(0)}} ,
           {xtype:'button',text: 'places', handler:function(){Ext.getCmp('carousel_name').setActiveItem(1)}} ,
           ],

},  



{
xtype:'carousel',
id:'carousel_name',
layout:'fit',
iconCls: 'home',
    items:[

    {xtype: 'home'} ,

    {xtype:'tablet-placesContainer'},

    {xtype:'tablet-About'},

    {xtype: 'gallery'},

    { xtype: 'contactpage'},

    {xtype: 'home3'} ,

    ]

}] }

【讨论】：