Question

我有一个现有的工具栏，并且想要添加一个标签，它可以在两个使用卡片布局的面板之间切换。什么是我最好的选择，有没有这样做的例子？

是否可以将标签添加到现有工具栏？更改现有按钮上的xtype并没有为我提供我希望看到的标签。
创建一个标签面板，其中包含我的两张卡片，将每个标签映射到其面板。使用此选项，我可以在选项卡面板中添加其他按钮和菜单吗？

以下是我现有工具栏代码的示例，message_button和attachments_button可以只有一个xtype的tab，然后以某种方式模拟选项卡功能吗？

Ext.define('MyArchive.Toolbar', {                                                                                                                                                 
  alias: 'myarchive.toolbar',                                                                                                                                                     
  extend: 'Ext.toolbar.Toolbar',                                                                                                                                                  
  dock: 'top',                                                                                                                                                                    
  width: '100%',                                                                                                                                                                  
  items: [
    // Pretty straight forward buttons with a listener, nothing fancy
    messages_button,                                                                                                                                                                  
    attachments_button,                                                                                                                                         
    '->',                                                                                                                                                                         
    { xtype: 'button', id: 'forward-button', text: 'Forward' },                                                                                                                    
    '-',                                                                                                                                                                          
    { xtype: 'button', id: 'recover-button', text: 'Recover' },                                                                                                                    
    '-',                                                                                                                                                                          
   {                                                                                                                                                                              
     text: 'Download',                                                                                                                                                            
     menu: {                                                                                                                                                                      
       xtype: 'menu',                                                                                                                                                             
       id: 'download-menu',                                                                                                                                                       
       items: [                                                                                                                                                                   
         {xtype: 'menuitem', id: 'download-original', text: 'Original', iconCls: 'download-icon'},                                                                                
         {xtype: 'menuitem', id: 'download-pdf', text: 'PDF', iconCls: 'pdf-icon'}                                                                                                
       ]                                                                                                                                                                          
     }                                                                                                                                                                            
   }                                                                                                                                                                              
  ]

Answer 1

是否可以将标签添加到现有工具栏？改变了我现有按钮上的xtype没有提供我的标签希望能看到。

我试过了。但没有运气。

创建一个标签面板，其中包含我的两张卡片，映射每个标签到它的面板。使用此选项，我可以添加其他按钮和菜单到标签面板？

有可能。但结果看起来很难看（你可以用CSS装饰它）使用tabpanel.tabBar.add()添加按钮和菜单（Here is demo）：

tabpanel.tabBar.add({
    xtype: 'button',
    text: 'hallo, I\'m a button'
});
tabpanel.tabBar.add({
    xtype: 'splitbutton',
    text: 'Download',
    menu: {
        xtype: 'menu',
        id: 'download-menu',
        // ans so on ...

将选项卡添加到ExtJS中的现有工具栏

1 个答案: