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

Question

请原谅我的天真。我正在尝试将工具栏上的按钮链接到新卡，而不是选项卡面板。新卡将具有与家庭不同的面板元素我已经观看了所有视频图并阅读了这里的几篇文章，但不知何故从未完全设法对其进行排序。

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

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

希望这能回答您的问题。