Sencha Touch 中链接到新面板的按钮

Question

请原谅我的天真。我正在尝试将 ToolBar 上的按钮链接到新卡片，而不是 TabPanels。新卡片的面板元素将与我在此处观看所有视频并阅读了几篇文章的首页不同，但不知何故始终无法对其进行排序。

new Ext.Application({
        name: 'Demo App',
        launch: function() {
        this.viewport = new Ext.TabPanel({
           fullscreen: true,
           id: 'mainPanel',
           html: 'Welcome',
           cls: 'homescreen',
           dockedItems: [{
              xtype: 'toolbar',
              ui: 'light',
              title: 'Home',
              items: [
                 {text: 'Option1', ui: 'action',  flex: 1},
                 {xtype: 'spacer', },
                 {text: 'Option2', ui: 'action',flex: 1 }
              ]
           }]
        }); 
    }
});

Answer 1

这并不是标签面板的真正意义所在。它应该将卡片加载到主面板中并让您在它们之间移动。您可以通过拦截卡片开关并像这样呈现新的单独面板来加载新的全屏面板（可能有自己的选项卡面板或其他元素）：

new Ext.Application({
    name: 'Demo App',
    launch: function() {
        this.viewport = new Ext.TabPanel({
            fullscreen: true,
            id: 'mainPanel',
            cls: 'homescreen',
            items: [{
                title   : 'Home',
                html    : 'Welcome'
            },{
                title   : 'Full screen'
            }],
            listeners   : {
                beforecardswitch : function (ct, newcard, oldcard) {
                    if (newcard.title == 'Full screen') {
                        var panel = new Ext.Panel({
                            fullscreen  : true,
                            dockedItems : [{
                                xtype   : 'toolbar',
                                title   : 'Full screen',
                                dock    : 'top',
                            }],
                            html        : 'Full!'
                        });
                        return false;
                    } else {
                        return true;
                    }
                }
            }
        }); 
    }
});

然后您必须以某种方式关闭该面板（可能是关闭按钮），以便用户可以返回到原始选项卡面板。尽管您最好保留选项卡面板，然后将新卡片添加到选项卡面板内的面板中。

希望这能回答您的问题。