tab.Panel內的tab.Panel？

Question

我正在編寫一個簡單的應用程序與主頁選項卡，其中應該有3個選項卡稱爲「早餐」，「午餐」和晚餐。然而這些標籤在家裏不起作用。它們顯示但對點擊無響應。

代碼：

視圖/ Main.js

Ext.define('MyApp.view.Main', { 
extend: 'Ext.tab.Panel', 
requires: ['Ext.TitleBar'], 
xtype: 'main', 
config: { 
    tabBarPosition: 'bottom', 
    items: [ 
     { 
      xtype: 'menu', 
     } 
    ] 
} 

}）;

視圖/ Menu.js

Ext.define('MyApp.view.Menu', { 
extend: 'Ext.tab.Panel', 
requires: ['Ext.TitleBar'], 
xtype: 'menu', 
config: { 
    title: 'Menu', 
    iconCls: 'home', 
    tabBar: { 
     layout: { 
      pack: 'center' 
     } 
    }, 
    items: [ 
     { 
      title: 'Breakfast', 
      items: { 
       docked: 'top', 
       xtype: 'titlebar', 
       title: 'Breakfast Menu' 
      }, 

      html: [ 
       "Breakfast menu will be here" 
      ].join("") 
     }, 
     { 
      title: 'Lunch', 


      items: { 
       docked: 'top', 
       xtype: 'titlebar', 
       title: 'Lunch Menu' 
      } 

      html: [ 
       "Lunch menu will be here" 
      ].join("") 
     }, 
     { 
      title: 'Dinner', 

      items: { 
       docked: 'top', 
       xtype: 'titlebar', 
       title: 'Dinner Menu' 
      }, 

      html: [ 
       "Dinner menu will be here" 
      ].join("") 
     }, 
    ] 
} 

}）

Answer 1

問題固定...顯然命名的xtype： '菜單' 引起的問題。不要用通用名稱命名你的xtype！