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

问题描述

| 请原谅我的天真。我正在尝试使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\',flex: 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;
                    }
                }
            }
        }); 
    }
});

然后，您将不得不以某种方式关闭该面板（可能是一个关闭按钮），以便用户可以返回到原始选项卡面板。虽然最好还是保留选项卡面板不变，然后在选项卡面板中的面板中添加新卡片。 希望这能回答您的问题。