Button Sencha Touch使用按钮更新选项卡面板的内容

我一直在努力学习Sencha Touch，我被一些很明显的东西卡住了。我正在尝试用按钮事件更新选项卡面板。我想点击第一个按钮，在同一面板中加载“maptestPanel”。这是一个从自己的js文件加载的映射

地图面板本身看起来正常：

 maptestPanel =  new Ext.Panel({
                      layout: 'fit',
                      fullscreen: true,
                      items: [map]
                  });

但我不知道如何正确地将其放置在选项卡面板中

代码是：

Ext.setup({
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,
    onReady: function() {

    var navBar = new Ext.Toolbar({
        dock : 'top',
        title: 'Some App Name',
    });

    var topPanel = new Ext.Panel({
        dockedItems: [navBar],
        fullscreen : true,
        //html: 'Test Panel'
    });


    var tapHandler = function(button, event) {
            btnPanel.update(maptestPanel); //I'm sure part of the problem is here   
    }   


    var SomeDate1 = new Ext.Button({
        text:"Some date",
        minWidth:200,
        height: 45,
        cls:"listButtonTop",
        handler:tapHandler                  
        });

    var SomeDate2 = new Ext.Button({
        text:"Another Date",
        minWidth:200,
        height: 45,
        cls:"listButton"
    });

    var SomeDate3 = new Ext.Button({
        text:"And Another Date",
        minWidth:200,
        height: 45,
        cls:"listButtonBottom"
    });


    var btnPanel = new Ext.Panel ({
        id: 'date',
        items: [SomeDate1,SomeDate2,SomeDate3],         
    });

    var tabpanel = new Ext.TabPanel({
        layout: 'card',
        tabBar: {
            dock: 'bottom',
            layout: {
                pack: 'center'
            }
        },
        fullscreen: true,
        ui: 'dark',
        cardSwitchAnimation: {
            type: 'slide',
            cover: true
        },
        defaults: {
            scroll: 'vertical'
        },
        items: [{
            title: 'Maps',
            //html: '<h1>Place holder</h1>',
            iconCls: 'maps',
            cls: 'card1',
            items: [btnPanel]               
        }, {
            title: 'Favs',
            html: '<h1>Place holder</h1>',
            iconCls: 'favorites',
            cls: 'card2',
            badgeText: '4',
            layout: 'fit'
            //items: [SomeList, SomeOtherList, AnotherList]
        }, {
           title: 'Info',
            html: '<h1>Place holder</h1>',
            cls: 'card4',
            iconCls: 'info'
        }]
    });
   }
});

Ext.setup({
图标：“icon.png”，
TabletStartup屏幕：“tablet_startup.png”，
phoneStartupScreen:'phone_startup.png'，
格洛松尼康：错，
onReady:function（）{
var navBar=新的外部工具栏({
码头：“顶部”，
标题：“某个应用程序名称”，
});
var topPanel=新的外部面板({
dockedItems:[navBar]，
全屏：对，
//html:“测试面板”
});
var tapHandler=函数（按钮、事件）{
update（maptestPanel）；//我确信部分问题在这里
}   
var SomeDate1=新建外部按钮({
文字：“某个日期”，
最小宽度：200，
身高：45，
cls：“listButtonTop”，
处理程序：tapHandler
});
var SomeDate2=新建外部按钮({
文本：“另一个日期”，
最小宽度：200，
身高：45，
cls：“列表按钮”
});
var SomeDate3=新建外部按钮({
文本：“和另一个日期”，
最小宽度：200，
身高：45，
cls：“listButtonBottom”
});
var btnPanel=新的外部面板({
id:'日期'，
项目：[SomeDate1，SomeDate2，SomeDate3]，
});
var tabpanel=新的Ext.tabpanel({
布局：“卡片”，
选项卡栏：{
船坞：“底部”，
布局：{
包装：'中心'
}
},
全屏：对，
ui:“黑暗”，
CardSwitch动画：{
键入：“幻灯片”，
封面：对
},
默认值：{
滚动：“垂直”
},
项目：[{
标题:"地图",，
//html:“占位符”，
iconCls:“地图”，
cls:“card1”，
项目：[btnPanel]
}, {
标题：“FAV”，
html:“占位符”，
iconCls:“收藏夹”，
cls:“card2”，
正文：“4”，
布局：“适合”
//项目：[一些列表，一些其他列表，另一个列表]
}, {
标题：“信息”，
html:“占位符”，
cls:“card4”，
iconCls:“信息”
}]
});
}
});

---

感谢您提供的任何建议或正确的方向。

要修复该代码，您需要做几件事：

1） “地图”没有布局。因为它只有一个子项，所以布局：“fit”在这里是合适的

2） 仅在最外层的项目上使用全屏，您不希望其他项目全屏显示，因为它们是其他容器的子项目

3） 要向容器动态添加项，请对容器使用add（）方法。您还需要调用doLayout（）来触发容器的布局

btnPanel.add(maptestpanel);
btnPanel.doLayout();

但是，在这种情况下，我不明白为什么要将地图添加到面板中，它不会提供任何额外的功能。相反，我会直接将地图添加到btnPanel

4） btnPanel也没有布局，因此您还需要在那里选择适当的布局，可能是vbox布局。

我只知道“经典”sencha，但这应该是同样的工作方式：因此您可以将地图面板（但隐藏）添加到选项卡面板，并在按钮处理程序中显示它，同时隐藏按钮面板

---

此外，说到布局，我认为您不需要精确布局：tabPanel中的“card”，因为它根据定义使用了卡片布局

谢谢您的大力帮助！这开始有意义了。我做了这些更改，最后添加了btnPanel.add（maptestpanel）；btnPanel.doLayout（）；和btnPanel.setActiveItem（3）；给处理者。这非常接近。它在一个新选项卡中显示地图，但工具栏上有一个浅灰色正方形（如空图标）。可以很容易地移除吗？